CSS Fundamentals

Style Sheets, Selectors, Attributes, Conflict Resolution, CSS Validation

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.

An HTML page with four different styles: http://www.w3schools.com/css/demo_default.htm

For more details on the basics of CSS, please click on the following link.

CSS introduction: http://www.w3schools.com/css/css_intro.asp

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.

Three types of style sheets: http://www.w3schools.com/css/css_howto.asp

In Class Exercise In Class Exercise 1

  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/
  2. 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":
    1. change the color of the h1 tag to purple using an inline style sheet
    2. change the color of all the h2 tags to orange using an internal style sheet
    3. 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.

CSS syntax: http://www.w3schools.com/css/css_syntax.asp

CSS selectors: http://www.w3schools.com/css/css_selectors.asp

In Class Exercise 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.

  1. Use an element selector to format all the level two headers with "Times New Roman" font.
  2. 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".
  3. 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.

Topic w3schools Link Brief Description
Text http://www.w3schools.com/css/css_text.asp color, alignment, decoration (i.e. underlining or strike through), and indentation
Font http://www.w3schools.com/css/css_font.asp font-family, style (i.e. italics), and size
Border http://www.w3schools.com/css/css_border.asp style (i.e. dotted or dashed), width, and color
Align http://www.w3schools.com/css/css_align.asp centering and left/right aligning block elements
Floating http://www.w3schools.com/css/css_float.asp pushing elements left and right (useful for images and layouts)
Lists http://www.w3schools.com/css/css_list.asp defining the type of list item marker (type of dot or number), and specifying an image as the list item marker
Table http://www.w3schools.com/css/css_table.asp borders, width and height, text alignment, padding, and background and text colors
Box Model http://www.w3schools.com/css/css_boxmodel.asp consisting of: margins, borders, padding, and the actual content (useful for design and layout)
Margin http://www.w3schools.com/css/css_margin.asp setting margins on the top, bottom, left, and right. The margin does not have a background color
Padding http://www.w3schools.com/css/css_padding.asp setting padding on the top, bottom, left and right. The color of the padding is the background color of the element
Pseudo-class http://www.w3schools.com/css/css_pseudo_classes.asp changing attributes of links that are unvisited, "active", "hover", and "visited". Several additional selectors are in a table
Links http://www.w3schools.com/css/css_link.asp "link", "active", "hover", and "visited" links with different text and background colors and underlining
CSS Combinators http://www.w3schools.com/css/css_combinators.asp selectors for descendants, children, and siblings

In Class Exercise In Class Exercise 3

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

  1. Use upper-roman list item markers for the ordered list.
  2. Use square list item markers for the unordered list.
  3. Add borders to the table.
  4. Use a pseudo-class to change the background color of the links when you hover over them.
  5. Center align all text in the table.
  6. 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.

Conflict Resolution: http://www.w3schools.com/css/css_howto.asp (see the last section)

In Class Exercise In Class Exercise 4

Using the idea from w3schools: http://www.w3schools.com/css/tryit.asp?filename=trycss_howto_cascade

  1. Add a rule in the "mystyle.css" to make the h1 navy
  2. Add a rule to the internal style sheet (in "test_style.html") to make the h1 orange
  3. Keep the the inline style that specifies that the h1 tag is purple.
  4. When you display the web page, what colour is the top level heading?
  5. 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.
  6. 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.

W3C CSS Validation Service: http://jigsaw.w3.org/css-validator/

In Class Exercise In Class Exercise 5

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

In Class Exercise 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.