CSS II

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?