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 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:51, 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

HTML with CSS

XHTML with CSS

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: <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
 para {padding: 5px;}
color
value hexa or color name
text color
 #menu {color:#000000;}

body {color:blue;}

background
background color
 section, h2 {background:blue;}
Some complete examples
Simple page

XML: simple-page.xml 

 <?xml version="1.0" ?>
 <?xml-stylesheet href="simple-page.css" type="text/css"?>
 <page updated="jan 2007">
  <title>Hello friend</title>
  <content> Here is some content  </content> 
  <content> Here is some more content :) </content> 
  <comment> Written by DKS/Tecfa </comment>
 </page>

CSS: simple-page.css 

 /* Definitions that apply to the whole hierarchy */
 page { '''font-family:Times; line-height:1.5;'''}
 /* Margins for the box of the root element */
 page { '''margin-top:3cm; margin-left:3cm; margin-right:3cm;''' }

 /* Block elements */

 title, content, comment { '''display:block;''' }

 title { '''font-family: Arial; font-size:1.5em;'''}
 content { }
 comment { '''font-style:italic;''' }
Simple list

simple-list.xml 

 <?xml version="1.0" ?>
 <?xml-stylesheet href="simple-list.css" type="text/css"?>
 <page updated="jan 2007">
  <title>Hello friend</title>
  '''<list>'''
    '''<item> Here is an item that will be somewhat longer. Here is an item that will be somewhat longer. </item> '''
    '''<item> Here is item B</item> '''
    '''<item> Here is a C item </item> '''
  '''</list>'''
  <comment> Written by DKS/Tecfa , jan 2007 </comment>
 </page>

simple-list.css 

 /* Definitions that apply to the whole heirarchy */
 page { font-family:Times; line-height:1.5;}
 page { margin-top:3cm; margin-left:3cm; margin-right:3cm; }
 title, list, comment { display:block; }

 title { font-family: Arial; font-size:1.5em;}
 '''item {display:list-item; list-style-position:outside; '''
       '''list-style-type: disc; }'''
 comment { font-style:italic; }
Positioning
By default elements of an XML (or HTML) file are displayed in sequential order
It is possible to put an element wherever you wish
Positioning is not easy (avoid if you are new to CSS)
Simple absolute positioning

XML: simple-positioning.xml 

<?xml version="1.0" ?>
<?xml-stylesheet href="simple-positioning.css" type="text/css"?>
<page updated="jan 2007">
 <title>Hello friend</title>
 <hotstuff>
   <item> Here is an item that will be somewhat longer. Here is an item that will be somewhat longer. </item> 
   <item> Here is item B</item> 
   <item> Here is a C item </item> 
 </hotstuff>
 <content> 
  <para> Here is some standard content. Here is some standard content. Here is some standard content. Here is some standard content. Here is some standard content. Here is some standard content. Here is some standard content. Here is some standard content. </para>
 <comment> Written by DKS/Tecfa , jan 2007 </comment>
 </content>
</page>

CSS: simple-positioning.css 

/* Definitions that apply to the whole heirarchy */
page { font-family:Times; line-height:1.5;}

/* Margins for the box of the root element */
page { margin-top:3cm; margin-left:3cm; margin-right:3cm; }

/* Block elements */

title, hotstuff, content, comment { display:block; }

title { font-family: Arial; font-size:1.5em;}
content { position: absolute; left: 0; width: 60% }
hotstuff { position: absolute;
       right: 0;
       width: 20%;
       font: 10px/14px verdana, sans-serif;
       color: white;
       margin: 5px 5px 5px 5px;
       padding: 1cm;
       background-color: black; }

item {display:list-item; list-style-position:outside; list-style-type: disc; }
comment { font-style:italic; }
Data-centric XML with CSS

CSS isn’t made for data-centric XML:

There is no data transformation (e.g. to add extra text)
There is no easy way to display attribute values.

... but there are a few tricks for CSS 2 browsers, .e.g use the content or table properties (not implemented in IE 6/7 !)

The CSS "content" property
Allows to deal somewhat with data-centric XML (not implemented in IE 6/7)
Content property example

XML: simple-content.xml 

<?xml version="1.0" ?>
<?xml-stylesheet href="simple-content.css" type="text/css"?>
<page updated="jan 2007">
 <title>Hello friend</title>
 <list>
   <item price="10"> White plate </item> 
   <item price="20"> Gold plate </item> 
   <item price="15"> Silver plate </item> 
 </list>
 <comment> Written by DKS/Tecfa , jan 2007 </comment>
</page>

CSS: simple-content.css 

/* Definitions that apply to the whole heirarchy */
page { font-family:Times; font-size:14pt; line-height:1.5;}

/* Margins for the box of the root element */
page { margin-top:2cm; margin-left:2cm; margin-right:2cm; }

/* Block elements */

title, list, comment { display:block; }
title { font-family: Arial; font-size:1.5em;}

list:before { content:"Products on sale:"; font-size:1.2em; }
item        { display:block; }
item:after  { content:" - Price: " attr(price) " CHF";}

comment { font-style:italic; }

The :before and :after selectors

can be used to add contents before or after element contents (doesn’t work with IE6/7).

The content property:

can access attribute values: attr(attribute_name)
can add extra information strings.
Use XHTML tags to display pictures
Pictures inserted into XML can be used to convey extra information to the reader
I strongly discourage this, since that way data isn’t anymore separated from styling
rather wait for XSLT !!!

XML: simple-content-htmlns.xml 

<?xml version="1.0" ?>
<?xml-stylesheet href="simple-content-htmlns.css" type="text/css"?>
<page xmlns:html="http://www.w3.org/1999/xhtml" updated="jan 2007">
 <title>Hello friend</title>
 <list>
   <html:img src="photo.jpg"/>
   <item price="10"> White plate </item> 
   <item price="20"> Gold plate </item> 
   <item price="15"> Silver plate </item> 
 </list>
 <comment> Written by DKS/Tecfa , jan 2007 </comment>
</page>

CSS: simple-content-htmlns.css

same as simple-content.css
Some advice
First operations when writing a CSS for XML
Use the root element to define margins, default font, etc.
Decide which elements are blocks and which ones are inline
Identify "special elements" like titles and lists

Some example CSS rules 

/* title and para elements are blocks. They have an extra margin */
title, para {display: block; margin: 0.5em;}
/* title element font is 1.5 as big */
title {font-size: 1.5em;}
/* item elements are list elements, we use bullet style */
item {display: list-item;list-style-type: disc;}
/* strong is an inline element. Uses italic style and blue color */
strong {display: inline; font-style: italic; color: rgb(000,000,128);}
All example XML and CSS files can be found in the "example-css" directory(you may try to play with these a bit before doing your own project)

If your stylesheet doesn’t display as it should

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

Typical mistakes:

Missing punctuations in property declaration (":" or ";" or ",")
misspelled property names or values ???
missing brace { .... ???
Check spelling of element names, the on-line CSS validator will not detect this !
Check compatibility of your browser or at least check with Firefox or IE8
Remember that most properties are inherited from parent elements. You may have to change a property value in a child.
Do not use the "class" HTML shortcut for XML

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=23243"