1 / 23

HTML / CSS – Basics II

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>

lavada
Download Presentation

HTML / CSS – Basics II

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML / CSS – Basics II Youhavethecontent. Nowmakeitlooknice.

  2. Rememberthe Division? Content Presentation Structure Layout / Design

  3. Back tothe HTML-Structure <html> <head> <title>Some Title</title> </head> <body> <p>Some<em>content</em></p> </body> </html>

  4. Back tothe HTML-Structure <html>  <body>  <p>  <em>

  5. Cascade down

  6. Back tothe HTML-Structure Cascade down

  7. Syntax h1 { font-size: 16pt; color: green; }

  8. Selector Syntax h1 { font-size: 16pt; color: green; } Declaration

  9. Selector Property Value and Unit Syntax h1 { font-size: 16pt; color: green; } Declaration Property Value

  10. Why “Cascade”? <html>  <body>  <p>  <em> htmlbody p em{ font-size: inherit; font-style: italic; }

  11. Include Styles <link href="styles.css" rel="stylesheet" type="text/css" />

  12. 3 Ways of Inclusion • Inline Style • Embedded Style Sheets • External Style Sheets

  13. 1. Inline Style <p style="color:red;">I’m red!</p> Very specific, only this very element dw

  14. 2. Embedded Style Sheet <style type="text/css"> <!-- p { font-size: 9pt; } --> </style> Only this document dw

  15. 3. External Style Sheet <link href="styles.css" rel="stylesheet" type="text/css" /> All the documents;Change once, apply to all (Hooray!) dw

  16. 3 Ways of Selection • Type Selectors • Class and ID Selectors • Special Seletion

  17. 1. Type Selectors p { color:red; } Triggers the style of an HTML tag dw

  18. 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

  19. 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

  20. 3. Special Selection Contextual #menu ul { list-style:none; } Short Hand #content, #footer { width:750px; } Pseudoselectors a:hover { color:green; }

  21. margin The Box Model border padding Content paddingedge contentedge marginedge borderedge

More Related