1 / 43

CSS II

CSS II. Digital Media: Communication and design 20.03.2007 IT University of Copenhagen. Comments. Notepad++ View code CSS validator Plan for the next weeks Feedback 3D04 javier@itu.dk. Goals of the lecture. Revise the basics of CSS Learn the basic properties of the box model

lanza
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 Digital Media: Communication and design 20.03.2007 IT University of Copenhagen

  2. Comments • Notepad++ • View code • CSS validator • Plan for the next weeks • Feedback • 3D04 • javier@itu.dk

  3. Goals of the lecture • Revise the basics of CSS • Learn the basic properties of the box model • Element positioning • List styles

  4. Index • Revision of CSS • Box model • Colour and background • Floating and positioning • Lists • CSS technique: centering the page

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

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

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

  8. Class and id • class: group similar elements • id: identify a unique element <p class=“abstract”>This is the abstract of the article</p> p.abstract {font-family: Verdana;} <div id=“header”>…</div> <div id=“menu”>…</div> div#header {background-color: red;} #header {background-color: red;}

  9. Index • Revision of CSS • Box model • Colour and background • Floating and positioning • Lists • CSS technique: centering the page

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

  11. 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; }

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

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

  14. Margin II: margin 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>

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

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

  17. Index • Revision of CSS • Box model • Colour and background • Floating and positioning • Lists • CSS technique: centering the page

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

  19. Background p {padding: 10px;} p.a {background-color: red;} p.b {background-color: blue;} p.c {background-color: green;}

  20. Background image div {background-image: url(image.gif);} div {background-image: url(image.gif); background-repeat: no-repeat; background-position: center;}

  21. Background image II • Text should be readable • Background colour should be similar to the colour of the image

  22. Index • Revision of CSS • Box model • Colour and background • Floating and positioning • Lists • CSS technique: centering the page

  23. Floating and Positioning • The normal flow: • Block elements laid from top to bottom • Text elements laid from left to right, flowing in the block element • Objects in the normal flow influence surrounding objects • Floating and positioning change the normal flow

  24. Floating image img.right {float:right; margin: 10px;} <p><img src=“cat.jpg” alt=“” class=“right” />Proca, rex Albanorum, duos filios Numitorem et Amulium habuit. Numitori, qui natu major erat, regnum legavit. Sed Amulio, ira incitatus, fratrem suo regno expulit…</p>

  25. Floating text span.sidenote {float:right; margin: 10px; background-color: #999; width:200px;} <p><span class=“sidenote”>This is a sidenote on the right explaining some latin…</span>Proca, rex Albanorum, duos filios Numitorem et Amulium habuit…</p>

  26. Floating various elements • Elements floated in the same direction: • each object will move in that direction until it reaches the edge of the containing block • if there is not enough room, the second object will move down

  27. Clearing img {float: left;} h2 {clear: left;}

  28. Positioning • 4 types: • static: normal way, objects are rendered in order • relative: moves the element box preserving the original space • absolute: object is removed from the flow and positioned relative to their containing block • fixed: similar to absolute, but object is positioned relative to the viewport

  29. Positioning II div {position: absolute; width: 400px; height: 250px; background-color: #CCC; } img {position: absolute; bottom: 0%; left: 0%;} img {position: absolute; top: 100%; left: 0%;}

  30. Positioning III div.a {position: absolute; width: 300px; height: 120px; background-color: #CCC; } div.b {position: absolute; top:20px; bottom: 40px; left: 50px; right: 30px; background-color: #666; }

  31. Positioning IV: z-index p {position: absolute; padding: 5px; color: black;} #p1 {z-index: 19; background-color: red;} #p2 {z-index: 1; background-color: blue;} span.b {z-index: 72; background-color: green;} <p id=“p1”>Paragraph 1, z-index=19</p> <p id=“p2”>Paragraph 2, z-index=1. <span class=“b”>This is a span with z-index 72</span> And now some more text…

  32. Absolute positioning • Relative to the edges of the containing block using offset properties • Object is removed from the document flow

  33. Absolute positioning II #one {position: absolute; top: 10px; left: 10px;} #two {position: absolute; top: 30px; left: 10px;} #three {position: absolute; top: 10px; left: 10px;} <p id=“one”>p1</p> <div id=“two”> <p id=“three”>p3</p> </div> 10px 10px p1 30px 10px 10px p3 10px Viewport

  34. Fixed positioning • Relative to the edges of the viewport (browser window) • Object is removed from the document flow

  35. Fixed positioning II p, h1 {margin-left: 150px;} ul {position:fixed; top:0px; left:0px;}

  36. Relative positioning • Relative to the object’s initial position in the normal flow • The original space in the document flow is preserved em {position: relative; top: -36px; right: -36px; background-color: #ccc;}

  37. Index • Revision of CSS • Box model • Colour and background • Floating and positioning • Lists • CSS technique: centering the page

  38. Lists I Style of the marker: ul {list-style-type: disc | circle | square...} Image marker: ul {list-style-image: url(mybullet.gif);}

  39. Lists II: Navigation bar ul#navigation { list-style-type: none; margin: 0px; padding: 0px; } ul#navigation li { display: inline; } <ul id=“nav”> <li>Home |</li> <li>CV |</li> <li>Links |</li> <li>Photos</li> </ul<

  40. Index • Revision of CSS • Box model • Colour and background • Floating and positioning • Lists • CSS technique: centering the page

  41. Centering a page div#page { width: 600px; margin-left: auto; margin-right: auto; } Might not work in IE6 div#page { width: 600px; position: absolute; left: 50%; margin-left: -300px; } Works always

  42. Final advise • Try your website in different browsers

  43. Questions?

More Related