cascading style sheets (css). a style sheet is a document which describes the presentation semantics...

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<H1 style="color: maroon">

Embedded style sheets – Use style tags in the head of document<style> </style>

External style sheets – Link to external file<link href="style.css">

<H1 style="color: maroon">

Similar to adding attributes to html tags

Disadvantages- decreased accessibility- increased file size- harder to update

<style>

h1 {font-family: arial, sans-serif;}

</style>

- Put rules between style tags

- Put in head section

- Add html comment tags

- Use when single document has unique style

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

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

<style>.bar {color: maroon; font-size: smaller; background-color: yellow;}</style>

<p class="bar">text</p>

<p><a href="url.htm" class="bar">link</a> </p>

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

<a href=“xxx.htm”>Click me</a>

<a href=“xxx.htm” class=“thislink”>Click me</a>

Division Tags

<div> ……<div>

Give each div tag an id:

<div id=“div_id”> ……</div>

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