CSS tutorial

This article or section is currently under construction

In principle, someone is working on it and there should be a better version in a not so distant future.
If you want to modify this page, please discuss it with the person working on it (see the "history")

Draft

<pageby nominor="false" comments="false"/>

Introduction

Learning goals

• Understand the structure of cascading stylesheet (CSS) rules
• Learn how to include CSS in HTML files and/or how to associate a CSS file with HTML
• Learn how to use CSS with your own XML tags

Prerequisites

Moving on

Level and target population

Remarks

• THIS WORK IN PROGRESS. I just imported some "text" from teaching slides and now will have to work ... - Daniel K. Schneider 18:48, 7 September 2009 (UTC).

The executive summary

A CSS Style sheet is set of rules that describe how to render (X)HTML or XML elements.

Each rule has two parts:

• The selector: defines to which elements a rule applies
• The declaration: defines rendering, i.e. defines values for style properties

• A simple HTML example

 H1 { color: red }
 P  { font-face: Verdana, sans-serif ; font-size: 12pt}
 H1, H2, H3 { color : blue }
 H1.ChapterTOC, H2.PeriodeTOC, H2.ExerciceTOC, H2.SectionTOC  {
         display: block;text-indent: 30pt;    
         text-align: left; font-size: 14.000000pt;
         font-weight: Bold;     font-family: "Times";
      }

Cascading Style Sheets principles

Purpose of CSS and status of CSS 2 implementation

• Rendering of HTML and (text-centric) XML contents
• Support for Dynamic HTML, dynamic SVG etc. (in particular: appear/disappear, move, etc.)

Advantages

• Separation of content and style: makes web sites easier to maintain
• Multiple rendering: adaptation to media and people (screen size, font size, print, etc.)
• The modern way to define HTML styles (including positioning of elements in the page
• An easy way to render contents of text-centric XML

Disadvantages

• lack of text-transformation in CSS1/CSS2 makes CSS rather unsuitable for data-centric XML or long HTML "articles" (e.g. you can't automatically create a table of contents).
• Implementation of CSS 2 was bad in IE 6 / 7. In particular, the content property was missing. It is needed to display attribute values and/or add extra text to output. CSS 2 support is fine in IE8.

Implementation

CSS 1 (1996): ok in Firefox/Opera, more or less ok in IE 6

CSS 2 (1998): more or less ok in Firefox 2.x/Opera, good in Firefox 3.x, not too good in IE 6/7, good in IE8

CSS 3 (under construction)

Hint: Use browser compatibility tables when you plan for a larger audience

Syntax of CSS declarations

Style sheet = set of rules that describe how to render XML or HTML elements

Each rule has two parts:

The selector: defines to which elements a rule applies

The declaration: defines rendering, i.e. values of CSS properties

A simple HTML example

H1 { color: red }
P  { font-face: Verdana, sans-serif ; font-size: 12pt}
H1, H2, H3 { color : blue }
H1.ChapterTOC, H2.PeriodeTOC, H2.ExerciceTOC, H2.SectionTOC  {
        display: block;text-indent: 30pt;    
        text-align: left; font-size: 14.000000pt;
        font-weight: Bold;     font-family: "Times";
     }

CSS selectors and declarations

Associating styles with HTML and XML

XML with CSS

Association of a style sheet

CSS stylesheets are associated with the following processing instruction. Please note that this is different from HTML !

<?xml-stylesheet type="text/css" href="some_name.css"?>

Example:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet href="stepbystep.css" type="text/css"?>
<!DOCTYPE Stepbystep SYSTEM "stepbystep-ex.dtd">

<Stepbystep xmlns:xlink="http://www.w3.org/1999/xlink">
   <Doctitle>Instructions </Doctitle>
 .....
</Stepbystep>

CSS 2 selectors

A selector defines to what element a property will apply.

CSS 2 selectors work for HTML, XHTML and any text-centric XML (XML needs a navigator that supports at least partically CSS2)

'selection of an element (mostly you will use this)'

element

example:

Step {
   display: list-item;
   list-style-type: decimal;
}

'selection of a child element'

mother_element > child_element

Example:

Step > Title { .... }

'selection of descendant element (child, great-child, etc.)'

mother_element element

Example:

Step Title { .... }

'combinations'

example:

DIV OL>LI P

selection siblings (elements next to each other sharing the same parent)

sister_element + sister_element

example:

H1 + H2 { margin-top: -5mm }

selection of an element that has a certain attribute

element[attribute]

example:

Title[status] { color: blue; }

(all titles that have a status attribute are rendered in blue )

selection of an element that has an attribute with a given value

element[attribute="value"]

example:

Title[status="draft"] { color: red; }

selection of an element that has an attribute with a given value in a comma-sep. list

Title[status~="draft"] { color: blue; }

Cascading and inheritance

Rule ordering

(Roughly speaking): the last rule found will win.

E.g. if you define text color in more than one place, the color: property found in the last rule encountered will be used

Inheritance of properties from parents

Child elements usually inherit properties from the parent elements !!!

If you don’t like this you have to change explicitly these properties

Inheritance of properties

XML

  <title>Here is a title</title> 
  <para>Here is a paragraph> 

CSS

section {font-family:Arial}
title {font-familiy:Helvetica}
/* para will inherit font-family from section, i.e. Arial */

Summary of CSS2 selectors

Pattern	Meaning
*	Matches any element.
E	Matches any E element (i.e., an element of type E).
E F	Matches any F element that is a descendant of an E element.
E > F	Matches any F element that is a child of an element E.
E:first-child	Matches element E when E is the first child of its parent.
E:link E:visited	Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited).
E:active E:hover E:focus	Matches E during certain user actions.
E + F	Matches any F element immediately preceded by an element E.
E[foo]	Matches any E element with the "foo" attribute set (whatever the value).
E[foo="warning"]	Matches any E element whose "foo" attribute value is exactly equal to "warning".
E[foo~="warning"]	Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning".
="en"]	Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en".
DIV.warning	HTML only. The same as DIV[class~="warning"].
E#myid	Matches any E element ID equal to "myid".

CSS properties

Syntax of CSS property definitions

property:value;

property:value,alternative_value1,alternative_value2,...;

Most important typographic element types:

(1) Blocks, i.e. elements that should start a new paragraph

HTML examples:

,