website construction - css basics€¦ · css basics frédérichaziza department of computer...

Website ConstructionCSS Basics

Frédéric Haziza <[email protected]>

Department of Computer Systems

Uppsala University

Summer 2009

Syntax Box Model Units Sprites Global Reset

Outline

1 CSS syntax

2 CSS box model

3 CSS dimensions and units

4 CSS sprites

5 CSS global reset

3 WebConst’09 | Website Construction (CSS Basics)


HTML describes documentsCSS displays documents



Cascading Style Sheet

multiple definitions cascade into one



Rule syntax

selector { property : value; }

HTML<h1> Header title </h1>

CSSh1 { color: green; }



Syntax – My prefered formatting

s e l e c t o r {p r o p e r t y : v a l u e ;p r o p e r t y : v a l u e ;

}

CSS

h1 {c o l o r : g r een ;font−s i z e : 20 pt ;

}



Syntax – Grouping

CSS

h1 , h2 , h3 , h4 , h5 {

c o l o r : g r een ;font−s i z e : 20 pt ;

}



Syntax

Comments: /* */

CSS

/∗ Rule f o r a l l h eade r s ∗/h1 , h2 , h3 , h4 , h5 {

c o l o r : g r een ;font−s i z e : 20 pt ;/∗ font−we ight : bo ld ; ∗/

}



Syntax – Identifier

I d e n t i f i e r : #id−name

HTML

<h1 i d =’ ’ news ’ ’> News heade r </h1>

CSS

#news {c o l o r : r ed ;font−v a r i a n t : sma l l−caps ;

}




CSS

/∗ Rule f o r a l l h eade r s ∗/h1 , h2 , h3 , h4 , h5 {

c o l o r : g r een ;font−s i z e : 20 pt ;

}

#news {c o l o r : r ed ;

}




C l a s s : s e l e c t o r . c l a s s−nameor . c l a s s−name

HTML

<h1 c l a s s =’ ’ important ’ ’> News heade r </h1>

CSS

h1 . impor tan t {font−v a r i a n t : sma l l−caps ;

}



Syntax – Class

HTML

<h1 c l a s s =’ ’ important ’ ’> News heade r </h1>

CSS

h1 , h2 , h3 , h4 , h5 {c o l o r : g r een ;font−s i z e : 20 pt ;

}

#news { c o l o r : r ed ; }

h1 . impor tan t { font−v a r i a n t : sma l l−caps ; }



Syntax – Class combination

HTML

<h1 i d =’ ’ news ’ ’ c l a s s =’ ’ impor tan t s p e c i a l ’ ’>News heade r

</h1><p c l a s s =’ ’ s p e c i a l ’ ’> b l a b l a </p><p c l a s s =’ ’ important ’ ’> b l a b l a </p>

CSS

h1 , h2 , h3 { c o l o r : g r een ; font−s i z e : 20 pt ; }

#news { c o l o r : r ed ; }

h1 . impor tan t { font−v a r i a n t : sma l l−caps ; }

. s p e c i a l { font−s t y l e : i t a l i c ; }



Syntax – Pseudo-class

HTML

<a h r e f =’ ’ h t tp : //www. goog l e . com ’ ’c l a s s =’ ’ e x t e r n a l ’ ’>

V i s i t Google</a>

CSS

a { tex t−d e c o r a t i o n : none ; c o l o r : b l u e ; }

a : hove r { t ex t−d e c o r a t i o n : u n d e r l i n e ;c o l o r : r ed ; }

a . e x t e r n a l : hove r { c o l o r : g r een ; }

:focus, :active, :link, :visited, :first-child, :lang15 WebConst’09 | Website Construction (CSS Basics)


Pseudo-classes for anchor links

a : l i n k { c o l o r : r ed ; } /∗ u n v i s i t e d l i n k ∗/a : v i s i t e d { c o l o r : g r een ; } /∗ v i s i t e d l i n k ∗/a : hove r { c o l o r : y e l l ow ; } /∗ mouse ove r l i n k ∗/a : a c t i v e { c o l o r : b l u e ; } /∗ s e l e c t e d l i n k ∗/



Syntax – Descendance

HTML

<h1><span>News</ span> header

</h1><p>

foo <span>bar</ span></p>

CSS

h1 { font−s i z e : 20 pt ; }

h1 span { background−c o l o r : y e l l ow ; }




<d i v i d="main"><u l>

< l i> <a h r e f="/"> Home </a> </ l i>< l i> <a h r e f=" b l a0 ">Item 1</a> </ l i>< l i c l a s s=" a c t i v e "> <a h r e f=" b l a1 ">Item 2</a> </ l i>< l i> <a h r e f=" b l a2 ">Item 3</a> </ l i>< l i> <a h r e f=" b l a3 ">Item 4</a> </ l i>

</ u l></ d i v><d i v c l a s s =’ ’ other ’ ’> <a h r e f =’ ’ foo ’ ’> bar </a> </ d i v>

CSS

#main u l { t ex t−a l i g n : l e f t ; l i s t −s t y l e : c i r c l e i n s i d e none ; }#main u l l i a { font−s i z e : 10 pt ; t ex t−d e c o r a t i o n : none ;

font−we ight : bo ld ; c o l o r : #F0E5CF ; }#main u l l i a : hove r { t ex t−d e c o r a t i o n : u n d e r l i n e ; }#main u l l i . a c t i v e a { c o l o r : r ed ; }#main u l l i . a c t i v e a : hove r { c o l o r : r ed ; } /∗ r e s e t ∗/

d i v . o t h e r a { tex t−d e c o r a t i o n : u n d e r l i n e ; }




<u l i d="main">< l i> <a h r e f="/"> Home </a> </ l i>< l i> <a h r e f=" b l a0 ">Item 1</a> </ l i>< l i c l a s s=" a c t i v e "> <a h r e f=" b l a1 ">Item 2</a> </ l i>< l i> <a h r e f=" b l a2 ">Item 3</a> </ l i>< l i> <a h r e f=" b l a3 ">Item 4</a> </ l i>

</ u l>

CSS

#main { tex t−a l i g n : l e f t ; l i s t −s t y l e : c i r c l e i n s i d e none ; }#main l i a { font−s i z e : 10 pt ; t ex t−d e c o r a t i o n : none ;

font−we ight : bo ld ; c o l o r : #F0E5CF ; }#main l i a : hove r { tex t−d e c o r a t i o n : u n d e r l i n e ; }#main l i . a c t i v e a { c o l o r : r ed ; }#main l i . a c t i v e a : hove r { c o l o r : r ed ; } /∗ r e s e t ∗/

u l#main { tex t−a l i g n : l e f t ; l i s t −s t y l e : c i r c l e i n s i d e none ; }u l#main l i a { font−s i z e : 10 pt ; t ex t−d e c o r a t i o n : none ;

font−we ight : bo ld ; c o l o r : #F0E5CF ; }u l#main l i a : hove r { t ex t−d e c o r a t i o n : u n d e r l i n e ; }u l#main l i . a c t i v e a { c o l o r : r ed ; }u l#main l i . a c t i v e a : hove r { c o l o r : r ed ; } /∗ r e s e t ∗/



Syntax – Mixture

HTML

<h1 c l a s s =’ ’ impor tan t s p e c i a l ’ ’><span c l a s s =’ ’ today ’ ’>News</ span> header

</h1><p c l a s s =’ ’ s p e c i a l ’ ’>

foo <span c l a s s =’ ’ h i g h l i g h t ’ ’>bar</ span></p><d i v i d =’ ’ f o o t e r ’ ’> . . . </ d i v>

CSS

h1 span { background−c o l o r : b l u e ; }

p . s p e c i a l span . h i g h l i g h t : hove r {background−c o l o r : y e l l ow ;

}

#f o o t e r { background−c o l o r : b l a c k ; c o l o r : wh i t e ; }



Syntax – Other selectors

Universal sector*

CSS

∗ { c o l o r : b l a c k ; }d i v . g r e e t i n g s ∗ { c o l o r : g r een ; }

Not good to use, heavy on the rendering engine

There are other selectors in CSS3,but they don’t have wide-spread use (yet).



Note on inheritance

Some rules apply because they come from the parent.

Equivalently:Some rules of an element descend to their children.

Example: the font rule.



4 – Browser defaultsEvery browser has a default style for each HTML element

3 – External style sheet (in the head tag)<link rel="stylesheet" type="text/css" href="style. css" />

2 – Internal style (in the head tag)<style type="text/css">h1 { color : red ; } </style>

1 – Inline declaration (in the HTML markup)<h1 style="color:red ;">header </h1>



Outline

1 CSS syntax

2 CSS box model


4 CSS sprites

5 CSS global reset



Margin

BorderPadding

Content



Margin

BorderPadding

Content

width: 100px;height: 50px;

padding-top: 10px;padding-right: 10px;padding-bottom: 10px;padding-left: 10px;

border-color: blue;border-style: dotted;border-width: 10px;

margin-top: 10px;margin-right: 10px;margin-bottom: 10px;margin-left: 10px;



margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;

CSS shorthands

Clockwise

margin: 10px 20px 30px 40px;top right bottom left

margin: 10px 20px 40px;top right bottom

left

margin: 10px 20px;top right

bottom left

margin: 10px; all sides30 WebConst’09 | Website Construction (CSS Basics)


border-style: dotted solid double dashed;top right bottom left

border-style: dotted solid dashed;top right bottom

left

border-style: solid dotted;top right

bottom left

border-style: dotted; all sides

border: 2px solid red;background: #00ff00 url(’smiley.gif’) no-repeat fixed center;

font: italic small-caps 900 12px arial;



RememberCSS width = the width of the content, not the block

Total widthwidth + padding + border

Internet Explorer gets it wrong.It makes more sense, but it’s not the W3C standard.

Declare your doctype

<!DOCTYPE html PUBLIC "−//W3C//DTD XHTML 1 .0 S t r i c t //EN"" ht tp : //www. w3 . org /TR/ xhtml1 /DTD/xhtml1−s t r i c t . dtd ">

<html><head>

. . .



No doctype⇒ quirk mode

Doctype⇒ standard mode



Outline

1 CSS syntax

2 CSS box model


4 CSS sprites

5 CSS global reset



CSS measurements



Colors

The World Wide Web Consortium (W3C) has listed16 valid color names for HTML and CSS:

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive,purple, red, silver, teal, white, and yellow

For other colors: specify their value.



Outline

1 CSS syntax

2 CSS box model


4 CSS sprites

5 CSS global reset



CSS no sprites

<u l>< l i><a h r e f="#">l i n k</a></ l i>< l i><a h r e f="#">l i n k</a></ l i>< l i><a h r e f="#">l i n k</a></ l i>< l i><a h r e f="#">l i n k</a></ l i>< l i><a h r e f="#">l i n k</a></ l i>

</ u l>

u l l i a {background : u r l ( . . / img/ l i nk_break . png ) l e f t c e n t e r

no−r e p e a t ;padd ing : 5 px 2px 5px 36px ;

}u l l i a : hove r {

background−image : u r l ( . . / img/ l ink_make . png ) ;t ex t−d e c o r a t i o n : u n d e r l i n e ;

}



CSS sprites

<u l>< l i><a h r e f="#">l i n k</a></ l i>< l i><a h r e f="#">l i n k</a></ l i>< l i><a h r e f="#">l i n k</a></ l i>< l i><a h r e f="#">l i n k</a></ l i>< l i><a h r e f="#">l i n k</a></ l i>

</ u l>

u l l i a {background : u r l ( . . / img/ l i n k _ s p r i t e . png ) 0 −32px no−

r e p e a t ;padd ing : 5 px 2px 5px 36px ;

}u l l i a : hove r {

background−p o s i t i o n : 0 0 ;t ex t−d e c o r a t i o n : u n d e r l i n e ;

}



Outline

1 CSS syntax

2 CSS box model


4 CSS sprites

5 CSS global reset



CSS reset

Global Reset is needed to ensure the more or less identicalcross-browser presentation of your web-sites. By default differentbrowsers use different values for margin, padding or line-height.Global Reset makes sure all (or probably most) browsers rendersites identically.

Quick and dirty∗ { margin:0; padding:0; }

Much better withTripoli’s Eric Meyer’s Christian Montoya’s

Kyle Neath’s YUI’s Master stylesheet


http://devkick.com/lab/tripoli/

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

http://www.christianmontoya.com/2007/02/01/css-techniques-i-use-all-the-time/

http://warpspire.com/features/css-frameworks/

http://developer.yahoo.com/yui/reset/

http://www.crucialwebhost.com/blog/master-stylesheet-the-most-useful-css-technique/


CSS Zengarden

They marked up the whole contentallowing CSS to target anything on the page.

The rest is just the imagination of the developers/designers.

To the CSS playground


http://www.csszengarden.com/

website construction - css basics€¦ · css basics frédérichaziza department of computer...

Documents