AlfieWebDevTips Homefor new and experienced developers
[Home Home] [Web Development Web Development ] [Code Generators Code Generators ] [Resources Resources ] [Forums Forum ] [Contact Us Contact ] |WebDevTips Privacy Privacy |

WebDevTips Pick Of The Day : ".$todaytip[$today]." |

"; ?>
Print This Page



 


You are here : Home - Web Development - Style Sheets Style Overview

Style Sheets Overview



Getting started with style sheets.

CSS (Cascading Style Sheets) are very easy to use - Its syntax is easy to learn and once you start using them you will soon realise how powerful they are.

Basically CSS separate content from presentation. What this means in English is that the formatting of text and colors etc can be applied after all the content is written. For example - if you use font tags to specify the font face and size something like this for every paragraph


<p><font face="Arial,Helvetica,sans-serif" size="2" color="#008000">Your text</font></p>

If you then decide that you want to change the color or font throughout your site you will have to find and edit every font tag on every page of your site.

Using CSS also helps to create a consistent look and feel throughout your site making maintenance so much easier.

OK time for an example - lets change the colors of the site, changing the font size and color of the main content.
Click here to change the style
Click here to return to normal

Not the best color scheme in the world but it does show the power of style sheets. I could easily apply a whole new look to the entire site by editing 1 file - no trawling through pages of html looking for font tags or table cell background colors.

Well I hope that small example has made you want to learn more :) if so, then this guide will take you through the basics of learning CSS - the syntax and different methods of using CSS.

Let's take a look at inline styles



Why not discuss this article in our forum?






Google
 

[back to top of page]   

[labelled with icra -  - this link will open in a new window] [RSS Content]

[Copyright © WebDevTips]