WHAT IS CSS?
CSS stands for Cascading style sheets, which is a type of web language, called style sheet language which standardises the layout throughout a website. Therefore used for describing the look and formatting of a document, from document presentation, including elements such as the layout, colours, and fonts. Its commonly used to style web pages, written in HTML and XHTML.
WHY SHOULD CSS BE USED & THE KEY ADVANTAGES -
Using CSS mainly enables the separation of document content, focusing on the appearance and formatting. The separation can improve content accessibility, provide more flexibility and can control the presentation characteristics, to suit specific requirements. CSS also functions the layout of a website, it can reduce the size, clutter and load time of web pages. Additionally it enables multiple pages to share formatting and also reduces complexity and repetition in the structural content. Also, without CSS, a webpage can become teeming with tables nested inside other tables, which causes the speed of a website to be slow, therefore using CSS can also improve the speed of a webpage [1]. CSS additionally prevents clutter, it organises the web code, it makes it simple and straightforward, this also creates fast loading. As well, CSS permits web pages to be displayed and understood, even if the CSS is not working, or removed. It is also supported well by most modern web browsers.
THREE DIFFERENT WAYS OF IMPLEMENTING STYLES WITHIN AN HTML PAGE:
CSS can be implemented in three different ways - inline, embedded, and linked. These implements make CSS a very malleable HTML addition. Here are the three ways of implementing CSS:
LINKED-EXTERNAL FILE:External CSS is a file that contains only CSS code and is saved with a ".css" file extension. This CSS file is then referenced in a HTML using the <link> instead of <style>. You link to the external style sheet from all your HTML pages. This means you only need to set the styles for each element once. The style sheet can be updated if wanted too; you only need to do it in one place.
|
EMBEDDED INTO HEADER:Embedded CSS codes are placed within the <head---/head> area of the page code. That is anywhere after the <head> tag and before the </head> tag. It is not in the head tag itself. Embedded CSS dominates the rules of an external style sheet. An embedded rule doesn't require you to create a rule with each use of an HTML element. [2]
|
INLINE:
PRINT SCREEN OF AN EXAMPLE OF INLINE CSS
Inline styles are CSS styles that are applied to one element using the style attribute. You only apply the style to the instance you want the style to apply to. Inline styles are easy and quick to add, you don’t need to create a whole new document or edit a new element in the head of your document. [3]
CODE:<p style="color:ff9900">inline </p> RESULT:inline
CODE:<p style="color:ff9900">inline </p> RESULT:inline