Cascading Style Sheets (CSS)


Cascading Style Sheets (CSS) is a language used to describe the presentation of HTML documents by formatting font, color, margins, borders, height/width dimensions, background images, advanced positioning and many other styles. With CSS you have flexibility and control over the exact appearance of a page.


HTML was created to define the content of a web page, and it was never intended to format or style a web page. When tags like <font> were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process. To solve this problem, the World Wide Web Consortium (W3C) created CSS. In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file. All browsers support CSS today.


CSS styles are usually saved in an external sheet and are linked to HTML pages. The term cascading refers to ability of applying multiple styles to the same element or a web page and prioritizing these styles. CSS can also allow a web page to be presented in different styles for different rendering methods. For better understanding go to:


Click where it says “download the sample html file” to see the plain HTML page without any styling then on the right side navigation bar click any of the links to see different presentations of this page formatted by various CSS style sheets. As you can see there are unlimited ways to style a simple web page using CSS without coding the page itself.



CSS Syntax


CSS declarations always end with a semi-colon, and declaration groups are surrounded by curly brackets. Do not leave spaces between the property value and the units! "margin-left:20 px" (instead of "margin-left:20px") will work in IE, but not in Firefox or Opera.


selector {property:value;}



selector: A direct relationship with the HTML tag
property: The CSS element you wish to manipulate
value: The value of the specified property



Example: p {color: #ff0000; text-align: center;}


To make the CSS more readable, put each declaration in a separate line:

p {
color: #ff0000;
text-align: center;





Buy "Digest Web Design" PDF Book


All the information on this website is also provided in a PDF book for only $30.
Click here to buy.



<<    Previous Page                                                                    Next Page    >>