| Cascading Style Sheets, also known as CSS, are the | | | | If we want to have a Blue size 12pt title at the start |
| most popular and neat way of formatting an html | | | | of a every article on our web site we would have |
| page. | | | | something like this in our html code:title |
| There are two versions of Cascading Style Sheets | | | | You might be thinking “that doesn’t |
| (CSS). CSS Level 1 was launched in 1996 and is | | | | look too bad”… but what happens if you |
| supported by all browsers. This version is the older of | | | | have 50 titles throughout your site? You would have |
| the two and is used mostly for font formatting, text | | | | to repeat this process over and over again, and you |
| alignment and line spacing. | | | | will be at risk of using different formats for your |
| CSS version 2 came out in 1998. This one is a lot | | | | titles and by doing so breaking the consistency of |
| more powerful than its predecessor allowing you not | | | | your design. Not only that, if you decide to change |
| only to format text but also to position elements on | | | | the color or font of all your titles you would have to |
| your web page. This version of CSS is so powerful | | | | go through the process of changing all 50 font |
| that all good web designers use it instead of using | | | | tags… |
| html tables. | | | | Here’s when CSS comes in handy!!! Instead of |
| The word Cascading reflects how style sheets work. | | | | using font tags for my titles I would use this: |
| An Html document can be linked to several style | | | | In a separate .css document I would add a new style |
| sheets, for example it could be linked to 2 sheets, an | | | | called “titles”. It would look something |
| internal style sheet (styles within the head tag of a | | | | like this: |
| html document) and an external style sheet (a .css | | | | .title { font-size 12pt; color:blue;}and in my html I |
| document). | | | | would replace my font tags with: |
| An important aspect of Cascading Style Sheets is the | | | | Title |
| operation of inheritance. If a certain aspect of | | | | And voila!!! All titles that are within the titles class will |
| formatting is not specified for a child element, it will | | | | be formatted in the same way. The beauty of style |
| inherit the formatting of its parent element. | | | | sheets is that they can be linked to as many web |
| When you use CSS, you can avoid the use of most | | | | pages as you want making the whole process of |
| html format tags making your code much easier to | | | | adding more content to you site a whole lot easier. |
| read. Here’s an example: | | | | |