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 lab Exercise 1

  1. Copy the HTML5 page: "test_style.html" into your public_html directory using the following command:
    cp -p /net/data/ftp/pub/class/215/basic_css/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

In Class Exercise In Lab 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 "evenRow" that defines a background color for the even rows in the table. In "test_style.html", make every even row a member of this class by adding to the tr tag with the following syntax: <tr class="evenRow"> 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)
List 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 Lab Exercise 3

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

  1. Use upper-roman list item markers for the ordered list.
  2. Add borders to the table.
  3. Use a pseudo-class to change the background color of the links when you hover over them.
  4. Center align all text in the table.

Cascading Order

Generally speaking, inline has the highest priority.

  1. Inline style (inside an HTML element)
  2. External and internal style sheets (in the head section)
  3. Browser default

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/

You need you validate your "mystyle.css".

In Class Exercise Lab Assignment

Zip index.html and your external .css file into username.zip.

Upload the zipped file to URcourses before 11:55 PM today.

Format your home page, 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. Your lab assignment is due 11:55PM today.