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 style text elements

Prerequisites

• Basic HTML, e.g. the HTML and XHTML elements and attributes tutorial

Moving on

• CSS positioning tutorial
• CSS for XML tutorial

Level and target population

• Beginners

Remarks

• THIS WORK IN PROGRESS. I just imported some "text" from teaching slides and now will have to work ... - Daniel K. Schneider 18:56, 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";
      }

Usually these rules are defined in a separate files which then is associated with the HTML file. This way one can reuse one stylesheet for many different HTML pages.

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

XHTML with CSS

See also CSS for XML tutorial

CSS 2 selectors

A selector identifies the element(s) that we will style with properties.

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: <p>, <h2>, <div>

(2) Lists and list elements

 HTML example: <ul>, <ol>, <li>

(3) Inline elements

 HTML examples: <b>, <strong>, <span>

(4) Tables Of course, you also can decide to use absolute positioning to place elements ...

The Display attribute

By default, HTML will display an element as either a block, list element or inline. But you are free to change this.

Raw XML (e.g. your own) doesn't include any styling information. Therefore, the first operation when dealing with XML is to define the display property for each element

Examples that work with most browsers:

display: block;
display: inline;
display: list-item;

Comments

CSS Comments begin with the characters "/*" and end with the characters "*/". They may occur anywhere between tokens, and their contents have no influence on the rendering.

Comments may not be nested.

Example:

/* Paragraph elements */
para {display:block;} /* para elements are blocks */

Font properties

property	Typical values	explanation	example
font-family	font_name	Name of font	font-family: Helvetica;
	font_type	Generic name of font	font-family: serif;
font-size	pt, cm	size	font-size: 14pt;
font-style	normal	normal
	italic	italic	font-style: italic;
font-weight	number between 100 and 999	thickness	font-weight: 500;
	normal	value = 400	font-weight: normal;
	bold	value = 700	font-weight: bold;

Text alignment

property	values	explanation	example
text-align	left	Paragraph alignment	text-align: left;
	center		text-align: center;
	right		text-align: right;
	justify		text-align: justify;
text-indent	pt, cm	First line indent	text-indent: 1cm;
line-height	pt, cm	line height	line-height: 14pt;
	relative value	font-height * value	line-height: 1.2;

CSS Box structure

Each CSS element is a box

CSS selectors and declarations

There are properties for each of these components and for some properties, there are shortcuts

Borders, margins and colors properties (there are more)

property	values	explanation	example
margin	pt, px, cm, %	All 4 margins	body {margin:1cm;}
margin-top		on top	p {margin-top:10px;}
margin-bottom		below	h3 {margin-bottom:3pt;}
margin-left		to the left	img {margin-left:50px;}
margin-right		to the right	p.citation {margin-right:10pt;}
border	pt,px, cm, %	thickness	p {border:5px;}
border-top			h1 {border-top:0.2cm;}
border-style	solid	simple line	p {border-style:solid;}
	double	double line	h1 {border-style:double;}
padding	pt,px,cm,%,etc	padding size	p {padding: 5px;}
color	value hexa or color name	text color	#menu {color:#000000;} body {color:blue;}
background		background color	section, h2 {background:blue;}

If your stylesheet doesn’t display as it should

Validate your CSS (submit the CSS file): http://jigsaw.w3.org/css-validator/

Typical syntax mistakes (easy to detect)

• Missing punctuations in property declaration (":" or ";" or ",")
• misspelled property names
• missing brace { ....

Syntax mistakes that are hard to find:

• Check spelling of element names, the on-line CSS validator will not detect this !

Compatibility issues:

• Check compatibility of your browser or at least check with Firefox or IE8

Local issues:

• Remember that most properties are inherited from parent elements and that the last rule defined wins. I.e. the rule that will define what you get is not the one that you are looking at ...
• If you use several stylesheet files, make sure to load these in the right order

Resources on the web

See CSS links for tutorials and other interesting links. Here we just include a short selection

Standards

• http://www.w3.org/Style/CSS/ (CSS page of the W3C)
• http://www.w3.org/TR/REC-CSS2/ (CSS 2 specification)

Compatibility tables

http://www.quirksmode.org/css/contents.html (consult this for IE 6/7!)

CSS Validator (use it please !)

http://jigsaw.w3.org/css-validator/