CSS tutorial

The educational technology and digital learning wiki
Jump to navigation Jump to search

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
Moving on
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

HTML with CSS

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
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/
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=CSS_tutorial&oldid=23251"