Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) allow authors to control the presentation of their documents

they apply typographic styles and layout instructions to elements on a page

cascading refers to

the fact that styles cascade down the document tree, and
what happens when several different sources of style information are provided

a style is simply a rule that tells the browser how to render a particular element

a rule associates values with one or more properties of an element

for example, most elements have a color property

a stylesheet is a collection of rules

Embedded Style Sheets

use a <style> element within the <head> element of a document

<head>
  <style type="text/css">
    h1 { background: yellow; color: purple; }
  </style>
...
</head>

the type attribute defines the type of style being included (strictly the MIME type)

cascading style sheets are of type text/css

in this example,

h1 is called the selector
the curly brace-delimited text is called the declaration
background and color are properties
yellow and purple are values

all h1 headings will have purple text on a yellow background:

An h1 heading

External Style Sheets

specified by a <link> element within the <head> element of a document

an external style sheet is a separate file that can be re-used to apply the same style to numerous documents

e.g., the notes.html files for this module contain the following

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

the rel attribute specifies the relationship between the document and the file referred to, i.e., notes.css in the parent directory

note that the external style sheet can be located anywhere on the web

the syntax used in external style sheets is the same as for embedded style sheets (without the style tags)

Multiple Selectors

a selector can comprise a list of elements separated by commas

all elements in the list have the same property style values applied to them:

h1, h2, h3, h4, h5, h6 {
        background: yellow;
        color: purple;
        text-align: center;
}

all headings will have purple text on a yellow background and be centred horizontally:

An h1 heading

An h3 heading

Contextual Selectors

element names separated by white space constitute a contextual selector:

ol li       { list-style: decimal; }
ol ol li    { list-style: lower-alpha; }
ol ol ol li { list-style: lower-roman; }

with these styles

the first-level list items of an ordered list are numbered in decimal
the second-level list items are numbered with lower-case letters
the third-level list items are numbered with lower-case roman numerals

if there is ambiguity between two contextual styles, the more specific context wins:

em    { color: red; }
ul em { color: blue; }

in this example

emphasised text will be coloured red
but emphasised text within an unordered list will be coloured blue

note that in a selector such as ul em, the em element can occur as a descendant of the ul element

Styles based on class and id attributes

each HTML element can have a class and id attribute

often used with the div and span elements of (X)HTML for styling purposes

the value of an id attribute is meant to be unique within a document

for example, the following HTML

<p class="red">A red paragraph</p>
<p class="green">A green paragraph</p>
<p id="p123">A yellow paragraph</p>

may have the following style rules applied

.red   { color: red; }
.green { color: green; }
#p123  { color: yellow; }

where . is the class selector and # is the id selector

if we want the class style to apply only to paragraphs, we write

p.red   { color: red; }
p.green { color: green; }

Combining selectors

selectors can be combined with one another, e.g.:

pre span.keyword, code span.keyword { color: red; }

this specifies that

the contents of any span element
with a class attribute value of keyword
occurring inside a pre or code element

should be red

for example, the source for the above pre element is:

<pre>
pre span.keyword, code span.keyword { color: <span class="keyword">red</span>; }
</pre>

Further CSS selectors

Selector	Example	Selects ...
`.class`	`.keyword`	all elements with `class="keyword"`
`#id`	`#123`	the element with `id="123"`
`*`	`*`	all elements
`element`	`p`	all `p` elements
`element, element`	`div, p`	all `div` elements and all `p` elements
`element element`	`div p`	all `p` elements inside `div` elements
`element > element`	`div > p`	all `p` elements whose parent is a `div` element
`element ~ element`	`p ~ ul`	all `ul` elements having a `p` element as a preceding sibling
`[attribute]`	`[style]`	all elements with a `style` attribute
`[attribute = value]`	`[type="text/javascript"]`	all elements with `type="text/javascript"`
`[attribute ^= value]`	`a[href ^= "http"]`	all `a` elements whose href attribute value begins with `"http"`
`[attribute $= value]`	`a[href $= ".pdf"]`	all `a` elements whose href attribute value ends with `".pdf"`
`[attribute *= value]`	`a[href *= "bbk"]`	all `a` elements whose href attribute value contains `"bbk"`

Some other CSS properties

Property	Some values	Meaning
`font-size`	`large`, `24px`	`px` is pixels, also `cm`, ...
`font-family`	`arial`, `serif`, `sans-serif`	specific like `arial`, or generic like `serif`
`font-style`	`normal`, `italic`
`font-weight`	`normal`, `bold`
`display`	`block`, `inline`
`margin-top`	`1cm`, `2em`	`em` is the size of the letter m
`line-height`	`normal`, `2`	`2` is twice the current font size
`text-decoration`	`underline`, `line-through`
`list-style-type`	`circle`, `lower-alpha`	`circle` for `ul`, `lower-alpha` for `ol`

Links to more information

www.w3.org/Style/CSS/Overview.en.html
W3C's CSS home page
en.wikipedia.org/wiki/Cascading_Style_Sheets
Wikipedia's entry on CSS
www.w3schools.com/css/
w3schools CSS tutorial

Cascading Style Sheets

Cascading Style Sheets (CSS)

Embedded Style Sheets

An h1 heading

External Style Sheets

Multiple Selectors

An h1 heading

An h3 heading

Contextual Selectors

Styles based on class and id attributes

Combining selectors

Further CSS selectors

Some other CSS properties

Links to more information

Styles based on `class` and `id` attributes