1. Cascading Style Sheets (CSS)

2. A style sheet is a document which describes the presentation semantics of a document written in a mark-up language such as HTML

3. To separate structure and content from appearance Create consistent appearance Ease of maintenance Increase accessibility Apply additional effects Reduce web page file size

4. Create one style sheet for whole website Use link tag to use for several web pages Make changes in one file

5. User can override your style sheet You can create different style sheets for alternative devices

6. Add hover effect to links Remove underlines on links Add horizontal rule to headings Use instead of a table for a border Control paragraph, line, letter spacing Use instead of tables for layout

7. In-line - add to HTML tag – As we have been doing Embedded style sheets – Use style tags in the head of document External style sheets – Link to external file

8. Similar to adding attributes to html tags Disadvantages - decreased accessibility - increased file size - harder to update

9. h1 {font-family: arial, sans-serif;} - Put rules between style tags - Put in head section - Add html comment tags - Use when single document has unique style

10. Save rules in external file Advantages - ease of maintenance - use less disk space - increase accessibility

11. name_of_tag { property: value(s) ; …} H1 { font-family: Times, serif; } --------------------------------------------------------------------- Multiple properties on one rule: H1 {color: black; font-weight: bold;} Group tags: H1, H2, H3 { font-family: Times, serif; }

12. To create rules that can be applied to a variety of html tags.bar {color: maroon; font-size: smaller; background-color: yellow;} text link

13. - Add hover effect to links - Remove underlines on links - Add horizontal rule to headings - Control paragraph, line, letter spacing - Use instead of a table for a border - Use instead of tables for layout

14. a:link {.... } a:visited {.... } a:hover {.... } a:active {.... } a.thislink:link {.... } a. thislink:visited {.... } a.thislink:hover {.... } a.thislink:active {.... } Click me Click me

15. Division Tags …… Give each div tag an id: …… Referenced in CSS with #: #div_id{….}

16. “position:relative” Position supplied by the margin tag... #div_id { float:left; position:relative; margin: 0px 0px 0px 0px; } TOP, RIGHT, BOTTOM, LEFT CLEAR FLOATS (Line break) See example

17. “position:absolute” Position supplied top & left attributes... #div_id { position:absolute; top: 10px; left: 20px; } See example provided Will become useful in our Lunar Lander Game