Cascading Style Sheets

1
Cascading Style Sheets

• applying our own presentation to web pages

2
What is a Cascading Style Sheet?

• Its a separate file (usually), which is
  attached to your xhtml file
• It contains information on how to format the
  elements of your html
• If you dont have one, your browser uses a
  default style sheet
• You can change the default style sheet, too

3
CSS and the W3C

• CSS is a W3C standard
• CSS1
• December 1996
• Revised January 1999
• CSS2
• May 1998
• See the w3.org reference

4
The W3C say

• CSS1 is a simple style sheet mechanism that
  allows authors and readers to attach style (e.g.
  fonts, colors and spacing) to HTML documents. The
  CSS1 language is human readable and writable, and
  expresses style in common desktop publishing
  terminology.
• http//www.w3.org/TR/REC-CSS1

5
CSS Versions

• We have CSS1 and CSS2
• CSS1 supported by the major browsers
• Has a 68 page manual
• CSS2 still only partially supported
• Supports things like sound as well
• Has a 338 page manual
• CSS3 is under development
• http//www.w3.org/Style/CSS/

6
Cascading Style Sheets

• Specify Style (what we call presentation)
• For elements on their own
• For elements in the context of other elements
• They let you control the obvious (and some less
  obvious) aspects of presentation

7
HTML needs CSS

• Why?
• Well we didnt use it for our first practical,
  did we?
• No, but then the output wasnt (intended to be)
  particularly inspiring
• Yes but we could have got around it using fancy
  fonts and things like bgcolor
• But that would be extra work, and youd have to
  do it all again if you created another page.
  Also, it relies on presentational markup, and not
  on structure. Not ideal

8
XHTML and Structure

• XHTML 1.0 comes in two flavours
• Transitional
• allows presentational tags and attributes
• Designed to make it easy to convert HTML pages
• Strict
• does not allow such tags
• (actually also another flavour called frameset
  which we wont worry about its gone in 1.1)

9
Strict ? well structured pages

• If we use strict, we encourage ourselves to write
  well-structured pages using CSS
• XHTML 1.1 is only strict!
• Further reading
• http//www.yourhtmlsource.com/accessibility/logica
  lstyle.html
• Please do read this page! (material in it is
  examinable!!!)

10
Cascading Style Sheets

• because the style cascades through
• One of the fundamental features of CSS is that
  style sheets cascade authors can attach a
  preferred style sheet, while the reader may have
  a personal style sheet to adjust for human or
  technological handicaps (W3 CSS1 documentation)

11
Who determines presentation then?

• The big company
• Spends money on design (often lots)
• Has a CSS for their web pages a corporate look,
  logos, colour schemes etc
• The user
• May be operating on an old machine
• Restricted screen
• Slow network connection, so doesnt want images
• May have a visual impairment

12
The user takes precedence

• Provider says this is what I want you to see
• User says but this is the way I want to see it
• Things redefined by the user replace definitions
  made by provider
• Things not redefined by user cascade through or
  show as browser default

13
Try writing your own CSS and attaching it to your
browser!

• In Internet Explorer
• Tools Internet Options
• Click the Accessibility button
• Under User style sheet enter the path of your
  own style sheet
• Other browsers?

14
CSS and Corporate Style

• CSS helps enforce a corporate style on an
  organisations web pages
• There may be in-house variations
• Marketing dept has one style
• Product development has another
• They can use a common style sheet, but also have
  their own, which may override some of the
  definitions in the common one

15
CSS and Consistency

• Using CSS helps consistency in presentation
• Especially in large sites, e.g. www.aber.ac.uk
• Put font colours, faces, background images,
  alignment etc. in a common CSS
• Reference that CSS from all pages
• Changing the presentational style of a web site
  then means just editing one file

16
CSS 1 or 2

• CSS 2 includes all 50(ish) of the properties of
  CSS1
• And includes a further 70 or so of its own
• http//www.w3.org/Style/LieBos2e/enter/
• So unless I say otherwise, were using CSS common
  to both
• Short tutorial (for CSSHTML)
• http//www.w3.org/TR/REC-CSS2/intro.html

17
Specifying Style

• You specify properties
• You give the properties a value
• font-family helvetica
• color red
• color rgb(255,0,0)
• margin-left 2em
• border-width thin

The space occupied by the letter m in the
current font
18
What does style apply to?

• Elements
• We associate element names with lists of style
  properties
• h1 color red
• h1, h2, h3 color blue
• font-family helvetica
• Note comma separated elements, semicolon
  separated properties

19
Style Inheritance

• If an element appears inside another element, it
  will inherit the outer elements style
• lth1gtThis is ltemgtimportantlt/emgtlt/h1gt
• If h1 color red
• then all is red
• If em color blue
• then em would be blue (here and everywhere else)
• em is called a child of h1 in this instance

20
We can type all this into the page

• Take a look at this example
• Basic
• Style is in the page
• Not reusable
• Maybe what you want for a one-off
• http//users.aber.ac.uk/ais/examples/css/eg1.html

21
Put the CSS in another file

• This example uses a class, and has the style
  sheet in a separate file
• Can be re-used
• Not really more effort than the last one
• http//users.aber.ac.uk/ais/examples/css/eg2.html
• http//users.aber.ac.uk/ais/examples/css/eg2.css

22
the Style Sheet for eg2.html

• body color green
• margin-left 20
• h1 font-family comic sans ms
• font-style italic
• color red
• p text-align left
• p.initial text-align right

Whats this? see next slide
23
Style can be associated with other things

• Classified elements
• lth1 classheavygtLISTENlt/h1gt
• .heavy color red
• Named elements
• Those with ID attributes having certain values
• lth1 idspecialgtLISTENlt/h1gt
• special color red
• h1special color red

24
Class and ID

• IDs are almost exactly the same as classes except
  they may only occur once in any document whereas
  classes can occur any number of times.
• Will fail the validator if you use it more than
  once in a document
• Can be used with JavaScript to identify uniquely
  an element
• see http//www.javascriptkit.com/javatutors/custom
  collect.shtml for more info - wont make sense to
  you yet though!

25
Style can vary with context

• We could say
• h1 color red
• em color blue
• h1 em color green
• (note no comma)
• lth1gtThis is ltemgtimportantlt/emgtlt/h1gt
• Now gives a green important

26
Elements in Context

• http//users.aber.ac.uk/ais/examples/css/eg3.html
• b font-style bold
• font-family arial
• color red
• i font-style italic
• color green
• b i color blue

27
The use of ID

• http//users.aber.ac.uk/ais/examples/css/eg4.html
• p font-family arial
• .myclass text-decoration underline
• myid font-family comic sans ms
• color red

28
Types of Property

• Font
• Colo(u)r and background
• Text
• spacing, decorations, indents aligns
• Boxes
• margins, padding, borders
• Scan the manual

29
Your document as a tree

• Your XHTML document can be thought of as a tree
• lthtmlgt element is the top node
• ltheadgt and ltbodygt elements are children of it
• When we apply a style to an element using CSS, it
  applies to that element and all its children

30
Child and Sibling selectors

• But we can get CSS to apply style to an element
  only if its a child of another certain element
• em gt b font-color red
• Makes b red only when its a child of em
• em b font-color red
• Makes b red only when it comes immediately after
  em

31
Terminology

• The bit which says what were applying the style
  to is often called the selector
• The bit inside the curly brackets is the style
  declarations

32
Pseudo-classes

• Most useful with links
• alink color red
• avisited color green
• Others are ahover and aactive

33
Comments

• A comment in CSS looks like / this /
• Note its not the same as an XHTML comment!

34
The div tag

• Divides a document logically into sections
• Useful for CSS formatting in blocks
• Note also the span tag for formatting in-line
  sections
• Read http//www.designplace.org/tutorials.php?page
  1c_id24 for more

35
Why use cascading style sheets?

• Easy to apply same style to many pages
• Less work in the long run, for large sites
• Corporate Style
• Consistency (structure)
• Easy to write
• Only need to write once for a group of pages

36
Why not use CSS?

• Cramps style and artistic flair (presentation)
• Extra work (in the short term at least)
• CSS2 not supported properly in all browsers
• Not fully supported in any browsers (?)

37
References

• http//www.w3.org/Style/CSS
• http//www.w3.org/Style/CSS/learning (links to
  tutorials, books, etc)
• http//www.htmlhelp.com/reference/css
• http//www.htmlgoodies.com/beyond/css/ (excellent
  tutorial give it a go!)
• http//www.htmlgoodies.com/css-ref/

38
More references

• http//www.w3schools.com
• http//www.w3schools.com/css/
• Particularly useful quick reference
  http//www.w3schools.com/css/css-reference.asp
• your recommendation here