cascading style sheets (css). a style sheet is a document which describes the presentation semantics...
TRANSCRIPT
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