1 / 21

CSS II

CSS II. Webdesign og Webkommunikation 02.10.2008 IT University of Copenhagen. Goals of the lecture. Revise the basics of CSS Colors and backgrounds Properties of the box model. Revision of CSS. A single style sheet can be used by many XHTML documents. Style sheet. XHTML-document.

yannis
Download Presentation

CSS 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. CSS II Webdesign og Webkommunikation 02.10.2008 IT University of Copenhagen

  2. Goals of the lecture • Revise the basics of CSS • Colors and backgrounds • Properties of the box model

  3. Revision of CSS • A single style sheet can be used by many XHTML documents Style sheet XHTML-document XHTML-document XHTML-document

  4. Syntax • CSS • HTML selector {property: value;} Declaration <element attribute=“value”> . . . </element>

  5. Adding styles • 3 ways: • Inline: style added within element tag • Embedded: styles added in the head of the HTML document • External style sheet: separate css document containing all styles <p style=“color: red;”>Text</p> <style> p {color: red;} </style> <link rel=“stylesheet” type=“text/css” href=“styles.css” />

  6. Class and id • class: group similar elements • id: identify a unique element <li class=“menuitem”>CV</li> li.menuitem {font-family: Verdana;} <div id=“header”>…</div> <div id=“menu”>…</div> div#header {background-color: red;} #header {background-color: red;}

  7. Naming the colors • RGB color: • R: 241 = #F1 • G: 21 = #15 • B: 109 = #6D h1 { color: #F1156D; color: rgb(241,21,109); color: rgb(95%, 8%, 43%); color: blue; } 17 colors

  8. Foreground color • Color of text p { border: 2px solid; color: #F1156D; }

  9. Background color p { border: 2px solid; color: #F1156D; background-color: silver; padding: 5px; }

  10. Background image p { border: 2px solid; color: #004A51; background-color: silver; padding: 5px; background-image: url(logo_en.gif); }

  11. Background image II p { border: 2px solid; color: #004A51; background-color: silver; padding: 5px; background-image: url(logo_en.gif); background-repeat: repeat-x; }

  12. Background image III • Text should be readable • Background colour should be similar to the colour of the image

  13. Box model margin padding Content area height width Inner edge Border Outer edge

  14. Width and height I <div id=“tall”>We would like to see as much CSS1 as possible. CSS2 should be limited to widely-supported elements only.</div> <div id=“wide”>We would like to see as much CSS1 as possible. CSS2 should be limited to widely-supported elements only.</div> #tall { width: 200px; height: 300px; } #wide { width: 300px; height: 200px; }

  15. Width and height II • Width and height refer to the dimensions of the content area • Total size: • Margins + borders + paddings + content area • Length: • Pixels, ems, percentage… • Percentages refer to parent element h1 { width: 200px; margin: 10px; padding: 10px; }

  16. Padding h1 { padding-top: 5px; padding-right: 10px; padding-bottom: 15px; padding-left: 20px; } h1 { padding: 5px 10px 15px 20px; } top right bottom left TRouBLe 5px 10px 20px 15px

  17. Border • Style • Width • Color div { border-style: dashed; border-width: 10px; border-color: blue; }

  18. Margin h1 { margin-top: 3px; margin-right: 20px; margin-bottom: 3px; margin-left: 20px; } h1 { margin: 3px 20px 3px 20px; }

  19. Margin II: margin collapse • Vertical margins collapse: only the largest value is used • Horizontal margins never collapse h1.top {margin: 10px 20px 10px 20px;} h1.bottom {margin: 20px 20px 20px 20px;} <h1 class=“top”>Lorem ipsum dolor sit amet,</h1> <h1 class=“bottom”>consectetuer adipiscing elit.</h1>

  20. Final advise • Try your website in different browsers

  21. Questions?

More Related