| HTML tag that has the "background" and "text" | | | | the typeface and point size they used in the rest of |
| attribute, followed by a tag. | | | | the document body. |
| 2. Why Use Cascading Style Sheets? | | | | With CSS, all you have to do is to put a statement |
| What's the big deal, then, you might ask, if the | | | | liketd {font-face: Arial, Helvetica ;font-size: 10pt ; |
| effects specified in a cascading style sheet can | | | | }and write your tables without the font tags, like |
| actually be implemented using old fashioned HTML | | | | ... etc ...and you get the same effect.b. A Central |
| code?a. Formatting vs Function | | | | Location |
| The main reason cited by pundits of Cascading Style | | | | Just as style sheets allow you to put your formatting |
| Sheets is that it allows you to keep formatting | | | | code in one location in your document, you can also |
| elements separate from functional elements. | | | | separate out your style sheet and put it in a |
| For example, thetags (and the rest of the family) are | | | | separate file. Then load the style sheet into your |
| designed to be used for headers. When you enclose | | | | document with a simple tag in the head of your |
| text within these tags, the text is immediately | | | | document. |
| obvious as a header. However, many web designers | | | | So, for example, if you save your style sheet in a file |
| find that the default typeface and point size is not to | | | | called "formatting.css", then you might put a tag like |
| their liking, and as a result resort to making headers | | | | the following in the HEAD section of your document: |
| appear within tags instead of using the header tags. | | | | How is this useful? It is useful when you want to |
| As a result, your document become littered with | | | | apply a standard style across all the documents on |
| formatting code, and any change you make in one | | | | your website. This way, when you want to make a |
| header has to be made to all headers in the | | | | change in say the colour of a table background, all |
| document. | | | | you need to do is to modify your style sheet, and all |
| With cascading style sheets, if you like all | | | | your documents will automatically have the new |
| yourheaders to use a sans-serif typeface at 24 point | | | | appearance. |
| size, simply put the linesh1 {font-face: san-serif | | | | No longer is there any need of going through every |
| ;font-size: 24pt ; | | | | single file on your website to make the changes, and |
| }between your CSS style tags, and anytime you use | | | | accidentally forgetting one.c. Browser-Independent |
| , it would be in a sans-serif 24 point font. Change | | | | Formatting |
| your mind about this and you will only have to | | | | With older browsers, if you wanted to position |
| change it at one location, the style sheet, and not in | | | | certain elements you had to either resort to using |
| the entire document. | | | | tables or use browser dependent facilities like layers. |
| Your document can then be cleaner and you'll be | | | | Cascading Style Sheets allow you to create and |
| using the appropriate HTML tags for the appropriate | | | | position layers in a manner that works with all |
| function (eg, afor a header, etc) instead of filling up | | | | CSS-compliant browsers. |
| your document with all sorts of formatting code. | | | | You can even position any text element without |
| The beauty of style sheets also shines through in | | | | resorting to a table, and create interesting text |
| tables. How many times have you written tables like | | | | effects. Take, for example, the following code which |
| the following? | | | | is to be placed into a style sheet. |
| ... etc... | | | | .bannermain {font-family: Arial Black ;margin-left: 10px |
| ... etc... | | | | ;color: green ;font-size: 28px ; |
| Many new web designers quickly realise that if they | | | | } |
| do not fill up their table cells with tags, their table cells | | | | . |
| will display with the default browser fonts instead of | | | | |