Web Pages with Style

Rob Wall

StigmergicWeb

This document lives at http://www.stigmergicweb.org/presentations/css

Cascading Style Sheets

• Used to control the presentation on a web page
• Rules describe the presentation of a specific element
• Rules can be included within the html file, or in a separate file
• Internal style sheets are usually included within the head portion of the html file

<style type="text/css">
h1 {font-style: bold;}
</style>

CSS is powerful!

• Check CSS Zen Garden

Writing a CSS rule

• All rules are made up of selectors and one or more declarations

<style type="text/css">
h1 {font-style: bold;}
</style>

• h1 is the selector
  • Any HTML element can be a selector, indicating that the declarations will affect the representation of that element
  • In the example above, the declaration will change the presentation of the h1 elements
• font-style: bold; is a declaration

Declarations

• Declarations are made up of pairs of properties and values

<style type="text/css">
h1 {font-style: bold;}
</style>

• font-style is a property
• bold is a value
• Separated with :
• Each declaration ends with ;

Multiple Declarations

• A rule can have multiple declarations

<style type="text/css">

h1 {
	font-style: bold;
	color:  red;
}

</style>

Basic Properties

• font-family
  • serif, sans-serif
  • name of font - arial, helvetica, "Times New Roman"
• font-size
  • give font size in pixels (or other units)
  • percentage
• font-weight
  • normal, lighter, bold, bolder
• text-align
  • left, right, center, justify

Text and background colour

• Use color property to change text colour
• Use background-color property to change background colour
• Use colour names or values for the value
  • aqua, black, blue, fuchsia, gray, green, lime, maroon, olive, navy, purple, red, silver, teal, white, yellow
  • See the HTML Dog Colour Reference for more details

Example

h1 {
	color:white;
	background-color:navy;
	font-family:arial, helvetica, sans-serif;
	font-weight:bolder;
	font-size:28px;
	}

How Many Rules

• As many as you want to within the style sheet

External Stylesheets

• Put this in the head section of your html page

  • <link rel="stylesheet" type="text/css" href="web.css" />
    

Practice

• Practice
• Practice more
• Look at other people's style sheets
  • My school page
• Steal Imitate all their good ideas