CSS Basic rules of CSS Pseudo-class of the A tag Apply CSS to alter an unordered list Cascading...
-
Upload
elisabeth-george -
Category
Documents
-
view
218 -
download
0
Transcript of CSS Basic rules of CSS Pseudo-class of the A tag Apply CSS to alter an unordered list Cascading...
![Page 1: CSS Basic rules of CSS Pseudo-class of the A tag Apply CSS to alter an unordered list Cascading Style Sheets (CSS)](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf7c1a28abf838c8402a/html5/thumbnails/1.jpg)
CSS
Basic rules of CSS
Pseudo-class of the A tag
Apply CSS to alter an unordered list
Cascading Style Sheets (CSS)
![Page 2: CSS Basic rules of CSS Pseudo-class of the A tag Apply CSS to alter an unordered list Cascading Style Sheets (CSS)](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf7c1a28abf838c8402a/html5/thumbnails/2.jpg)
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>)
![Page 3: CSS Basic rules of CSS Pseudo-class of the A tag Apply CSS to alter an unordered list Cascading Style Sheets (CSS)](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf7c1a28abf838c8402a/html5/thumbnails/3.jpg)
CASCADING STYLE SHEET
Cascading Style Sheet
selector1 { property : value }
selector2 {property1: value1;property2: value2
}
![Page 4: CSS Basic rules of CSS Pseudo-class of the A tag Apply CSS to alter an unordered list Cascading Style Sheets (CSS)](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf7c1a28abf838c8402a/html5/thumbnails/4.jpg)
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>
![Page 5: CSS Basic rules of CSS Pseudo-class of the A tag Apply CSS to alter an unordered list Cascading Style Sheets (CSS)](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf7c1a28abf838c8402a/html5/thumbnails/5.jpg)
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">
![Page 6: CSS Basic rules of CSS Pseudo-class of the A tag Apply CSS to alter an unordered list Cascading Style Sheets (CSS)](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf7c1a28abf838c8402a/html5/thumbnails/6.jpg)
CASCADING STYLE SHEET
Cascading Style Sheet
Cascading effect of multiple stylesheets;
Overriding order;
Inheritance;
![Page 7: CSS Basic rules of CSS Pseudo-class of the A tag Apply CSS to alter an unordered list Cascading Style Sheets (CSS)](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf7c1a28abf838c8402a/html5/thumbnails/7.jpg)
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
![Page 8: CSS Basic rules of CSS Pseudo-class of the A tag Apply CSS to alter an unordered list Cascading Style Sheets (CSS)](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf7c1a28abf838c8402a/html5/thumbnails/8.jpg)
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
![Page 9: CSS Basic rules of CSS Pseudo-class of the A tag Apply CSS to alter an unordered list Cascading Style Sheets (CSS)](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf7c1a28abf838c8402a/html5/thumbnails/9.jpg)
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
![Page 10: CSS Basic rules of CSS Pseudo-class of the A tag Apply CSS to alter an unordered list Cascading Style Sheets (CSS)](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf7c1a28abf838c8402a/html5/thumbnails/10.jpg)
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; }
![Page 11: CSS Basic rules of CSS Pseudo-class of the A tag Apply CSS to alter an unordered list Cascading Style Sheets (CSS)](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf7c1a28abf838c8402a/html5/thumbnails/11.jpg)
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
![Page 12: CSS Basic rules of CSS Pseudo-class of the A tag Apply CSS to alter an unordered list Cascading Style Sheets (CSS)](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf7c1a28abf838c8402a/html5/thumbnails/12.jpg)
CASCADING STYLE SHEET
Cascading Style Sheet
List of properties and values
http://www.eskimo.com/~bloo/indexdot/css/propindex/all.htm
![Page 13: CSS Basic rules of CSS Pseudo-class of the A tag Apply CSS to alter an unordered list Cascading Style Sheets (CSS)](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf7c1a28abf838c8402a/html5/thumbnails/13.jpg)
CASCADING STYLE SHEET
Cascading Style Sheet
HTML elements : inline or block?
The BOX model – width, margin, border, padding
![Page 14: CSS Basic rules of CSS Pseudo-class of the A tag Apply CSS to alter an unordered list Cascading Style Sheets (CSS)](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf7c1a28abf838c8402a/html5/thumbnails/14.jpg)
CASCADING STYLE SHEET
Cascading Style Sheet
CSS positioning
Positioning types:1. Normal (relative)
2. Float3. Absolute
http://www.brainjar.com/css/positioning/
![Page 15: CSS Basic rules of CSS Pseudo-class of the A tag Apply CSS to alter an unordered list Cascading Style Sheets (CSS)](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf7c1a28abf838c8402a/html5/thumbnails/15.jpg)
CASCADING STYLE SHEET
Cascading Style Sheet
CSS positioning
Positioning types:1. Normal (relative)
2. Float3. Absolute
http://www.brainjar.com/css/positioning/
![Page 16: CSS Basic rules of CSS Pseudo-class of the A tag Apply CSS to alter an unordered list Cascading Style Sheets (CSS)](https://reader030.fdocuments.in/reader030/viewer/2022013101/5697bf7c1a28abf838c8402a/html5/thumbnails/16.jpg)
CASCADING STYLE SHEET
Assignment
einstein.html
Albert Einstein
#rightbar
180px