Cascading Style Sheets (css)

HTML and css

2012 Brian Davison

Adding style

CSS Co Ltd

Orchid Beauty

Oceanscape

Separating content from style

ContentContent

ContentContent

Content

Style

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

Rules, Selector, Properties, Value• A css rule will set the property to a particular value for a set of html

elements specified by the selector.• Here is a rule.• It will set the text color to red for all p elements.

p { color: red; }

Selectors• Each rule will affect a set of elements. You can select based on:

– The HTML element name

p, table, body, a, h1– An id value (the id must be unique) as in <table id=‘menu‘>

table#menu or #menu– The class as specified <table class=‘c0‘>

table.c0 or .c0– A nesting of selectors

table#staff td– A list of selectors

p, table#staff td

Selecting by element

body {

background: #fff url(images/dragon.gif) no-repeat bottom right;

font: georgia, sans-serif;

line-height: 1.2;

color: #555753;

}

p {

text-align: justify;

font-size: 1.8em;

}

h1 {

font: italic normal 4.4em georgia, sans-serif;

color: #ee2450;

}

th {

color: #ee2450;

font-style: italic;

font-size: 2.2em;

}

td {

text-align: center;

}

Selecting by id

Finds only the element with this id

#special {

font-style: italic;

color: #660000;

margin-left: 100px;

}

Selecting by class

Finds all elements with this class

.word {

font-size: 1.8em;

text-shadow: 5px 5px 10px blue;

}

.number {

font-size: 1.8em;

text-shadow: 5px 5px 10px #ee2450;

}

Values and what they meanPossible values Meaning

#fff, #555753, red, blue, etc. Colors – 3 character and 6 character hex values RGB. 00 is the lowest, FF is the highest

georgia, sans-serif, mono-space, arial

Font families. Georgia is specific, sans-serif is generic

justify, left, right, center Ways to align text in a box.

#fff url(dragon.png) no-repeat bottom right;

Use white background, anchor an image to the bottom right of the page.

1.4em, 75% Change the size relative to the current size of the font

Demo

Where to find answers