230 likes | 326 Views
HTML / CSS – Basics II. You have the content . Now make it look nice . Remember the Division?. Content. Presentation. Structure. Layout / Design. Back to the HTML- Structure. < html > < head > <title> Some Title</title> </ head > < body > <p> Some < em > content </ em > </p>
E N D
HTML / CSS – Basics II Youhavethecontent. Nowmakeitlooknice.
Rememberthe Division? Content Presentation Structure Layout / Design
Back tothe HTML-Structure <html> <head> <title>Some Title</title> </head> <body> <p>Some<em>content</em></p> </body> </html>
Back tothe HTML-Structure <html> <body> <p> <em>
Back tothe HTML-Structure Cascade down
Syntax h1 { font-size: 16pt; color: green; }
Selector Syntax h1 { font-size: 16pt; color: green; } Declaration
Selector Property Value and Unit Syntax h1 { font-size: 16pt; color: green; } Declaration Property Value
Why “Cascade”? <html> <body> <p> <em> htmlbody p em{ font-size: inherit; font-style: italic; }
Include Styles <link href="styles.css" rel="stylesheet" type="text/css" />
3 Ways of Inclusion • Inline Style • Embedded Style Sheets • External Style Sheets
1. Inline Style <p style="color:red;">I’m red!</p> Very specific, only this very element dw
2. Embedded Style Sheet <style type="text/css"> <!-- p { font-size: 9pt; } --> </style> Only this document dw
3. External Style Sheet <link href="styles.css" rel="stylesheet" type="text/css" /> All the documents;Change once, apply to all (Hooray!) dw
3 Ways of Selection • Type Selectors • Class and ID Selectors • Special Seletion
1. Type Selectors p { color:red; } Triggers the style of an HTML tag dw
2. Class and ID Selectors .red { color:red; } Triggers the style of an HTML tag that has the attribute class="red" Appears as often as you wish dw
2. Class and ID Selectors #menu { margin:0px; } Triggers the style of an HTML tag that has the attribute id="menu" Appears only once dw
3. Special Selection Contextual #menu ul { list-style:none; } Short Hand #content, #footer { width:750px; } Pseudoselectors a:hover { color:green; }
margin The Box Model border padding Content paddingedge contentedge marginedge borderedge