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 seperating the Web content from the style/format. That is, HTML focuses on the content of a document, while CSS focuses on the format and appearce of the document. Style sheets can save a lot of work. You can tell the benefit of using CSS from the following example.

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

For more details, please find 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 inline style sheet; second, inside the head section of an HTML page, called internal style sheet; third, in an external ".css" file, called external style sheet. A combination of multiple styles is possible, because all styles eventually will be cascaded into a new "virtual" one.

Three Types of Style Sheets: http://www.w3schools.com/css/css_howto.asp

In Class Exercise In Class Exercise 1

  1. Create a "test_inline.html" file with a heading, i.e., a level one header <h1>...< ⁄ h1>. Format the heading with a blue text color by inline style sheet.
  2. Create a "test_internal.html" file with a heading, i.e., a level one header <h1>...< ⁄ h1>. Format the heading with a blue text color by internaryl style sheet.
  3. Create a "test_external.html" file with a heading, i.e., a level one header <h1>...< ⁄ h1>. Format the heading with a blue text color by external style sheet.

CSS Syntax and Selectors (How to Write CSS)

CSS code are collections of rules sets. Each rule set consists of 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; for applying styles to a specific HTML element, you can assign a unique id attribute to the HTML element and use the id selector;for applying styles to a set of HTML elements, you can use the class selector. The following links provide the detail.

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

  1. Create a "test_selectors.html" page consists of a level one heading as document title, seven paragraphs with contents and two level two headers as section titles.
  2. Use element selectors to format all the level two headers with blue color and "Times New Roman".
  3. Use id selector to format one paragraph with a border (1px, solid or dashed line, silver color).
  4. Use class selecotr to format the remaining HTML elements with right alignment.

Learning CSS Attributes

An important task of this lab class is learning commonly used CSS attributes with examples from the W3schools website. The following links provide the detail.

Text: http://www.w3schools.com/css/css_text.asp

Fonts: http://www.w3schools.com/css/css_font.asp

Border: http://www.w3schools.com/css/css_border.asp

Align: http://www.w3schools.com/css/css_align.asp

Floating: http://www.w3schools.com/css/css_float.asp

Lists: http://www.w3schools.com/css/css_list.asp

Table: http://www.w3schools.com/css/css_table.asp

Box Model: http://www.w3schools.com/css/css_boxmodel.asp

Margin: http://www.w3schools.com/css/css_margin.asp

Padding: http://www.w3schools.com/css/css_padding.asp

Pseudo-class: http://www.w3schools.com/css/css_pseudo_classes.asp

Links: http://www.w3schools.com/css/css_link.asp

CSS Combinators: http://www.w3schools.com/css/css_combinators.asp

In Class Exercise In Class Exercise 3

  1. Creat a "test_table.html" page with a 7x5 (7 rows and 5 columns) HTML table.
  2. Use external style sheet to format the table with a format as in the following figure.
    a nice formatted HTML table
  3. Use a pseudo-class, i.e., hovering, to change the color of each even row of the table.
  4. Let the table only occupy "50%" width of the current page.
  5. Center align all texts in the table.
  6. Use margin attribute to center align the whole table into the center of the web page.

Conflict Resolution in Multiple Style Sheets

As mentioned earlier, you can write multiple style sheets for an HTML document because all types of 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, it leads to conflicts in the "virtual" style sheet. As a CSS developer, 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

  1. Copy the example in the w3schools.com:
  2. Create a "test_css.html" page on Hercules.
  3. Create an external css file, "mystyle.css", which contains the following style:
    body {
      background-color: lightblue;
  4. Follow the instructions from the w3schools.com example, i.e., gradual remove styles from the inline style, internal style and the external style. The purpose of this step is understanding the priority of different style sheets.
  5. Try referring the external style sheet after the definition of internal style sheet. The purpose of this experiment is discovering the order by which the Internet browsers applying/cascading styles (although there are priorities of different style sheets).

CSS Validation

You must validate CSS by using W3C validation services as you do for the HTML. Similarly, you need to provide the url of your HTML page that using the CSS. The following link provides the detail.

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

In Class Exercise In Class Exercise 5

  1. Validate all CSS in exercises 1 to 4.

In Class Exercise Lab Assignment

Format your homepage, i.e., "index.html", by using external css. Your marks depend on the overall looking of the page. The CSS code must pass the W3C validation, failure to pass leads to deduction of partial marks.