Cascading Style Sheets (CSS)

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

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

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

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

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

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

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

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

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

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

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

- 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

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

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

“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

“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