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

2. Adding style

3. CSS Co Ltd

4. Orchid Beauty

5. Oceanscape

6. Separating content from style Content Style

7. 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; }

8. 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

9. 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; }

10. Selecting by id Finds only the element with this id #special { font-style: italic; color: #660000; margin-left: 100px; }

11. 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; }

12. 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

13. Demo

14. Where to find answers