css basic rules of css pseudo-class of the a tag apply css to alter an unordered list cascading...
TRANSCRIPT
CSS
Basic rules of CSS
Pseudo-class of the A tag
Apply CSS to alter an unordered list
Cascading Style Sheets (CSS)
CASCADING STYLE SHEET
Background
♦ HTML was intended to deliver data/text content.
♦ Attributes & formatting elements make site maintenance unorderly.
♦ Solution: separate web-content from page-formatting Cascading Style Sheet
Reference : http://www.howtocreate.co.uk/tutorials/css/introduction
(e.g. <font>)
CASCADING STYLE SHEET
Cascading Style Sheet
selector1 { property : value }
selector2 {property1: value1;property2: value2
}
CASCADING STYLE SHEET
Cascading Style Sheet
type (tags)p {. .}table, ul {. .}
class.headings {. .}
id#contentarea {. .}
combinationsp.para2 {. . . }table td .bluecell {. .}#contentarea p {. .}
pseudo-class selectors
Types of selectors Affected elements
<p> </p><table> </table><ul> </ul>
<xx class="headings">…</xx>
<div id=“contentarea">…</div>
CASCADING STYLE SHEET
Cascading Style SheetWhere to add styles?
1. External stylesheets
<link rel="stylesheet" type="text/css" href="css/global.css">
2. Embedded/internal stylesheetbetween <style> . . </style> tag
3. Inline stylesstyle attribute<p style="text-align:center">
CASCADING STYLE SHEET
Cascading Style Sheet
Cascading effect of multiple stylesheets;
Overriding order;
Inheritance;
CASCADING STYLE SHEET
Cascading Style SheetCascading effect:
CSS properties can accumulate or add-up.
p {text-align: center;}
style1.css
p {color: red;}
style2.css
This paragraph is centre-aligned and
in red
CASCADING STYLE SHEET
Cascading Style SheetOverriding order:
- which style wins?
A tag selector is worth 1 point.
A class selector is worth 10 points.
An ID selector is worth 100 points.
An inline style is worth 1000 points
CASCADING STYLE SHEET
Cascading Style SheetOverriding order:
- which style wins?
Selector ID Class Tag Total
p 0 0 1 1
.byline 0 1 0 10
p.byline 0 1 1 11
#banner 1 0 0 100
#banner p 1 0 1 101
#banner .byline 1 1 0 110
CASCADING STYLE SHEET
Cascading Style SheetOverriding order:
- which style wins?
Tiebreaker : Last style wins
<p class="byline">Written by<a class="email" href="mailto:[email protected]">Jean Graine de Pomme</a></p>
<p class="byline">Written by<a class="email" href="mailto:[email protected]">Jean Graine de Pomme</a></p>
p a.email { color: blue; }p.byline a { color: red; }
CASCADING STYLE SHEET
Cascading Style SheetInheritance
CSS properties applied to one tag are passed on to nested tags.
<li> tag inherits styles from
<ul> (the parent tag) where applicable, unless re-styled explicitly otherwise.
LI
UL
CASCADING STYLE SHEET
Cascading Style Sheet
List of properties and values
http://www.eskimo.com/~bloo/indexdot/css/propindex/all.htm
CASCADING STYLE SHEET
Cascading Style Sheet
HTML elements : inline or block?
The BOX model – width, margin, border, padding
CASCADING STYLE SHEET
Cascading Style Sheet
CSS positioning
Positioning types:1. Normal (relative)
2. Float3. Absolute
http://www.brainjar.com/css/positioning/
CASCADING STYLE SHEET
Cascading Style Sheet
CSS positioning
Positioning types:1. Normal (relative)
2. Float3. Absolute
http://www.brainjar.com/css/positioning/
CASCADING STYLE SHEET
Assignment
einstein.html
Albert Einstein
#rightbar
180px