Scribd
Upload
48 views

Fulvio Corno, Dario Bonino: 16/10/08 eBWA-www2eB 1

This document provides an introduction to CSS (Cascading Style Sheets). It discusses the basics of CSS including versions and resources. It describes how to write CSS using text editors or dedicated tools. It covers comments, units of measure, rules, style sheets, and how to link style sheets to HTML documents. The document also discusses CSS inheritance, overriding inheritance, exceptions to inheritance, and common CSS tasks including fonts, margins, and backgrounds.

Uploaded by

Kishor Kumar B
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
48 views

Fulvio Corno, Dario Bonino: 16/10/08 eBWA-www2eB 1

This document provides an introduction to CSS (Cascading Style Sheets). It discusses the basics of CSS including versions and resources. It describes how to write CSS using text editors or dedicated tools. It covers comments, units of measure, rules, style sheets, and how to link style sheets to HTML documents. The document also discusses CSS inheritance, overriding inheritance, exceptions to inheritance, and common CSS tasks including fonts, margins, and backgrounds.

Uploaded by

Kishor Kumar B
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 61

CSS

Fulvio Corno, Dario Bonino

16/10/08 eBWA-www2eB 1
Basics
CSS: Cascading Style Sheet
CSS 1: W3C recommendation 17 Dec 1996
CSS 2.1: W3C working draft 13 June 2005
CSS 3: “under construction”
Resources:
 W3C CSS Tutorial
 http://www.w3.org/Style/Examples/011/firstcss

16/10/08 2
How to write CSS
Using a normal text editor
 (recommended for learning)
Using a dedicated tool
Examples:
 jEdit
 Notepad
 Dreamweaver
 Emacs...

16/10/08 3
Comments and Units of measure

Comments: similar to C or Java:


 /* this is a comment */

Units of measure
 Relative units
 em: the font-size of the relevant font
 ex: the 'x-height' of the relevant font
 px: pixels, relative to the viewing device

16/10/08 4
Comments and Units of measure
 Absolute units
 in: inches
 cm: centimeters
 mm: millimeters
 pt: points 1/72*1inch
 pc: picas, (12 points)

16/10/08 5
Rules and Style sheets
CSS is based on rules
A rule is a statement about one stylistic aspect of
one or more elements (XHTML)
A style sheet is a set of one or more rules that
apply to an XHTML document
Example
 h1 {color: green}

16/10/08 6
Anatomy of a Rule
A rule consists of two parts
 Selector – the part before the left curly brace
 Declaration – the part within the curly braces
The selector is the link between the XHTML
document and the style
The selector specifies what elements are
affected by the declaration
The declaration sets what the effect will be
h1 {color: green}

Selector Declaration

16/10/08 7
Anatomy of a Rule (2)
There are several kind of selectors
 The selector h1 in the previous slide is a type
selector and is based on an XHTML element type
 The type selector is the simplest kind of selector
The final effect of the h1 rule is:
 All the h1 elements are written in green

16/10/08 8
Anatomy of a Declaration
A declaration has two parts separated by a
colon:
 Property – the part before the colon
 Value – the part after the colon
The property is a quality or a characteristic that
something possesses (the color in the example)
The value is a precise specification of the
property (in the example: green)
h1 {color: green}

Property Value

16/10/08 9
Grouping Selectors and Rules
Style sheets load faster if they are shorter
There are several mechanisms to shorten a style
sheet by grouping selectors and declarations
Examples

h1 {font-weight: bold}
h2 {font-weight: bold} h1, h2, h3 {font-weight: bold}
h3 {font-weight: bold}

16/10/08 10
Grouping Selectors and Rules (2)
Example2
h1
{
h1 {font-weight: bold} font-weight: bold;
h1 {color: green} color: green;
}

16/10/08 11
“Gluing” Style sheets to the
document
3 main ways
 Using the <style> element
 Using in-line styles (style attribute)
 Linkan external style sheet using the element
<link>

16/10/08 12
Document-wide style sheets
The <style> element is used
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> My first Home Page with Styles </title>
<style type=”text/css”>
<!--
h1 {color: green}
-->
</style>
</head>
<body>
...
</body>
</html>

16/10/08 13
In-line style sheets
The style attribute is used

<?xml version="1.0" encoding="iso-8859-1"?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
</head>

<body>
<h1 style=" color: green;">prova</h1>
</body>
</html>

16/10/08 14
Separated style sheets
The style sheet is define in a separated file
style.css
h1 {color: green}

test.html
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="h1_style.css"/>
</head>

<body>
<h1>prova</h1>
</body>
</html>

16/10/08 15
Tree structure and inheritance
XHTML documents are trees
Styles are inherited along trees
html

head body

p h1 ul

li li

16/10/08 16
Tree structure and inheritance
(2)
So if we want to set the color:green for all elements
we can:
 Set the color for each XHTML element (not
recommended)
 h1, h2, h3 {color: green}
 Set the color for the common ancestor of the
elements (recommended)
 body { color: green}

16/10/08 17
Overriding Inheritance
It is possible to override styles assigned to the
parent elements of a given tag
Example
body {color: green}
h1 {color: navy}
The two rules are in conflict!! who wins?
 The most specific one!!

16/10/08 18
Inheritance Exceptions
Usually properties in CSS inherit from parent to child
as in the previous slide
However some properties do not!
Example: background!!
Why?
 You may end up with a non smooth background
surface (if each element has its own background
that is equal to all the others)
 The loading time can sensibly increase

16/10/08 19
Common tasks: fonts
CSS allow to define several font properties for
tuning the text presentation of a XHTML
document
font-size: fixes the size of a text element (in
pixel, points or ems)
font-family: establishes the font with wich
the text is written (not all fonts are supported by
all browsers)
font-style: the style of the font normal |
italic |oblique

16/10/08 20
Common tasks: fonts(2)
font-weight: the “boldness”of the font, can be
bold | bolder | lighter | normal | 100 | 200 | 300 |
400 | 500 | 600 | 700 | 800 | 900
font-variant: used for formatting text with all
uppercase characters (bigger for initials), can be
normal | small-caps
line-height: fixes the height of the line in which
the text is written values can be in pixels, points or
ems (px, pt, em), in percentage with respect to the
font-size, etc.

16/10/08 21
Example
Want to have a heading1 in Times font, with
24pt height, bold, italic, navy color and a line
height that is 150% of the font size

h1
{
font-size: 24pt;
font-family: Times, Times New Roman;
font-style: italic;
font-weight: bold;
color: navy;
line-height: 150%;
}

16/10/08 22
Common Tasks: margins
The margins define the space that the browser
shall leave around a given text element
The possible margins are:
 Margin-top
 Margin-right
 Margin-left
 Margin-bottom

The margin size is usually given in ems


1em = font-size

16/10/08 23
Example
A blockquote margins'
blockquote
{
margin-top: 1em;
margin-right: 0em;
margin-left: 0em;
margin-bottom: 1em;
font-style: italic;
}

There is also a shorthand that allows to specify


margins in a single value (top,right,bottom, left):

margin: 1em 0em 1em 0em;

16/10/08 24
Common tasks: background
Each XHTML can have a background
blockquote
{
margin-top: 1em;
margin-right: 0em;
margin-left: 0em;
margin-bottom: 1em;
font-style: italic;
background: #EDB;
}

Background is a shortcut for 5 different


attributes (whose values can be written in a
single line, space separated)

16/10/08 25
Common tasks: background (2)
The 5 background attributes are
 background-attachment
 Fixes the attachment to the document, can be
 fixed | scroll
 Scroll: follows the document scrolling
 background-color
 Fixes the background color, can be a named color
or a RGB value
 background-image
 An image to be used as background
 Syntax: url(imageURL)

16/10/08 26
Common tasks: background (2)
 background-position
 Establishes the left and top edges of the
background image
 Can be
 A percentage (horizontal% height%) (if only 1 value is
specified it is interpreted as an horizontal% and height%
is fixed at 50%
 A length (same as for percentage)
 A mix of
 top | center | bottom

 left | center | right

16/10/08 27
Common tasks: background (3)
 background-repeat
 Set if a background image shall be repeated and
along which axis
 Allowed values
 no-repeat|repeat|repeat-x|repeat-y

16/10/08 28
Common tasks: links
Browsers usually represent links as underlined
text
CSS offer a special support for styling anchors
4 different pseudo classes
 a:link { color: red } /* unvisited links */
 a:visited { color: blue } /* visited links */
 a:hover { color: yellow } /* user hovers */
 a:active { color: lime } /* active links */

16/10/08 29
Example
A link should be visualized blue on white without
being underlined when it is not selected
White on blue when the mouse is hover the link
And magenta on white when the link has been
already selected

16/10/08 30
Example (2)
/* not-visited link: blue on white */
a:link {color: navy; background-color: white;}
/* mouse over the link: white on blue */
a:hover{color: white; background-color: navy;}
/* already visited link: magenta on white */
a:visited {color: magenta; background-color: white;}

16/10/08 31
Advanced Selectors: Classes
Pseudo-Classes can be used to style XHTML in
different ways
Like “styles” in wordprocessors
In XHTML
<p class=”author”>Dario Bonino</p>

In the CSS
p.author {font-style: italic; font-color:red;}

16/10/08 32
Advanced Selectors: Before /
After
It is also possible to insert content before and
after a given XHTML element identified by a
selector
Before (CSS 2)
table:before {
content: “Table<br/>”;
}

16/10/08 33
Advanced Selectors: Before /
After (2)
After (CSS 2)
img:after {
content: “Fig.” ;
}

16/10/08 34
Advanced Selectors: Multiple
selectors, Child selectors,...
Selectors can be multiple
 h1, h2, h3 { font-weight: bold}

It is possible to select children of a given node


 div.section > div.note {}

It is possible to select descendants of a given node


 p quote { font-style: italic}

Etc.

16/10/08 35
Examples
e /*matches any e element*/
e f /*matches any f element descendant of an e
element*/
e > f /*matches any f element that is child
of an e element*/
e + f /*matches any f element immediately
preceded by a sibling element e*/
e [foo=”warning”] /*matches any element e
having a foo
attribute with
value “warning”*/

16/10/08 36
Page formatting: the Box Model
Each XHTML element has a box model

16/10/08 37
Page formatting: the Box Model
content edge or inner edge
 The content edge surrounds the rectangle given by the
width and height of the box, which often depend on the
element’s rendered content.

padding edge
 The padding edge surrounds the box padding. If the
padding has 0 width, the padding edge is the same as
the content edge.

16/10/08 38
Page formatting: the Box Model
border edge
 The border edge surrounds the box’s border. If the border
has 0 width, the border edge is the same as the padding
edge.
margin edge or outer edge
 The margin edge surrounds the box margin. If the margin
has 0 width, the margin edge is the same as the border
edge.

16/10/08 39
Examples (css code)
ul { <?xml version="1.0"?>
background: yellow; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
margin: 12px 12px 12px 12px; 1.0 Transitional//EN"
padding: 3px 3px 3px 3px; "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
/* No borders set */ transitional.dtd">
} <html
li { xmlns="http://www.w3.org/1999/xhtml">
color: white; /* text color is white */ <head></head>
background: blue; /* Content, padding <body>
will be blue */ <ul>
margin: 12px 12px 12px 12px; <li>First element of list</li>
padding: 12px 0px 12px 12px; /* Note 0px <li class="withborder">
padding right */ Second element of list is
list-style: none /* no glyphs before a a bit longer to illustrate
list item */ wrapping.
/* No borders set */ </li>
} </ul>
li.withborder { </body>
border-style: dashed; </html>
border-width: medium; /* sets border
width on all sides */
border-color: lime;
}

16/10/08 40
Examples (results)

16/10/08 41
Run-in boxes
They are useful for example to make “run-in”
headers
Example
h3 { display: run-in }

The result is:


A run-in heading.
And a paragraph of text that follows it.

16/10/08 42
Block elements
The XHTML block element are the <div></div>
element and the <span></span> element
Example:
<div>
Some text
<p>More text</p>
</div>

16/10/08 43
Box Positioning
A block can be positioned in different ways to which
correspond different positioning schemes
Position: static | relative | absolute | fixed |
inherit
static: normal block
relative: the offset values are relative to the block
position in the normal flow. If a relative block B
follows a relative block A, the offset is respect to
the position of A without the offset

16/10/08 44
Box Positioning
absolute: the box position is determined by the
top, left, right, bottom properties and is
relative to the containing block
fixed: the box is fixed with respect to some
reference (the viewport as an example)

Examples
@media screen {
div.header { position: fixed }
}
@media print {
div.header { position: static }
}

16/10/08 45
Box offset
For absolute and relative position, an offset can be
specified
 top : length | percentage
 left: length | percentage
 right : length | percentage
 bottom : length | percentage

16/10/08 46
Floats
A float is a box that is shifted to the left or right
on the current line.
content may flow along its side (or be prohibited
from doing so by the ’clear’ property)
A floated box is shifted to the left or right until
its outer edge touches the containing block edge
or the outer edge of another float.

16/10/08 47
Float (2)
If there’s a line box, the top of the floated box is
aligned with the top of the current line box.
If there isn’t enough horizontal room for the
float, it is shifted downward until either it fits or
there are no more floats present.
Since a float is not in the flow, non-positioned
block boxes created before and after the float
box flow vertically as if the float didn’t exist.

16/10/08 48
Example
the containing block is too narrow to contain the
content next to the float, so the content is
moved below the float
p { width: 10em; border: solid aqua; }
span { float: left; width: 5em; height: 5em;
border: solid blue; }
<p>
<span> </span>
Supercalifragilisticexpialidocious
</p>

16/10/08 49
Example 2

<html>
<head>
<title>float example</title>
<style type="text/css">
img { float: left }
body, p, img { margin: 2em }
</style>
</head>
<body>
<p><img src=img.png alt="this image will illustrate floats">
some sample text that has no other...
</body>
</html>

16/10/08 50
Example 3
Floating along two paragraphs

16/10/08 51
Example 4
The clear property
If the p style is
 p { clear: left }

16/10/08 52
Page arrangement
Fixed positioning can be used to create some
complex frame-like presentations
For example, the following:

16/10/08 53
Page arrangement (2)
#header { position: fixed; width: 100%;
height: 15%; top: 0; right: 0; bottom:
auto; left: 0; }
#sidebar { position: fixed; width: 10em;
height: auto; top: 15%; right: auto;
bottom: 100px; left: 0;}
#main {position: fixed; width: auto;
height: auto; top: 15%; right: 0; bottom:
100px; left: 10em; }
#footer {position: fixed; width: 100%;
height: 100px; top: auto; right: 0;
bottom: 0; left: 0; }

16/10/08 54
3 Columns Liquid Layout (1/7)

16/10/08 55
3 Columns Liquid Layout (2/7)

16/10/08 56
3 Columns Liquid Layout (3/7)

16/10/08 57
3 Columns Liquid Layout (4/7)

16/10/08 58
3 Columns Liquid Layout (5/7)

16/10/08 59
3 Columns Liquid Layout (6/7)

16/10/08 60
3 Columns Liquid Layout (7/7)
body { #left {
min-width: 630px; width: 180px; /* LC width
/* 2x (LC fullwidth +CC padding) + */
RC fullwidth */ padding: 0 10px; /* LC
} padding */
#container { right: 240px; /* LC
padding-left: 200px; /* LC fullwidth + CC padding */
fullwidth */ margin-left: -100%;
padding-right: 190px; /* RC }
fullwidth + CC padding */ #right {
} width: 130px; /* RC width
#container .column { */
position: relative; padding: 0 10px; /* RC
float: left; padding */
} margin-right: -190px; /* RC
#center { fullwidth + CC padding */
padding: 10px 20px; /* CC }
padding */ #footer {
width: 100%; clear: both;
} }

/*** IE Fix ***/


* html #left {
left: 150px; /* RC
fullwidth */
}

16/10/08 61

You might also like