CSS Fundamentals

An Introduction to Cascading Style Sheets

CSS stands for Cascading Style Sheets. The purpose of using CSS is to separate the web content from the style/format. That is, HTML focuses on the content of the document, while CSS focuses on the format and appearance of the document. Style sheets can save a lot of work. The benefit of using CSS is demonstrated in the following example.

Style Sheets (Where to Write CSS)

You can write CSS in three different places. First, inside an HTML document, called an inline style sheet; second, inside the head section of an HTML page, called an internal style sheet; third, in an external ".css" file, called an external style sheet. A combination of multiple styles is possible. This is because all styles will be cascaded into a new "virtual" style sheet.

In Class Exercise 1

Copy the HTML5 page: "test_style.html" into your public_html directory using the following command: cp /net/data/ftp/pub/class/215/basic_html/test_style.html ~/public_html/

Currently, there is only one inline style in this page, you will test out the three different types of style sheets on "test_style.html":

change the color of the h1 tag to purple using an inline style sheet

change the color of all the h2 tags to orange using an internal style sheet

change the background color of the body to linen using an external style sheet. You will have to create a "mystyle.css" file to do this.

CSS Syntax and Selectors (How to Write CSS)

CSS code consists of a collection of rule sets. Each rule set has two components: that is, a selector that specifies the object to which the CSS rules applies and a declaration block that is a set of attribute-value pairs. For applying styles to a specific type of HTML element, for example, all <p>...</p> tags, you can use element selectors (i.e. p{attribute:value;}); for applying styles to a specific HTML element, you can assign a unique id attribute to the HTML element and use an id selector (i.e. #myid{attribute:value;}); and for applying styles to a set of HTML elements, you can use a class selector (i.e. .special{attribute:value;}). The following links provide details.

In Class Exercise 2

Try the three different selectors on "test_style.html" and "mystyle.css". All rule sets should be implemented in the external style sheet.

Use an element selector to format all the level two headers with "Times New Roman" font.

Use an id selector to replace the inline style used in "test_style.html" to format the paragraph that reads: "This is a local style".

Use a class selector called "oddRow" that defines a background color for the odd rows in the table. In "test_style.html", make every odd row a member of this class by adding to the tr tag with the following syntax: <tr class="oddRow"> syntax.

Learning CSS Attributes

An important task of this lab is to learn some common CSS attributes from examples at w3schools. The following table provides links and a brief description of some of the attributes.

In Class Exercise 3

Add some additional style to the content in "test_style.html" using the eternal style sheet "mystyle.css".

Use upper-roman list item markers for the ordered list.

Use square list item markers for the unordered list.

Add borders to the table.

Use a pseudo-class to change the background color of the links when you hover over them.

Center align all text in the table.

Center align the h1 tag (use the margin attribute).

Conflict Resolution in Multiple Style Sheets

As mentioned earlier, you can write multiple style sheets for an HTML document because all the style sheets will eventually be cascaded into a new "virtual" one. You may use different values for the same CSS attribute of an HTML element in different style sheets; however, this leads to conflicts in the "virtual" style sheet. You need to make sure the final value of a CSS attribute is the one you expected.

In Class Exercise 4

Add a rule to the internal style sheet (in "test_style.html") to make the h1 orange

Keep the the inline style that specifies that the h1 tag is purple.

When you display the web page, what colour is the top level heading?

Gradually comment out the styles on the h1 tag starting with the inline style, then the internal style and lastly, the external style sheet. The purpose of this step is to understand the priority of the different style sheets.

Try moving the "link" to the external style sheet after the definition of internal style sheet. The purpose of this experiment is to discover the order to which the browsers apply cascading styles (although, there are priorities for different style sheets).

CSS Validation

You will validate your CSS using the W3C validation service. In the same way that you validate HTML, you provide the url to the CSS page or to the HTML page that uses the CSS. The following link provides details.

In Class Exercise 5

In this exercise, you need you validate your "mystyle.css".

Lab Assignment

Format your homepage, i.e., "index.html" using an external CSS. Your marks will depend on the overall look of the resulting page. The CSS code must pass W3C validation; marks will be deducted if your CSS code does not pass validation.