CSS II Digital Media: Communication and design IT University of Copenhagen

Digital Media: Communication and DesignF2007 Comments Notepad++ View code CSS validator Plan for the next weeks Feedback  3D04 

Digital Media: Communication and DesignF2007 Goals of the lecture Revise the basics of CSS Learn the basic properties of the box model Element positioning List styles

Digital Media: Communication and DesignF2007 Index Revision of CSS Box model Colour and background Floating and positioning Lists CSS technique: centering the page

Digital Media: Communication and DesignF2007 Revision of CSS A single style sheet can be used by many XHTML documents Style sheet XHTML- document

Digital Media: Communication and DesignF2007 Syntax selector {property: value;} Declaration CSS HTML.

Digital Media: Communication and DesignF2007 Adding styles 3 ways:  Inline: style added within element tag …  Embedded: styles added in the head of the HTML document selector {property: value;}  External style sheet: separate document containing all styles

Digital Media: Communication and DesignF2007 Class and id class: group similar elements id: identify a unique element p.abstract {font-family: Verdana;} This is the abstract of the article … div#header {background-color: red;} #header {background-color: red;}

Digital Media: Communication and DesignF2007 Index Revision of CSS Box model Colour and background Floating and positioning Lists CSS technique: centering the page

Digital Media: Communication and DesignF2007 Box model margin padding Content area width height Border Outer edge Inner edge

Digital Media: Communication and DesignF2007 Width and height I We would like to see as much CSS1 as possible. CSS2 should be limited to widely-supported elements only. #tall { width: 200px; height: 300px; } #wide { width: 300px; height: 200px; }

Digital Media: Communication and DesignF2007 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

Digital Media: Communication and DesignF2007 Margin h1 { margin-top: 3px; margin-right: 20px; margin-bottom: 3px; margin-left: 20px; } h1 { margin: 3px 20px 3px 20px; }

Digital Media: Communication and DesignF2007 Margin II: margin collapse Lorem ipsum dolor sit amet, consectetuer adipiscing elit. h1.top { margin: 10px 20px 10px 20px; } h1.bottom { margin: 20px 20px 20px 20px; }

Digital Media: Communication and DesignF2007 Border Style Width Color div { border-style: dashed; border-width: 10px; border-color: blue; }

Digital Media: Communication and DesignF2007 Padding h1 { padding: 5px 20px 10px 20px; } h1 { padding-top: 5px; padding-right: 10px; padding-bottom: 15px; padding-left: 20px; } 5px 10px 15px20px

Digital Media: Communication and DesignF2007 Index Revision of CSS Box model Colour and background Floating and positioning Lists CSS technique: centering the page

Digital Media: Communication and DesignF2007 h1 { color: #F1156D; color: rgb(241,21,109); color: rgb(94.51%, 8.23%, 42.75%); color: blue; } Naming the colors RGB color:  R: 241 = #F1  G: 21 = #15  B: 109 = #6D 17 colors

Digital Media: Communication and DesignF2007 Background p {padding: 10px;} p.a {background-color: red;} p.b {background-color: blue;} p.c {background-color: green;}

Digital Media: Communication and DesignF2007 Background image div {background-image: url(image.gif);} div {background-image: url(image.gif); background-repeat: no-repeat; background-position: center;}

Digital Media: Communication and DesignF2007 Background image II Text should be readable Background colour should be similar to the colour of the image

Digital Media: Communication and DesignF2007 Index Revision of CSS Box model Colour and background Floating and positioning Lists CSS technique: centering the page

Digital Media: Communication and DesignF2007 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

Digital Media: Communication and DesignF2007 Floating image Proca, rex Albanorum, duos filios Numitorem et Amulium habuit. Numitori, qui natu major erat, regnum legavit. Sed Amulio, ira incitatus, fratrem suo regno expulit… img.right {float:right; margin: 10px;}

Digital Media: Communication and DesignF2007 Floating text This is a sidenote on the right explaining some latin… Proca, rex Albanorum, duos filios Numitorem et Amulium habuit… span.sidenote {float:right; margin: 10px; background-color: #999; width:200px;}

Digital Media: Communication and DesignF2007 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

Digital Media: Communication and DesignF2007 Clearing img {float: left;} h2 {clear: left;}

Digital Media: Communication and DesignF2007 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

Digital Media: Communication and DesignF2007 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%;}

Digital Media: Communication and DesignF2007 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; }

Digital Media: Communication and DesignF2007 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;} Paragraph 1, z-index=19 Paragraph 2, z-index=1. This is a span with z-index 72 And now some more text…

Digital Media: Communication and DesignF2007 Absolute positioning Relative to the edges of the containing block using offset properties Object is removed from the document flow

Digital Media: Communication and DesignF2007 Absolute positioning II #one {position: absolute; top: 10px; left: 10px;} #two {position: absolute; top: 30px; left: 10px;} #three {position: absolute; top: 10px; left: 10px;} p1 p3 p1 p3 10px 30px Viewport

Digital Media: Communication and DesignF2007 Fixed positioning Relative to the edges of the viewport (browser window) Object is removed from the document flow

Digital Media: Communication and DesignF2007 Fixed positioning II p, h1 {margin-left: 150px;} ul {position:fixed; top:0px; left:0px;}

Digital Media: Communication and DesignF2007 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;}

Digital Media: Communication and DesignF2007 Index Revision of CSS Box model Colour and background Floating and positioning Lists CSS technique: centering the page

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

Digital Media: Communication and DesignF2007 Lists II: Navigation bar ul#navigation { list-style-type: none; margin: 0px; padding: 0px; } ul#navigation li { display: inline; } Home | CV | Links | Photos </ul<

Digital Media: Communication and DesignF2007 Index Revision of CSS Box model Colour and background Floating and positioning Lists CSS technique: centering the page

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

Digital Media: Communication and DesignF2007 Final advise Try your website in different browsers

Digital Media: Communication and DesignF2007 Questions?