CSS declarations

Derek Bridge

Department of Computer Science,
University College Cork

CSS declarations

Aims:

• to learn CSS declarations for foreground and background colours and images
• to learn CSS declarations for choosing fonts and formatting text
• to learn CSS declarations for box formatting
• to learn CSS declarations for positioning

Foreground and background colours

• Use the color and background-color properties
• CSS2.1 defines 17 named colours, e.g. red, maroon, orange, yellow, blue, etc.
• Or use rgb(x,y,z) (percentages or 0-255)
• Or use #xxyyzz (three hexadecimals, 00-FF)

Font families

• Some fonts are proportional, others are monospace
• Some fonts have serifs, others are sans-serif
• Use the font-family property but give it multiple values

  body {font-family: "Lucida Grande", Verdana, Lucida, 
                     Arial, Helvetica, sans-serif;
  }
  

Font sizes

• The font-size property:
  • avoid inches, millimetres, centimetres, points & picas
  • On the body either leave it up to the browser or use pixels or ems (probably not exs)
  • The, when over-riding the body's font-size, use relative sizes (ems and percentages)

  body {font-size: 11px;}
  ul {font-size: 0.8em;}
  td {font-size: 150%;}
  

Font weight and style

• Font weight can make text bold:

  .cocktail {font-weight: bold;}
  

• Font style can italicise:

  .action {font-style: italic;}
  

Box properties

• Every (X)HTML element generates one or more boxes
• Content: width, height
• Padding: padding-top
• Border: border-top-width, border-top-color, border-top-style (e.g. solid, dashed)
• Margin: margin-top
• Similarly, -right, -bottom, -left
• Adjacent top and bottom margins may collapse
• Several 'shorthand' properties

Using CSS to change the element display role

• We can change inline-level elements (such as a and img) to block-level, e.g.:

  #navigation a {display: block;}
  

• We can change block-level elements (and similar elements such as li) to inline, e.g.:

  li {display: inline;}
  

Multi-column layout

• Multi-column layout (e.g. two or three columns) is very popular
• Older web sites use tables for layout
• Newer web sites use CSS positioning properties
• E.g. absolute positioning (using the properties top, right, bottom and/or left):

  #navigation {position: absolute; top: 0; left: 0;}