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

CSS II

Digital Media: Communication and design

20.03.2007

IT University of Copenhagen

http://www1.itu.dk/

Digital Media: Communication and Design F2007

Comments

Notepad++ View code CSS validator Plan for the next weeks Feedback

3D04 [email protected]


Goals of the lecture

Revise the basics of CSS Learn the basic properties of the box

model Element positioning List styles


Index

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


Revision of CSS

A single style sheet can be used by many XHTML documents

Style sheet

XHTML-document

XHTML-document

XHTML-document


Syntax

selector {property: value;}

Declaration

CSS

HTML <element attribute=“value”>...</element>


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” />


Class and id

class: group similar elements

id: identify a unique element

p.abstract {font-family: Verdana;}

<p class=“abstract”>This is the abstract of the article</p>

<div id=“header”>…</div><div id=“menu”>…</div>

div#header {background-color: red;}#header {background-color: red;}


Index



Box modelmargin

padding

Content area

width

height

Border

Outer edge

Inner edge


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;

}


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


Margin

h1 {margin-top: 3px;margin-right: 20px;margin-bottom: 3px;margin-left: 20px;

}

h1 {margin: 3px 20px 3px 20px;

}


Margin II: margin collapse

<h1 class=“top”>Lorem ipsum dolor sit amet,</h1><h1 class=“bottom”>consectetuer adipiscing elit.</h1>

h1.top {margin: 10px 20px 10px 20px;

}h1.bottom {

margin: 20px 20px 20px 20px;}


Border

Style Width Color

div {border-style: dashed;border-width: 10px;border-color: blue;

}


Padding

h1 {padding: 5px 20px 10px 20px;

}

h1 {padding-top: 5px;padding-right: 10px;padding-bottom: 15px;padding-left: 20px;

}

5px

10px

15px20px


Index



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 = #F1G: 21 = #15B: 109 = #6D

17 colors


Background

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


Background image

div {background-image: url(image.gif);}

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


Background image II

Text should be readable

Background colour should be similar to the colour of the image


Index



Floating and Positioning

The normal flow:Block elements laid from top to bottomText elements laid from left to right, flowing in

the block elementObjects in the normal flow influence

surrounding objectsFloating and positioning change the normal

flow


Floating image

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

img.right {float:right; margin: 10px;}


Floating text

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

span.sidenote {float:right; margin: 10px;background-color: #999;width:200px;}


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


Clearing

img {float: left;}h2 {clear: left;}


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


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%;}


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;

}


Positioning IV: z-indexp {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…


Absolute positioning

Relative to the edges of the containing block using offset properties

Object is removed from the document flow


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>

p1

p3

10px10px

10px 10px

10px

30px

Viewport


Fixed positioning

Relative to the edges of the viewport (browser window)

Object is removed from the document flow


Fixed positioning II

p, h1 {margin-left: 150px;}

ul {position:fixed;top:0px;left:0px;}


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


Index



Lists I

ul {list-style-type: disc | circle | square...}

ul {list-style-image: url(mybullet.gif);}

Style of the marker:

Image marker:


Lists II: Navigation barul#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<


Index



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


Final advise

Try your website in different browsers


Questions?

Documents

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