eScience Lectures Notes : CSS

Slide 1 : 1/34 : CSS : Cascading Style Sheets (index.en.html)

COMP1710 Tools for New Media and Web

 

CSS : Cascading Style Sheets

Click here to start or press 's'tart or 'i',

then 'n'ext or 'b'ack

Click here for the 't'able of Content

Slide 2 : ToC : CSS (tableOfContent.en.html)

Table of Contents (34 slides) for the presentation :

CSS

Slide 3 : 3/34 : CSS : Cascading Style Sheets (intro.en.html)

In this lecture : CSS : Cascading Style Sheets

Why ?

Web pages should separate content from appearance.

The information in your web site should go into your HTML files, but HTML files should not contain information about how that information is displayed.

Managing Style at Large Sites

Easier change of Design

Adaptation to different Media (Web, Palm, print etc)

 

 

Slide 4 : 4/34 : CSS tutorial (1) (tutorial1.en.html)

The Target : A graphically different look for a clean HTML page

[Link to the final HTML page]

The resulting HTML page, with colours and layout, all done with CSS.

Source : http://www.w3.org/Style/Examples/011/firstcss










Slide 5 : 5/34 : CSS tutorial (1) (tutorial2.en.html)

The Target : The same page, without any style

[Link to the final HTML page]

 

Source : http://www.w3.org/Style/Examples/011/firstcss










Slide 6 : 6/34 : The Target : The same page, with a different stype (tutorial3.en.html)

The Target : The same page, with a different style

[Link to the final HTML page]

The resulting HTML page, with colors and layout, all done with CSS.

Source : http://www.w3.org/Style/Examples/011/firstcss










Slide 7 : 7/34 : Writing the HTML (tutorial4.en.html)

Writing the HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
 <head>
   <title>My first styled page</title>
 </head>
 <body>
   <!-- Site navigation menu -->
   <ul class="navbar">
     <li><a href="index.html">Home page</a></li>
     <li><a href="indexS.html.html">Without</a></li>
     <li><a href="indexD.html">Another</a></li>
     <li><a href="index.html">Back</a></li>
   </ul>
   <!-- Main content -->
   <h1>My first styled page</h1>
   <p>Welcome to my styled page!</p>
   <p>It lacks images, but at least it has style.
   And it has links too</p>
   <p> ... blah blah ... </p>
   <p>There should be more here, but I don't know
       what yet.</p>
   <!-- Sign and date the page, it's only polite! -->
   <address>Copied 30 July 2004,
       from Bert Bos<br>and modified by Pascal.</address>
 </body>
</html>

Source : http://www.w3.org/Style/Examples/011/firstcss

Slide 8 : 8/34 : Adding Style sheets within the header of the HTML file (tutorial5.en.html)

Adding Style sheets within the header of the HTML file

Not the clean way to do this, just for testing purpose

color : 16 standard names ('red'), rgb(255, 0, 0) or #ff0000

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
 <head>
   <title>My first styled page</title>
<style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d 
  }
</style> 
 </head>
 <body>
   ../..

Source : http://www.w3.org/Style/Examples/011/firstcss

Example

Slide 9 : 9/34 : Style sheets in CSS are made up of rules. (rules.en.html)

Style sheets in CSS are made up of rules. 

body { color: purple;
       background-color: #d8da3d }

Each rule has three parts:

the Selector (in the example: “body”)

tells the browser which part of the document is affected by the rule;

the Property ('color' and 'background-color' are both properties)

specifies what aspect of the layout is being set;

the Value ('purple' and '#d8da3d')

gives the value for the style property.

The Property and Value parts are called the Declaration part

Source : http://www.w3.org/Style/Examples/011/firstcss

Slide 10 : 10/34 : Grouping selectors and rules (groupingRules.en.html)

Grouping selectors and rules

From

body { color: purple }
body { background-color: #d8da3d }

To (Rules can be combined : We have set two properties, so we could have made two separate rules)

body { color: purple;
       background-color: #d8da3d }

From

H1 { font-weight: bold }
H2 { font-weight: bold }
H3 { font-weight: bold }

To (same Declaration)

H1, H2, H3 { font-style: bold }

Source : http://www.w3.org/Style/Examples/011/firstcss and http://www.w3.org/Style/LieBos2e/enter/

Slide 11 : 11/34 : Adding fonts (tutorial6.en.html)

Adding fonts

<style type="text/css">
body { font-family: Georgia, "Times New Roman",Times, serif;
       color: purple;
       background-color: #d8da3d }
h1 {   font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif }
</style>

On the Web, you can never be sure what fonts your readers have on their computers

so add some alternatives : Times New Roman or Times are also fine, and if all else fails, the browser may use any other font with serifs etc.

Source : http://www.w3.org/Style/Examples/011/firstcss

Slide 12 : 12/34 : The 5 font families (font.en.html)

The 5 font families

Since not all fonts are available on all computers (there are thousands of fonts, and most are not free), CSS provides a system of fallbacks. You list the font that you want first, then any fonts that might fill in for the first if it is unavailable, and you should end the list with a generic font, of which there are five: serif, sans-serif, monospace, cursive and fantasy.

It is best to specify type faces in groups since different computers use different type fonts:

font-family: font family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular, sans-serif
'sans-serif': normal fonts without serifs

font-family: Georgia, "Times New Roman",Times, serif
(Times New Roman is the default for most browsers)
'serif': normal fonts with serifs

font-family: "Courier New", Courier , monospace
'monospace': fixed-width fonts

font-family: Zapfino, Zapf Chancery, cursive
'cursive': fonts that emulate handwriting

font-family: Papyrus, Impact , fantasy
'fantasy': decorative fonts, for titles, etc.

For more on fonts : http://www.wpdfd.com/editorial/wpd0704news.htm

Slide 13 : 13/34 : Font families (fontsExamples.en.html)

Font families

Source : modified extract from http://www.w3.org/Style/Examples/007/fonts.html

After the color, the font is probably the most basic property of a page. On this page I won't show any "tricks," but I will show the range of font variations that CSS allows.

Since not all fonts are available on all computers (there are thousands of fonts, and most are not free), CSS provides a system of fallbacks. You list the font that you want first, then any fonts that might fill in for the first if it is unavailable, and you should end the list with a generic font, of which there are five: serif, sans-serif, monospace, cursive and fantasy.

The following table shows examples of various fonts (your browser may not know all of them) and you can see what your browser does with each of the five generic ones:

'sans-serif': normal fonts without serifs
Verdana, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
Arial, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
Helvetica, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
Gill Sans, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
Lucida Grande, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
Helvetica Neue, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
'serif': normal fonts with serifs
Times, serif The Quick Brown Fox Jumps Over The Lazy Dog
Times New Roman, serif The Quick Brown Fox Jumps Over The Lazy Dog
Georgia, serif The Quick Brown Fox Jumps Over The Lazy Dog
Palatino, serif The Quick Brown Fox Jumps Over The Lazy Dog
New Century Schoolbook, serif The Quick Brown Fox Jumps Over The Lazy Dog
serif The Quick Brown Fox Jumps Over The Lazy Dog
'monospace': fixed-width fonts
Andale Mono, monospace The Quick Brown Fox Jumps Over The Lazy Dog
Courier New, monospace The Quick Brown Fox Jumps Over The Lazy Dog
Courier, monospace The Quick Brown Fox Jumps Over The Lazy Dog
Lucidatypewriter, monospace The Quick Brown Fox Jumps Over The Lazy Dog
Fixed, monospace The Quick Brown Fox Jumps Over The Lazy Dog
monospace The Quick Brown Fox Jumps Over The Lazy Dog
'cursive': fonts that emulate handwriting
Comic Sans, cursive The Quick Brown Fox Jumps Over The Lazy Dog
Zapf Chancery, cursive The Quick Brown Fox Jumps Over The Lazy Dog
Coronetscript, cursive The Quick Brown Fox Jumps Over The Lazy Dog
Florence, cursive The Quick Brown Fox Jumps Over The Lazy Dog
Parkavenue, cursive The Quick Brown Fox Jumps Over The Lazy Dog
cursive The Quick Brown Fox Jumps Over The Lazy Dog
'fantasy': decorative fonts, for titles, etc.
Impact, fantasy The Quick Brown Fox Jumps Over The Lazy Dog
Papyrus, fantasy The Quick Brown Fox Jumps Over The Lazy Dog
Oldtown, fantasy The Quick Brown Fox Jumps Over The Lazy Dog
Blippo, fantasy The Quick Brown Fox Jumps Over The Lazy Dog
Brushstroke, fantasy The Quick Brown Fox Jumps Over The Lazy Dog
fantasy The Quick Brown Fox Jumps Over The Lazy Dog

Slide 14 : 14/34 : Font styles (fontsStyles.en.html)

Font styles

Source : modified extract from http://www.w3.org/Style/Examples/007/fonts.html

Most fonts have various styles within the same family, typically a bold and an italic one, often also a bold italic style, somewhat less often a small-caps and in a few cases extra-light/extra-bold or stretched/condensed versions.

The table below shows a number of different styles. Unless you have a very rich collection of fonts, many of the rows will be the same.

rule serif sans-serif
Styles
font-style: normal The Quick… The Quick…
font-style: italic The Quick… The Quick…
font-style: oblique The Quick… The Quick…
Weights
font-weight: 100 The Quick… The Quick…
font-weight: 200 The Quick… The Quick…
font-weight: 300 The Quick… The Quick…
font-weight: normal The Quick… The Quick…
font-weight: 500 The Quick… The Quick…
font-weight: 600 The Quick… The Quick…
font-weight: bold The Quick… The Quick…
font-weight: 800 The Quick… The Quick…
font-weight: 900 The Quick… The Quick…
Variants
font-variant: normal The Quick… The Quick…
font-variant: small-caps The Quick… The Quick…
Stretch
font-stretch: ultra-condensed The Quick… The Quick…
font-stretch: extra-condensed The Quick… The Quick…
font-stretch: condensed The Quick… The Quick…
font-stretch: semi-condensed The Quick… The Quick…
font-stretch: normal The Quick… The Quick…
font-stretch: semi-expanded The Quick… The Quick…
font-stretch: expanded The Quick… The Quick…
font-stretch: extra-expanded The Quick… The Quick…
font-stretch: ultra-expanded The Quick… The Quick…

In CSS3, there is one more style available: 'font-effect' makes the letters look engraved or embossed.

Slide 15 : 15/34 : Adding a navigation bar (tutorial7.en.html)

Adding a navigation bar

we need to

move the list to the left : 'padding-left'

move the rest of the text a little to the right : 'position', 'left' and 'top'

position : absolute

em : size of the current font

body { padding-left: 11em;
       font-family: Georgia, "Times New Roman", Times, serif;
       color: purple;
       background-color: #d8da3d }
ul.navbar {
       position: absolute;
       top: 2em;
       left: 1em;
       width: 9em }

The 'position: absolute' says that the ul element is positioned independently of any text that comes before or after it in the document and the 'left' and 'top' indicate what that position is. In this case, 2em from the top and 1em from the left side of the window.
'2em' means 2 times the size of the current font. E.g., if the menu is displayed with a font of 12 points, then '2em' is 24 points. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader happens to use. Most browsers have a menu for increasing or decreasing the font size: you can try it and see that the menu increases in size as the font increases, which would not have been the case, if we had used a size in pixels instead.

Source : http://www.w3.org/Style/Examples/011/firstcss

Slide 16 : 16/34 : Container (containera.en.html)

Container

HTML is organised like Russian dolls

Each element is container for other elements

The <body> element is the parent of both the <h1> element and the two <p>

Most styles attributed to one element are inherited by its enclosed elements

It is possible to use the imbrication pattern to describe some complex selectors (p then p for instance)

3 main types of elements : Block, Inline, List.

<html>
<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>

<h1>Test</h1>

<p>
Paragraph
</p>

<p>Another paragraph</p>

</body>
</html>

Slide 17 : 17/34 : The Box Model (tutorial7b.en.html)

The Box Model

3 main types of elements : Block, Inline, List.

"div" element : generic Block : to put together a set of Block

"span" element : generic Inline : to identifiy some part of a text

The Block and List type follow this Box Model

 

Source : http://www.w3.org/Style/Examples/011/firstcss

Slide 18 : 18/34 : Adding a navigation bar (tutorial7c.en.html)

Second look at "Adding a navigation bar"

we need to

move the list to the left : 'padding-left'

move the rest of the text a little to the right : 'position', 'left' and 'top'

position : absolute

em : size of the current font

body { padding-left: 11em;
       font-family: Georgia, "Times New Roman", Times, serif;
       color: purple;
       background-color: #d8da3d }
ul.navbar {
       position: absolute;
       top: 2em;
       left: 1em;
       width: 9em }

The 'position: absolute' says that the ul element is positioned independently of any text that comes before or after it in the document and the 'left' and 'top' indicate what that position is. In this case, 2em from the top and 1em from the left side of the window.
'2em' means 2 times the size of the current font. E.g., if the menu is displayed with a font of 12 points, then '2em' is 24 points. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader happens to use. Most browsers have a menu for increasing or decreasing the font size: you can try it and see that the menu increases in size as the font increases, which would not have been the case, if we had used a size in pixels instead.

Source : http://www.w3.org/Style/Examples/011/firstcss

Slide 19 : 19/34 : Styling the links (1) (tutorial8.en.html)

Styling the links (1)

remove the list bullets

move the items to the left, to where the bullet was

 ul.navbar {
   list-style-type: none;
   padding: 0;
   margin: 0;
   position: absolute;
   top: 2em;
   left: 1em;
   width: 9em }

Source : http://www.w3.org/Style/Examples/011/firstcss

Slide 20 : 20/34 : Styling the links (2) (tutorial9.en.html)

Styling the links (2)

Modify the LI within the Navigation Bar

Modify Link pseudo class

ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em; 
    border-right: 1em solid black }
ul.navbar a {
    text-decoration: none }
a:link {
    color: blue }
a:visited {
    color: purple }

Source : http://www.w3.org/Style/Examples/011/firstcss

Slide 21 : 21/34 : Selectors (selector.en.html)

Selectors ( selector { property : value } )

Type selectors

tagName : one of the existing HTML tags : all the tags of that sort will be affected

E.g. : a, li, ul
strong {color: red }

Class Selector

Solitary class selectors
.className : style that will be applied to any area defined by a surrounding tag or DIV or SPAN

E.g. : .question {font-weight: bold}
<h3 class="question">What are solitary class selectors ?</h3>

<div class="question"><h2>important question</h2><h2>less important question</h2><div>
<p>And now let's ask the question : <span class="question">Is it an important question ?<span></p>

tagName.className
selects only a specific type of element of that class

E.g. : h3.question {font-weight: bold}

ID Selector

#tagID
in any valid HTML document there should only be one heading 1 with an ID of title.

E.g. : #TheQuestion
<h3 id="TheQuestion">What is the difference between id and class ?</H3>

To learn more about selectors : http://westciv.com/style_master/academy/css_tutorial/selectors/index.html

Slide 22 : 22/34 : Container (container.en.html)

Container

HTML is organised like Russian dolls

Each element is container for other elements

The <body> element is the parent of both the <h1> element and the two <p>

Most styles attributed to one element are inherited by its enclosed elements

It is possible to use the imbrication pattern to describe some complex selectors (p then p for instance)

<html>
<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>

<h1>Test</h1>

<p>
Paragraph
</p>

<p>Another paragraph</p>

</body>
</html>

Slide 23 : 23/34 : Selectors (2) (advancedSelector.en.html)

Selectors (2)

Descendant selector

A descendant selector selects an element only when it is the descendant of another specified element.

strong { font-weight : bold }
h2 strong { color : red }

a img {border: none}

Link pseudo class selectors

The selector which occurs further from the top of the style sheet prevails.

To learn more about selectors : http://westciv.com/style_master/academy/css_tutorial/selectors/index.html

Slide 24 : 24/34 : Selectors (2) (advancedSelector2.en.html)

Selectors (2)

Pseudo element selectors

first-line and first-letter

elementName:first-line  ...   p:first-line { color : blue }

Selector groups

List of selectors separated by commas

The contents of the list can be any selectors

h1, h2, h3, h4 { text-decoration : underline }

Other selectors, not yet widely available in browsers

Child (div>strong {} ), First child (p:first-child {}), Adjacent (ol + p {}), Attribute (a[title~="value"]{})...

To learn more about selectors : http://westciv.com/style_master/academy/css_tutorial/selectors/index.html

Slide 25 : 25/34 : Styling the links (2) (tutorial10.en.html)

Styling the links (2bis)

Modify the LI within the Navigation Bar

Modify Link pseudo class

ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em; 
    border-right: 1em solid black }
ul.navbar a {
    text-decoration: none }
a:link {
    color: blue }
a:visited {
    color: purple }

Source : http://www.w3.org/Style/Examples/011/firstcss

Slide 26 : 26/34 : Adding a horizontal line (tutorial11.en.html)

Adding a horizontal line

In fact, adding the Top side of a border

address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted 
}

Source : http://www.w3.org/Style/Examples/011/firstcss

Slide 27 : 27/34 : Putting the style sheet in a separate file (tutorial12.en.html)

Putting the style sheet in a separate file

type="text/css" is not xsl

<!DOCTYPE html PUBLIC 
"-//W3C//DTD HTML 4.01//EN">
<html>
 <head>
   <title>My first styled page</title>
   <link rel="stylesheet" 
    type="text/css"
    href="mystyle.css">
 </head>
 <body> ../..

Source : http://www.w3.org/Style/Examples/011/firstcss

Slide 28 : 28/34 : Various Advice (variousAdvice.en.html)

Various Advice

Negative Margins ?

To make headings a little more distinctive, you can make them start within the margin set for the body, e.g.

body  { margin-left: 10%; margin-right: 10%; }
h1    { margin-left: -8%; }
h2,h3,h4,h5,h6 { margin-left: -4%; }

Setting the font size in relative terms

This example sets heading sizes in percentages relative to the size used for normal text:

h1 { font-size: 200%; }
h2 { font-size: 150%; }

Slide 29 : 29/34 : Various Advice (2) (variousAdvice2.en.html)

Various Advice (2)

Avoid text at the body level that isn't wrapped in a block level element such as p, ul ... 

<h2>Spring in Wiltshire</h2>

<p>Blossom on the trees, bird song and the sound of lambs
bleating in the fields.</p>

Em and Ex

One em is the height of the font.

One ex is the size of the letter x of a font

By using em's and ex's you can preserve the general look of the Web page independently of the font size.

Slide 30 : 30/34 : Various Advice (3) (variousAdvice3.en.html)

Various Advice (3)

Use CSS comments

/* they are C-like comment */

Use Validation services

The W3C’s CSS Validation Service : http://jigsaw.w3.org/css-validator/

Check the browser compatibilities for advanced CSS2 possibilities

http://westciv.com/style_master/academy/browser_support/index.html

Slide 31 : 31/34 : Other Examples (otherExamples.en.html)

Other Examples

A Side Panel

body { background-attachment: fixed;
       background-image: URL(panel.gif);
       background-repeat: repeat-y;  }

Zen Garden

http://www.csszengarden.com/

Slide 32 : 32/34 : CSS versions (versions.en.html)

CSS versions

W3C CSS1 : 1996

CSS2 finalized in May 1998

CSS2 includes all CSS1 properties and adds around 70 of its own

CSS2 supports media-specific style

visual browsers, aural devices, printers, braille devices, handheld devices

CSS 2.1 : 25/2/04

corrects errors in CSS2 and adds a few highly requested features originally planned for CSS3, which have already been widely implemented.

But most of all CSS 2.1 represents a "snapshot" of CSS usage: it consists of all CSS features that are implemented interoperably for HTML and XML at the date of publication of the Recommendation.

CSS 3 in progress

This specification defines Cascading Style Sheets, level 2.1 (CSS2). CSS2 is a style sheet language that allows authors and users to attach style (e.g., fonts, spacing, and aural cues) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS2 simplifies Web authoring and site maintenance.
CSS2 builds on CSS1 and, with very few exceptions, all valid CSS1 style sheets are valid CSS2 style sheets. CSS2 supports media-specific style sheets so that authors may tailor the presentation of their documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc. This specification also supports content positioning, downloadable fonts, table layout, features for internationalization, automatic counters and numbering, and some properties related to user interface.

Source : http://www.cs.tcd.ie/Benjamin.Jung/Download/QuickReference/CSS-2/

 

Cascading Style Sheets is formally described in two specifications from W3C: CSS1 and CSS2. CSS1 was issued in December 1996 and describes a simple formatting model mostly for screen-based presentations. CSS1 has around 50 properties (for example color and font-size). CSS2 was finalized in May 1998 and builds on CSS1. CSS2 includes all CSS1 properties and adds around 70 of its own, such as properties to describe aural presentations and page breaks. The CSS specifications :
W3C CSS1 : http://www.w3.org/TR/REC-CSS1
W3C CSS2 : http://www.w3.org/TR/REC-CSS2
Source : http://www.w3.org/Style/LieBos2e/enter/

Slide 33 : 33/34 : Acid 2 Test (acid2.en.html)

Acid 2 Test

Why are my CSS not working well ...

Have your browser pass the acid test !

http://www.webstandards.org/act/acid2/test.html

 

Slide 34 : 34/34 : The well designed web site (wellDesignedWeb.en.html)

The well designed web site:   "Less is More"

  1. Lets the users accomplish their goals

  2. Makes its purpose clear

  3. Follows conventions

  4. Speeds along

  5. Displays well in different environments

  6. Has some style