Cascading Style Sheets (css) HTML and css 2012 Brian Davison

Adding style

CSS Co Ltd

Orchid Beauty

Oceanscape

Separating content from style Content Style

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#menu or #menu –The class as specified 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 mean Possible valuesMeaning #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, centerWays 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