The Disturbed Web Authoring Tutorials

The Disturbed Web Authoring Tutorials [ C S S ] The Disturbed Web Authoring Tutorials

[ T u t o r i a l s ] [ H T M L ] [ C S S ] [ D H T M L ] [ T i p s ] [ D e s i g n ] [ M i s c ] [ A d d L i n k ] [ A d v e r t i s e ] [ F e e d b a c k ] [ C o n t a c t ] [ H o m e ]	Member of 123Banners Cascading Style Sheets [ Welcome to the world of CSS ] Do you know how to use CSS already, then jump to the CSS Reference Table What is CSS? CSS is essential for any websites that have more than 4 or 5 pages in them. CSS enables you to change fonts, font size, or colours for every page on your site, by changing only one value. If we didn't have CSS, we would have to go though every page, and change every bit of text to get the effect we want. So lets find out how it works. Cascading Style Sheets may look hard to understand at first glance, but when you break it down, it is really a piece of cake. The following is the syntax (computer geek talk for the way it should be set out) for CSS selector { property: value } I told you it wasn't that hard. The selector is an HTML element, like BODY, H2, or B. Property is the thing you want to change, like font-size. And finally value is what you are changing it to, so if the property was color, the value could be yellow. You can have multiple properties and values for each selector, all you have to do is add a semi-colon in between them, for example, the syntax now is selector { property1: value1; property2: value2 } How easy is that! Now your proberly thinking, well how does this fit into the web site itself. Good Question. What you need to do is open up Notepad, or another text-based editor, and type in what you want everything to look like, using the above syntax. Then when you are done doing that, save it as 'mystylesheet.css'. Now that you have your style sheet, you have to add some infromation in between the HEAD tags in the HTML document. Just copy and paste the following code into your HEAD tags. Place that at the top of all your pages, and when you want to change the colour of your links, or the size of your text, just change your 'mystylesheet.css' file. It will save a lot of time. Now that you know how to use CSS, click here for the CSS Reference Table

[ T u t o r i a l s ]

[ H T M L ]
[ C S S ]
[ D H T M L ]

[ T i p s ]

[ D e s i g n ]

[ M i s c ]

[ A d d L i n k ]
[ A d v e r t i s e ]
[ F e e d b a c k ]
[ C o n t a c t ]

[ H o m e ]

Member of 123Banners

Cascading Style Sheets

[ Welcome to the world of CSS ]

Do you know how to use CSS already, then jump to the CSS Reference Table

What is CSS? CSS is essential for any websites that have more than 4 or 5 pages in them. CSS enables you to change fonts, font size, or colours for every page on your site, by changing only one value. If we didn't have CSS, we would have to go though every page, and change every bit of text to get the effect we want. So lets find out how it works.

Cascading Style Sheets may look hard to understand at first glance, but when you break it down, it is really a piece of cake. The following is the syntax (computer geek talk for the way it should be set out) for CSS

selector { property: value }

I told you it wasn't that hard. The selector is an HTML element, like BODY, H2, or B. Property is the thing you want to change, like font-size. And finally value is what you are changing it to, so if the property was color, the value could be yellow.

You can have multiple properties and values for each selector, all you have to do is add a semi-colon in between them, for example, the syntax now is

selector { property1: value1; property2: value2 }

How easy is that! Now your proberly thinking, well how does this fit into the web site itself. Good Question. What you need to do is open up Notepad, or another text-based editor, and type in what you want everything to look like, using the above syntax. Then when you are done doing that, save it as 'mystylesheet.css'. Now that you have your style sheet, you have to add some infromation in between the HEAD tags in the HTML document. Just copy and paste the following code into your HEAD tags.

Place that at the top of all your pages, and when you want to change the colour of your links, or the size of your text, just change your 'mystylesheet.css' file. It will save a lot of time.

Now that you know how to use CSS, click here for the CSS Reference Table

Last modified Friday 28 January 2000