DIGI 220 - CSS Foundations: Rules & The Cascade

VIU Media Studies Department - Robin Davies

Lecture Overview

  • Intro to Cascading Style Sheets (CSS)
    • Rules
    • Syntax
    • Comments
  • Organizing Your CSS
  • The Cascade

Cascading Style Sheets

  • Cascading Style Sheets are commonly known as CSS
  • CSS allows us to separate presentation (style) from the semantic structure (meaning) represented by our HTML elements
    HTML
    structure
    CSS
    presentation
  • A style sheet is a simple text file that contains one or more rules which control how XML elements should be presented
  • For this class we will work with CSS 2 and CSS 3, which are well-supported by most browsers (current standards are available here)

Why CSS?

  • One of the foundational concepts of the Semantic Web is the seperation of structure from presentation
  • This allows the same HTML document to be presented in different contexts/situations:
    • Mobile Phone
    • Aural reader
    • Web Browser
    • Print
  • Each presentation context can have its own style sheet
  • CSS allows a single CSS document to provide styles for an entire website of HTML pages
  • In this lecture we will only talk about visual styling for Web Browsers

CSS Style Rules

  • To implement CSS, we create what are called style rules, or simply rules
  • Each rule controls the presentation of one or more HTML elements (e.g. a particular p element or all h1 elements)
  • All CSS rules consist of two main parts:
    Selector
    determines which elements are affected by the rule
    Declaration
    specifies what effects are applied
  • Declarations are made up of one or more property/value pairs

Rule Structure and Syntax

p {color:red; font-size:12px;}

Selector
Determines which elements are affected by the rule (p in this case)
Declaration
Specifies what effects are applied (color and font-size in this case)
Curly braces
Enclose the declaration block
A Semicolon
Terminates each property/value pair within the declaration; missing or duplicate semicolons can break the entire rule

Rule Format

Many coders use the following format for CSS rules:

p {
	color: #F00;
	font-size: 12em;
	font-style: italic;
}
  • You can add extra spaces, tabs and line breaks between the parts of the rule to increase readability - some text editors might do this kind of thing for you
  • Clean and clear formatting of your CSS, like your HTML, is essential!

CSS Comments

CSS comments use this form:

 /* comment goes here */ 
  • Comments can span multiple lines
  • Comments can be used to turn styles on and off, which is very useful in testing
  • You can start comments on their own line, or after the end of a rule
  • As with other comments, don't translate the code, instead comment on the (intended) purpose of the code

Organizing CSS

Since CSS is designed to separate presentation and structure, it is not surprising that CSS can be completely separated from HTML

There are three possible locations for CSS information:

Inline
goes right inside an element's opening tag
Document Level
goes inside the style element in the head element of an HTML document
External
goes in a seperate document which is linked to the HTML file

Inline Styles

Inline styles are created using the style attribute for an HTML element

<h1 style="color: blue; font-style: italic;">
	Forest elephants
</h1> 

Inline styles are useful for quick styling/fixes (blog posts, for example) or single pages, but are not recommended for large production work (such as entire sites)

Document Level Styles

Document level Styles go inside the style element, inside the HTML head element

<style type="text/css">
	p {
		color:red;
		font-size: 12em;
		font-style: italic;
	}
</style>

These are useful for quick styling or single pages, but are not normally used for large productions. (Note the MIME type for the CSS content!)

External Style Sheets

  • External Style Sheets are text files which contain (sometimes many) style rules
  • Can be given any name with the .css extension
  • Extremely powerful, as a single external style sheet can be linked (or imported) to multiple HTML documents, styling an entire site
  • As with HTML files, be sure you save your style sheets as plain text
  • While you can have CSS inside an HTML file, you cannot have HTML inside a CSS file

Linking External Style Sheets

Linking external style sheets is very easy. Simply include a link element in your head element:

<link rel="stylesheet" type="text/css" 
href="mystyles.css" /> 

You can link to mulitiple style sheets, but remember that later sheets take precendence over earlier sheets.

You may wish to add generic CSS linking code such as this to your HTML template.

The Cascade

  • The C in CSS stand for cascading
  • The cascade controls how rules are applied if multiple rules are present for an element
  • The cascade uses three principles to make this decision:
    • inheritance
    • specificity
    • location

Cascade - Inheritence

  • Many CSS rules affect not only the element in question, but any descendent of that element as well
  • Suppose you have a li element to which you apply a rule giving it a yellow colour and a blue border
  • The color property inherits, so any elements inside that li will inherit the color property value (yellow)
  • However, the border property does not inherit, so elements inside your div will not get a blue border
  • How can inheritance be used to save time writing CSS?

Cascade - Specificity I

  • Inheritence works if only a single rule applies to an element
  • If two rules apply to the same element, specificity is invoked to resolve the conflict
  • If a rule is more specific, it has greater weight

So, if we have a rule that says all p elements should have a colour of blue, and a second rule that says all p elements with a class of important be red, then the second rule will override the first for elements whose class is important

Cascade - Specificity II

CSS
p {
   color: blue;
}

.important {
   color: red;
}
HTML
<p>This is just a regular paragraph. </p>
<p class="important">But this is important! </p>

Cascade - Specificity III

  • Here is a simplified hierarchy for specificity:
    • id attribute rules - greatest specificity
    • class attribute rules
    • element rules
    • inherited rules - least specificity

This is a simplified list; full specificity rules are on the W3.org website

Cascade - Location

  • If specificity does not resolve the conflict, the final part of the cascade is location
  • Rules that appear later have greater weight
  • Inline rules appear after document level rules, and therefore have greater weight than document level rules
  • Likewise, document level rules appear after external rules, and therefore have greater weight than equally specific external rules

Cascade Summary

To summarize:

  • In the absence of any other rule, many properties are inherited by descendent elements from parent elements
  • If two rules compete, the more specific rule - regardless of its location - wins
  • If two rules are of equal specificity, the one that appears later - is closer to the actual element - wins