![Page 1: 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](https://reader031.vdocuments.site/reader031/viewer/2022013106/5697bf7c1a28abf838c84033/html5/thumbnails/1.jpg)
Cascading Style Sheets(CSS)
![Page 2: 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](https://reader031.vdocuments.site/reader031/viewer/2022013106/5697bf7c1a28abf838c84033/html5/thumbnails/2.jpg)
A style sheet is a document which describes the presentation semantics of a document written in a mark-up language such as HTML
![Page 3: 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](https://reader031.vdocuments.site/reader031/viewer/2022013106/5697bf7c1a28abf838c84033/html5/thumbnails/3.jpg)
To separate structure and content from appearance
Create consistent appearance
Ease of maintenance
Increase accessibility
Apply additional effects
Reduce web page file size
![Page 4: 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](https://reader031.vdocuments.site/reader031/viewer/2022013106/5697bf7c1a28abf838c84033/html5/thumbnails/4.jpg)
Create one style sheet for whole website
Use link tag to use for several web pages
Make changes in one file
![Page 5: 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](https://reader031.vdocuments.site/reader031/viewer/2022013106/5697bf7c1a28abf838c84033/html5/thumbnails/5.jpg)
User can override your style sheet
You can create different style sheets for alternative devices
![Page 6: 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](https://reader031.vdocuments.site/reader031/viewer/2022013106/5697bf7c1a28abf838c84033/html5/thumbnails/6.jpg)
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
![Page 7: 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](https://reader031.vdocuments.site/reader031/viewer/2022013106/5697bf7c1a28abf838c84033/html5/thumbnails/7.jpg)
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">
![Page 8: 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](https://reader031.vdocuments.site/reader031/viewer/2022013106/5697bf7c1a28abf838c84033/html5/thumbnails/8.jpg)
<H1 style="color: maroon">
Similar to adding attributes to html tags
Disadvantages- decreased accessibility- increased file size- harder to update
![Page 9: 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](https://reader031.vdocuments.site/reader031/viewer/2022013106/5697bf7c1a28abf838c84033/html5/thumbnails/9.jpg)
<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
![Page 10: 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](https://reader031.vdocuments.site/reader031/viewer/2022013106/5697bf7c1a28abf838c84033/html5/thumbnails/10.jpg)
<link rel="stylesheet" type="text/css" href="style.css">
Save rules in external file
Advantages- ease of maintenance- use less disk space - increase accessibility
![Page 11: 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](https://reader031.vdocuments.site/reader031/viewer/2022013106/5697bf7c1a28abf838c84033/html5/thumbnails/11.jpg)
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; }
![Page 12: 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](https://reader031.vdocuments.site/reader031/viewer/2022013106/5697bf7c1a28abf838c84033/html5/thumbnails/12.jpg)
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>
![Page 13: 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](https://reader031.vdocuments.site/reader031/viewer/2022013106/5697bf7c1a28abf838c84033/html5/thumbnails/13.jpg)
- 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
![Page 14: 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](https://reader031.vdocuments.site/reader031/viewer/2022013106/5697bf7c1a28abf838c84033/html5/thumbnails/14.jpg)
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>
![Page 15: 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](https://reader031.vdocuments.site/reader031/viewer/2022013106/5697bf7c1a28abf838c84033/html5/thumbnails/15.jpg)
Division Tags
<div> ……<div>
Give each div tag an id:
<div id=“div_id”> ……</div>
Referenced in CSS with #:
#div_id{….}
![Page 16: 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](https://reader031.vdocuments.site/reader031/viewer/2022013106/5697bf7c1a28abf838c84033/html5/thumbnails/16.jpg)
“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
![Page 17: 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](https://reader031.vdocuments.site/reader031/viewer/2022013106/5697bf7c1a28abf838c84033/html5/thumbnails/17.jpg)
“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