CSS Cheat Sheet What is CSS? • • • • • • • CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles are normally stored in Style Sheets Styles were added to HTML 4.0 to solve problems External Style Sheets can save you a lot of work External Style Sheets are stored in CSS files Multiple style definitions will cascade into one [1] h1,h2,h3 { font-family: veranda, arial, ‘sans serif’; } p,table, li { font-family: veranda, arial, ‘sans serif’; margin-left: 10pt; } Code Example 1 CSS Solves Style Problems HTML tags were originally designed to define the content of a document. They were supposed to say "This is a header", "This is a paragraph", "This is a table", by using tags like

,

,

, and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags [1]. As Netscape and Internet Explorer continue to add new HTML tags and attributes (like the tag and the color attribute) to the original HTML specification, it became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the document's presentation layout [1]. HTML Tags

Make a new paragraph

Make a table

Make a List of items To solve this problem, the World Wide Web Consortium (W3C) - A non profit, standard setting consortium, responsible for standardizing HTML - created STYLES in addition to HTML 4.0 [1]. The Code Example 1 shows that you can change the header tags in HTML to always have a consistent font family attribute. This font family is set to veranda, arial, and sans serif. You may list as many tags as you would like before declaring what attributes are tied to the tags. The second part of the listing shows the tags

,

and

all have the set font family and a margin to the left. Save Yourself Time Style sheets do the same as the font and color tag attributes. Style sheets are the new standard that HTML should be using. By using CSS you can easily change the look and style of your entire website by just changing a few lines in the CSS. If CSS were not used, in order to change the look of your website you would have to go through all the HTML code and change every place where fonts, colors, or any other formatting edits are found. CSS is powerful when developing websites because you can control the style and layout of multiple pages all at once. Another powerful use of CSS is that you can use them internally and externally to a website. Internal CSS can be used internally in an HTML document. Code Example 2 shows the use of CSS internally. External CSS can also be used externally in a HTML document. Code Example 3 shows the use of CSS externally. How Cascading Style Sheets Work If you declare more than one style for an eleCode Example 2 ment then CSS applies its precedence procedure for the styles. The order of precedence for CSS is: 2. External Style Sheet 3. Internal Style Sheet (inside the tag) Code Example 3 4. Inline Style (inside an HTML element) The Inline Style has the highest precedence so the style declared will override any of the other styles that may or may not be defined.

This is a paragraph.

This is a paragraph.

This is a paragraph.

a	b
c	d

Code Example 4 Figure 1 [1] W3Schools, HTML Basic, “HTML Forms,” 2006. [Online]. Available: http:// www.w3schools.com/html/html_forms. asp [Accessed: Nov. 6, 2006]. [2] Web Design Group, “CSS Structure and Rules,” 2006. [Online]. Available: http:// www.htmlhelp.com/reference/css/ structure.html [Accessed: Nov. 6, 2006].