Cascading Style Sheets - Part 01

Cascading Style Sheets Hatem Mahmoud [email_address]

Example: <p> An <strong> important </strong><font color="#FFFF00"> paragraph </font> . </p> ,[object Object],An important paragraph . ,[object Object]

What is CSS? Layers of a web page: ,[object Object]

Presentation: How the content will appear to a human through a web browser, text reader, etc.

Behavior: Real-time user interaction with the page: validation, sorting, drag-n-drop, etc.

1998 – CSS2 with advanced features: table cell display, sheets could import others, targeted different output media, etc.

Some parts of CSS2 were very difficult to implement, so the W3C decided to revise the specification

References to CSS2 usually mean CSS2.1

CSS2.1 is the latest and current revision of the CSS2 specification

CSS3 specification is still in draft but some parts have been implemented by some browsers

Linking CSS to HTML 1) Inline Styles: Using the style attribute which is supported by every HTML tag: <h1 style="color:red;"> My Headline </h1> ,[object Object]

Linking CSS to HTML 2) Embedded Styles: Using the style tag: <style type="text/css"> h1{ font-family:Verdana } //all h1 tags .warning{ color:red } //tags with this class #footer{ font-size:10px } //tag with this id </style> <h1> My Header </h1> <p class=”warning” > WARNING </p> <div id=”footer” > eSpace 2008 </div> ,[object Object]

Linking CSS to HTML 2) External Styles: Using separate files: mypage.html <head> <link type= "text/css" href= "nice.css" /> </head> nice.css h1{ font-family:Verdana } .warning{ color:red } #footer{ font-size:10px }

Linking CSS to HTML ,[object Object]

Accessibility to different users with different devices.

CSS caching = less bandwidth + fast loading

General Syntax ,[object Object],body{font-family:Verdana; font-size:9pt;}

General Syntax ,[object Object]

Whitespace and line breaks have no semantic value

Comments: /* This is a comment */

Properties ,[object Object],div { color: black; } span { color: #00003D; font-size: 24px; font-family: Verdana, Arial; font-style: italic; font-weight: bold; text-decoration: underline; text-align:justify; ... }

Properties ,[object Object],px = Pixels on the screen em = Current font size ex = Height of lowercase "x" mm = Millimeters cm = Centimeters in = Inches (1 inch = 2,54 centimeters) pt = Points (1 point = 1/72 inches) pc = Picas (1 pica = 12 points)

Properties ,[object Object],div { background-color: Black; } body { background-image: url(logo.gif); background-color: white; background-attachment: fixed; background-position: right top; background-repeat: no-repeat; } body { background: white url(logo.gif) repeat-x fixed right top; }

Selectors 1) Universal selector: * { margin: 0; padding: 0; } 2) Element type selector: span { font-family: Verdana } 3) Class selector: p.big { font-weight: bold; }

Selectors 4) ID selector: #menu { font-size: 22pt; } // unique id 5) Attribute selector: input[type="submit"] { color: blue; }

Selectors ,[object Object],a[href ^ ="http:"] { ... } /* matches a elements whose href attribute value starts with "http:" */ img[src $ =".png"] { ... } /* matches img elements whose src attribute value ends with ".png" */ div[id * ="foo"] { ... } /* matches div elements whose id attribute value contains "foo" */

Selectors ,[object Object],div, p { font-family: Verdana } a img { border: none } ul li ol li { color: blue } #menu a, div li, .note { color: red }

Selectors ,[object Object],ul>li { ... } <ul> <li> <ol> <li> Will not be matched. </li> </ol> </li> </ul>

Selectors ,[object Object],- sibling = has the same parent element - adjacent = immediately following h2+p { ... } <div> <h2> Heading </h2> <p> Will be matched. </p> <p> Will not be matched. </p> </div>

Selectors ,[object Object],- sibling = has the same parent element - general = just following h2~p { ... }

Selectors ,[object Object],<p> Will not be matched. </p> <h2> Heading </h2> <p> Will be matched. </p> <div> <p> Will not be matched. </p> </div> <p> Will be matched. </p>

Pseudo-classes (implicit) a:link { ... } //Normal a:visited { ... } //Visited a:hover { ... } //Mouse hovers a.menu:hover { ... } a:active { ... } // Clicking textarea:focus { ... } li:first-child { ... } :lang(fr) { ... }

Pseudo-classes (implicit) ,[object Object],:nth-child(N) :nth-last-child(N) :nth-of-type(N) :nth-last-of-type(N) :last-child :first-of-type :last-of-type :only-child :only-of-type :root :empty :target :enabled :disabled :checked :not(S)

Pseudo-elements (virtual) ,[object Object],p :first-letter { ... } p :first-line { ... }

Pseudo-elements (virtual) ,[object Object],#breadcrumbs :before { content : "You are here:"; margin-right: 0.5em; } span.centimeters :after { content : "cm"; color: #cccccc; }

Pseudo-elements (virtual) ,[object Object],:: selection { ... } //represents a part of the document that’s been highlighted by the user, including text in editable text fields

The cascade combines the importance, origin, specificity, and source order of the style declarations to determine which declaration should be applied to a given element.

The Cascade ,[object Object],//Normal declaration p {font-size: 1em} //Important declaration p {font-size: 1em !important ;}

The Cascade ,[object Object],1. User agent declarations 2. Normal declarations in user style sheets 3. Normal declarations in author style sheets 4. Important declarations in author style sheets 5. Important declarations in user style sheets

The Cascade ,[object Object],When multiple declarations (with the same importance and origin) try to set the same property to an element, the declaration with the most specific selector will take precedence.

The Cascade ,[object Object],1. Inline styles (highest specificity) 2. Count ID selectors 3. Count class selectors ( .test ), attribute selectors ( [type="submit"] ), and pseudo-classes ( :hover ) 4. Count element type selectors ( div ) and pseudo-elements ( :first-letter )

The Cascade ,[object Object],1. For a given property, find all declarations that apply to a specific element. (user agent, author, user-defined). 2. Sort according to levels of importance and origins. 3. Sort declarations with the same level of importance and origin by selector specificity. 4. If declarations have the same level of importance, origin, and specificity, sort them by the order in which they’re specified

Inheritance ,[object Object],div { font-size: 20px; } <div> <p> My <em> cool </em> paragraph is <a href="#"> here </a>. </p> </div>

But you can enforce it: p { background-image: inherit ; }

Block vs Inline 1) HTML block-level elements: ,[object Object]

Examples: <h1>..<h6> , <p> , <ul> , <ol> , <li> , <table> , <tr> , <th> , <td> , <form> , <select> , <input> , <div> , etc.

Block vs Inline 2) HTML Inline (text-level) elements: ,[object Object]

May contain only text and other inline elements

Examples: <em> , <strong> , <a> , <img> , <abbr> , <span> , etc.

Block vs Inline ,[object Object],#menu li { display: inline ; } #menu a { display: block ; } ,[object Object]

Browser Work 1) Parsing: The browser reads the markup and builds a document object model (DOM) tree of nodes.

Browser Work 2) Rendering: ,[object Object]

Inline elements generate inline boxes

Block elements generate block boxes

CSS Box ,[object Object],[object Object]

Any margin, padding, or border will damage the layout

Cascading Style Sheets - Part 01

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Cascading Style Sheets - Part 01

Similar to Cascading Style Sheets - Part 01 (20)

Recently uploaded

Recently uploaded (20)

Cascading Style Sheets - Part 01