Cascading Style Sheets CSS

1
Cascading Style Sheets (CSS)

• World Wide Web Technology
• Fashions fade, style is eternal.
• Yves Saint Laurent

2
Objectives

• To
• control appearance of a Web site by style sheets
• use a style sheet to provide uniform appearance
• use the CLASS attribute to apply styles
• specify element backgrounds and colours
• use the box model to control margins, borders and
  padding
• separate content presentation

3
Cascading Style Sheets

• Allow the specification of the style of the page
  separately from the structure and content
• spacing, margins, fonts
• the look and feel
• Allows better management
• Makes changing style easier

4
Inline Styles

• ltHTMLgtltBODYgtltPgtSome Text - just plainlt/PgtltP
  STYLEfont-size 20ptgtSome more textlt/PgtltP
  STYLEfont-size 20pt color 0000FFgtAnd even
  more textlt/Pgtlt/BODYgtlt/HTMLgt

5
Inline Styles

• Each CSS property is followed by a colon then the
  value of the attribute
• Properties are separated by semicolons
• The STYLE attribute allows the specification of a
  style property

6
The STYLE Element

• In the HEAD section of the document styles may be
  applied to the whole document by using the STYLE
  element (not attribute)
• The style sheet begins with
• ltSTYLE TYPE text/cssgt
• The TYPE attribute specifies the MIME type -
  standard for specifying the format of content -
  text/html, image/gif, text/javascript

7
Example
ltHEADgt ltTITLEgtStyle Sheetslt/TITLEgt lt!-- This
begins the style sheet section. --gt ltSTYLE TYPE
"text/css"gt EM background-color
8000FF color white H1
font-family Arial, sans-serif P
font-size 18pt .blue color blue
lt/STYLEgt lt/HEADgt ltBODYgt lt!-- This CLASS
attribute applies the .blue style --gt ltH1 CLASS
"blue"gtA Headinglt/H1gt ltPgtHere is some
text.lt/Pgt lt/BODYgt lt/HTMLgt
8
The Style Sheet

• The body of the style sheet (red) declares the
  CSS rules for this sheet
• Rules for EM H1 and P elements are declared
• These elements will be modified in the specified
  manner
• Each rule body begins and ends with a curly brace
  

9
Style Class

• A style class named blue is declared
• Class declarations are preceded with a period
• The rules have the same format as inline styles
• property value property value

10
Properties

• Background-color
• font-family specifies the name of the font
• Arial, the second value sans-serif is a generic
  font family - used if Arial is not found on the
  system
• font-size
• specified in pt
• also relative - xx-small .. xx-large

11
CLASS

• The CLASS attribute applies a style class
• Example The .blue class
• ltH1 CLASSbluegt A Headinglt/H1gt
• both the properties of H1 and the .blue style
  class

12
Inheritance

• Stylesheet rules are inherited from parent to
  child
• Example B color blue
• What does the browser do with the following
• ltBgtAll Web pages should use ltIgtCSSlt/Igtlt/Bgt
• There is no rule set for the ltIgt tag but because
  it occurs within a ltBgt tag with a rule set. The
  child displays in blue.

13
Specificity

• ltH1gtAll Web pages should use ltEMgtCSSlt/EMgtlt/H1gt
• In this case the child element has a rule of its
  own and this rule is in conflict with the rule of
  the parent
• The rule of the child is more specific and
  overrides the style set for ltH1gt

14
Another example of specificity
ltHTMLgt ltHEADgt ltTITLEgtMore Styleslt/TITLEgt ltSTYLE
TYPE "text/css"gt A.nodec text-decoration
none Ahover text-decoration underline
color red
background-color CCFFCC LI EM color
red font-weight bold
UL margin-left 75px UL UL
text-decoration underline
margin-left 15px lt/STYLEgt lt/HEADgt
15
Example cont.
ltBODYgt ltH1gtShopping list for ltEMgtMondaylt/EMgtlt/H1gt
ltULgt ltLIgtMilklt/LIgt ltLIgtBread ltULgt
ltLIgtWhite breadlt/LIgt ltLIgtRye breadlt/LIgt
ltLIgtWhole wheat breadlt/LIgt lt/ULgtlt/LIgt ltLIgtRicelt
/LIgt ltLIgtPotatoeslt/LIgt ltLIgtPizza ltEMgtwith
mushroomslt/EMgtlt/LIgt lt/ULgt ltPgtltA CLASS "nodec"
HREF "http//food.com"gtGo to the Grocery
storelt/Agtlt/Pgt lt/BODYgt lt/HTMLgt
16
The result
17
The result while hovering
18
Discussion

• A.nodec text-decoration none
• applies the text-decoration property to all A
  elements whose CLASS attribute is set to nodec
• default is to underline but here it is set to
  none
• Ahover text-decoration underline
  color red background-color
  CCFFCC

19
Pseudo-class

• The code specifies a style for hover which is a
  pseudo-class
• Pseudo-classes give the author access to content
  not specifically declared in the document
• The hover pseudo-class is dynamically activated
  when the user moves the mouse cursor over an A
  element

20
LI EM is different from LI, EM

• LI EM color red font-weight
  bold
• declares a style for all EM elements that are
  children of LI elements
• LI, EM would declare the style for both
• UL UL text-decoration underline
  margin-left 15px
• specifies that all nested lists will be
  underlined and have a left-hand margin of 15
  pixels

21
Length measurements

• Px - pixel - relative - screen resolution
• em - the size of the font - relative
• ex - x height of the font
• in - inches - absolute
• pt - 1 pt 1/72 in
• pc - 1 pc 12pt

22
Linking External Style Sheets

• External linking of style sheets can give the
  whole site a uniform look
• Only need to modify a single file to make changes
  to the whole site
• The external style sheet is referenced by using
  the ltLINKgt tag in ltHEADgt
• ltLINK REL "stylesheet" TYPE "text/css" HREF
  "styles.css"gt
• LINK a specifies a relationship between the
  current document and another using the REL
  attribute

23
Example External SS
ltHTMLgt lt!-- imported.html --gt lt!-- Linking
external style sheets --gt ltHEADgt ltTITLEgtImporting
style sheetslt/TITLEgt ltLINK REL "stylesheet"
TYPE "text/css" HREF "styles.css"gt lt/HEADgt ltBO
DYgt ltH1gtShopping list for ltEMgtMondaylt/EMgtlt/H1gt ltU
Lgt ltLIgtMilklt/LIgt ltLIgtBread ltULgt ltLIgtWhite
breadlt/LIgt ltLIgtRye breadlt/LIgt ltLIgtWhole
wheat breadlt/LIgt lt/ULgtlt/LIgt ltLIgtRicelt/LIgt ltLIgtP
otatoeslt/LIgt ltLIgtPizza ltEMgtwith
mushroomslt/EMgtlt/LIgt lt/ULgt ltA HREF
"http//food.com"gtGo to the Grocery
storelt/Agt lt/BODYgt lt/HTMLgt
24
Notes

• Declare the linked document to be a stylesheet
• TYPE attribute is used to specify the MIME type
  as text/css
• URL for the style sheet is provided by the HREF
  attribute

25
Note

• Other relationships that can be specified between
  documents are next and previous
• Allow a whole series of documents to be linked
• In IE Print all linked documents uses this info

26
Positioning Elements

• Usually positioning was up to the browser in HTML
• CSS has a position property and a capability
  called absolute positioning

27
Absolute positioning
ltBODYgt ltIMG SRC "i.gif" STYLE "position
absolute top 0px left 0px z-index
1"gt ltH1 STYLE "position absolute top 50px
left 50px z-index 3"gtPositioned
Textlt/H1gt ltIMG SRC "circle.gif" STYLE
"position absolute top 25px left 100px
z-index 2"gt lt/BODYgt
28
Positioning
29
Positioning

• Specifying an elements position removes it from
  the normal flow of elements on the page
• Positions the element according to distance from
  top, left, right or bottom margins of its parent
  element
• I.gif is 0 pixels from top and left margins of
  the BODY element
• z-index attribute allows layering of overlapping
  elements (1 back - 2 front)

30
Absolute positioning

• Where does the H1 element go.
• Layer 3 in front of both

31
Relative positioning

• Setting the position property to relative will
  first lay out the element on the page, then
  offset the element by the specified top, bottom,
  left or right values
• Relative positioning keeps elements in the
  general flow of elements on the page

32
Relative Positioning
ltHEADgt ltSTYLE TYPE "text/css"gt P
font-size 2em font-family
Verdana, Arial, sans-serif SPAN color
red font-size .6em
height 1em .super position relative
top -1ex .sub position
relative bottom -1ex .shiftl
position relative left -1ex
.shiftr position relative
right -1ex lt/STYLEgtlt/HEADgt
33
Relative positioning
ltBODYgt ltPgt Text text text text ltSPAN CLASS
"super"gtsuperscriptlt/SPANgt text text text text
ltSPAN CLASS "sub"gtsubscriptlt/SPANgt text Text
text ltSPAN CLASS "shiftl"gtleft-shiftedlt/SPANgt
text text text ltSPAN CLASS "shiftr"gtright-shift
edlt/SPANgt Text text text text text
lt/Pgt lt/BODYgt lt/HTMLgt
34
Display
35
Backgrounds

• CSS allows more control over background than HTML
  attributes
• ltSTYLE TYPE "text/css"gt BODY
  background-image url(watermark.gif)
  background-position bottom right
  background-repeat no-repeat
  background-attachment fixed P
  font-size 2em color AA5588
  text-indent 1em font-family
  Arial, sans-serif .dark font-weight bold
  lt/STYLEgt

36
Backgrounds

• background-image property specifies the URL of
  the image to use
• can also specify background-color in case the
  image is not found
• background-position property positions image on
  page
• background repeat property controls tiling no
  repeat, repeat, x-repeat or y-repeat

37
Backgrounds

• Background-attachment fixed fixes the image in
  the position specified by background-position
• scrolling the browser window will not move the
  image - default scroll moves the image
• text-indent 1em indents the first line of text
• .dark font-weight bold
• font weight specifies the boldness - bold,
  normal, bolder, lighter

38
SPAN, DIV

• Font-style - none, italic or oblique
• SPAN is a generic grouping element which does not
  apply any formatting to its contents
• Its use is to apply styles or ID attributes to a
  block of text. It is displayed inline
• DIV element also applies no inherent styles but
  is displayed on its own line.
• A block-level element

39
DIV
ltHEADgt ltTITLEgtBox Dimensionslt/TITLEgt ltSTYLE TYPE
"text/css"gt DIV background-color
FFCCFF margin-bottom .5em
lt/STYLEgtlt/HEADgt ltBODYgt ltDIV STYLE "width
20"gtHere is some text that goes in a box which
is set to stretch across twenty precent of the
width of the screen.lt/DIVgt ltDIV STYLE "width
80 text-align center"gt Here is some CENTERED
text that goes in a box which is set to stretch
across eighty precent of the width of the
screen.lt/DIVgt ltDIV STYLE "width 20 height
30 overflow scroll"gt This box is only twenty
percent of the width and thirty percent of the
height. What do we do if it overflows? Set
the overflow property to scroll!lt/DIVgt lt/BODYgt
40
Result
41
Notes

• ltDIV STYLE "width 20 height 30 overflow
  scroll"gt
• width is 20 and height 30 the overflow may
  exceed the boundaries so the overflow property is
  set to scroll

42
Text Flow

• Elements normally appear in the order that they
  do in HTML source
• Floating allows movement of an element to one
  side of the screen
• Other content will flow around the floated
  element
• Also each block-level element has a box drawn
  around it - box model - adjustable properties

43
Example Floated text
ltHEADgt ltTITLEgtFlowing Text Around Floating
Elementslt/TITLEgt ltSTYLE TYPE "text/css"gt DIV
background-color FFCCFF
margin-bottom .5em font-size
1.5em width 50
lt/STYLEgtlt/HEADgt ltBODYgt ltDIV STYLE
"text-align center"gtCentered textlt/DIVgt ltDIV
STYLE "text-align right"gtRight-aligned
textlt/DIVgt ltDIV STYLE "float right margin
.5em"gtThis is some floated text, floated text,
floated text, floated text.lt/DIVgt
44
ltPgt Here is some flowing text, flowing text,
flowing text. Here is some flowing text, flowing
text, flowing text. Here is some flowing text,
flowing text, flowing text. Here is some flowing
text, flowing text, flowing text. Here is some
flowing text, flowing text, flowing text. Here is
some flowing text, flowing text, flowing
text. Here is some flowing text, flowing text,
flowing text. Here is some flowing text, flowing
text, flowing text. lt/Pgt ltPgtltDIV STYLE "float
right padding .5em"gtThis is some floated text,
floated text, floated text, floated
text.lt/DIVgt Here is some flowing text, flowing
text, flowing text. Here is some flowing text,
flowing text, flowing text. Here is some flowing
text, flowing text, flowing text. ltSPAN STYLE
"clear right"gtHere is some unflowing text. Here
is some unflowing text.lt/SPANgt lt/Pgt lt/BODYgt lt/HTML
gt
45
Result
.5em margin
.5em padding
46
Text flow and the Box Model

• Note that the DIV elements are 50 width
• STYLE text-align center allows the text
  inside an element to be aligned left, center,
  right or justify
• STYLEfloat right margin .5emgt
• floats the DIV element to the right side of
  screen - margin specifies the distance between
  the element and any text outside.

47
Text flow and the Box Model

• Can set margins for individual sides by using
  margin-top, margin-right etc
• Padding is the distance between the content
  inside the element and the edge of the element
• padding-top, padding-right etc.
• The flow of text around a floated element can be
  interrupted
• ltSPAN STYLEclear rightgt
• Box model applies to DIV, P

48
Borders
ltHEADgt ltSTYLE TYPE "text/css"gt BODY
background-color CCFFCC DIV
text-align center margin-bottom
1em padding .5em .thick
border-width thick .medium border-width
medium .thin border-width thin
.groove border-style groove .inset
border-style inset .outset border-style
outset .red border-color red
.blue border-color blue lt/STYLEgtlt/HEADgt
49
Borders
ltBODYgt ltDIV CLASS "thick groove"gtThis text
has a borderlt/DIVgt ltDIV CLASS "medium
groove"gtThis text has a borderlt/DIVgt ltDIV CLASS
"thin groove"gtThis text has a borderlt/DIVgt ltP
CLASS "thin red inset"gtA thin red
line...lt/Pgt ltP CLASS "medium blue outset"gtAnd a
thicker blue linelt/Pgt lt/BODYgt lt/HTMLgt
50
Borders
51
User Style Sheets

• Users have the option to define their own user
  style sheets to format pages based on their
  preferences - visually impaired
• Possible conflicts between user styles and author
  styles
• Most conflicts are resolved by using relative
  measurements such as em or ex

52
User Style Sheets

• Adding a user style sheet in IE is done by
  ToolsInternet OptionsAccessibilityFormat
  documents using my style sheet

53
Resources

• http//www.w3.org/T/REC-CSS2/
• http//style.webreview.com