Web Technology Introduction

Cascading Style Sheets

Outlines

Core concepts of CSS

Controlling fonts
Text format
Box model
Tables

Introduction

First example

Introduction
CSS: Cascading Style Sheets
CSS is a style language for defining layout of
XHTML documents
Separation of structure from presentation
CSS covers fonts, colors, margins, lines, height,
width, background images, advanced positions
and many other things

Introduction
CSS works by associating rules with elements
in documents
Each rule has two parts
Selector: indicates which elements the declaration
applies to
Declaration: indicates how elements should be
styled

Adding CSS Rules to XHTML

Inline style
Embedded style
External style

Inline Styles
Declare an individual elements format
Attribute style
CSS property
Followed by a colon and a value

Embedded Style Sheets

Embed an entire CSS document in an XHTML
documents head section
Property background-color
Specifies the background color

Property font-family
Specifies the name of the font to use

Property font-size
Specifies a 14-point font

External Style Sheets

Style sheet can be stored in a separate file

Advantages of External Style Sheets

Reuse
Small source code
Change the appearance of several pages by
altering just the style sheet rather than each
individual page
Because the source document does not
contain the style rules, different style sheets
can be attached to the same document

10

Conflicting Styles
authors style > users style > browsers style
Children inherit parents style
If a style is specified for the child => used
instead of parents style

11

Cascading
The order
inline
embedded
external

12

Type of Selectors
Class selector
ID selector
Type selector

13

Class Selector
<p class="highlight">This paragraph has red text.</p>
<p class="default">This paragraph has dark gray text.</p>
<p class="default">This paragraph also has dark gray text.</p>
/* Define highlight class */
.highlight {
color:#F00;
}
/* Define default class */
.default {
color:#333;
}
14

ID Selector
<p id="highlight">This paragraph has red text.</p>
<p id="default">This paragraph has dark gray text.</p>
/* Define highlighted text */
#highlight {
color:#F00;
}
/* Define default text */
#default {
color:#333;
}
15

Type Selector
<p>This paragraph has red text.</p>
<p>This paragraph has red text.</p>
/* Define red text */
p{
color:#F00;
}

16

Multiple external style sheets

CSS

HTML

CSS

CSS

<link rel="stylesheet type="text/css" href="css/one.css" />

<link rel="stylesheet type="text/css" href="css/two.css" />
<link rel="stylesheet type="text/css" href="css/three.css/>

three.css has the highest priority

17

Imported Style Sheets

CSS

CSS

CSS

CSS

@import url("default.css");
@import url("layout.css");
@import url("navigation.css");
@import url("forms.css");

Which has the highest priority?

18

Grouping
/* Heading styles */
h1 {
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
h2 {
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
h3 {
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}

/* Heading styles */
h1, h2, h3 {
font-family:Helvetica,Arial,sansserif;
line-height:140%;
color:#333;
}

19

Grouping
/* Heading styles */
h1, h2, h3 {
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
/* Additionally, render all h1 headings in italics */
h1 {
font-style:italic;
}

20

Inheritance

/* Top-level heading */
h1 {
color:#333;
}

<h1>This is the greatest heading <em>in the world</em></h1>

<em> another heading </em>

21

Contextual Selectors
/* Top-level heading */
h1 {
color:#333;
}
/* Make emphasized text shine brightly */
em {
color:#F00;
}

<h1>This is the greatest heading <em>in the world</em></h1>

<em> another heading </em>
/* Top-level heading */
h1 {
color:#333;
}
h1 em {
color:#F00;
}
22

CSS Measurements

23

CSS Measurements

24

Colors
Color

Color HEX

Color RGB

#000000

rgb(0,0,0)

#FF0000

rgb(255,0,0)

#00FF00

rgb(0,255,0)

#0000FF

rgb(0,0,255)

#FFFF00

rgb(255,255,0)

#00FFFF

rgb(0,255,255)

#FF00FF

rgb(255,0,255)

#C0C0C0

rgb(192,192,192)

#FFFFFF

rgb(255,255,255)
25

Division
<div> tag divides a page into groups
<div>
<p>This is our content area.</p>
</div>
<div id="container">
<p>This is our content area.</p>
</div>

26

Division
<div id="container">
<p>This is our content area.</p>
</div>

/* Container holds all visible page elements */

#container {
padding: 20px;
border: 1px solid #000;
background: #CCC;
}
27

Controlling Fonts

28

Controlling Fonts
The font-family Property
<p class=one>Here is some text.</p>
<p class=two>Here is some text.</p>
<p class=three>Here is some text.</p>

.one {font-family:arial, verdana, sans-serif;}

.two {font-family:times, times new roman, serif;}
.three {font-family:courier, courier new, serif;}

29

Generic Fonts

30

Controlling Fonts

Size: p {font-size: 12pt}

Weight: p {font-weight: bold}
Style: p {font-style: italic}
Stretch: p {font-stretch: narrow}

31

Formatting Text
color: color of text
text-align: Specifies the alignment of the text within
its containing element; values = {left, right, center,
justify}
vertical-align: Vertical alignment of text within
containing element and in relation to containing
element; values={baseline, sub, super, top, etc.}
text-decoration: Specifies whether the text should
be underlined, overlined, strikethrough, or blinking
text; values={overline, underline, line-through, blink}
32

Box Model
Every element is treated as a box in CSS

33

Box Model

Property

Description

border

Even if you cannot see it, every box has a border. This
separates the edge of the box from other boxes.

margin

The margin is the distance between the edge of a box and

the box next to it.

padding

This padding is the space between the content of the box

and its border.

34

Border Properties

border-color
border-style: none, solid, dotted, etc.
border-width
border-top/bottom/left/rightcolor/style/width

35

Borders
border-style: none, dotted, dashed, solid,
double, groove, ridge, inset, and outset
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px;
border-style: dashed dotted solid ridge;
}

36

Padding Properties
Padding is the distance between the edges
(borders) of an (X)HTML element and the
content within it, and can be applied to any
element.
#container {
padding-top: 20px;
padding-left: 10%;
padding-right: 1em;
padding-bottom: 0;
}

37

Margin Properties
The margin property is used to declare the
margin between an (X)HTML element and
those elements outside of it
#container {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
}
#container {
margin: 20px auto 1em auto;
}
38

Dimensions
Property
height
width
line-height
max-height
min-height
max-width
min-width

Purpose
Sets the height of a box
Sets the width of a box
Sets the height of a line of text
Sets a maximum height for a box
Sets the minimum height for a box
Sets the maximum width for a box
Sets the minimum width for a box

39

The overflow Property

Value
hidden
scroll

Purpose
The overflowing content is hidden.
The box is given scrollbars to allow users to
scroll to see the content.

40

Pseudo-class

41

Pseudo-class

42

Background

43

Tables
padding to set the amount of space between the
border of a table cell and its content this
property is very important to make tables easier
to read.
border to set the properties of the border of a
table.
text and font properties to change the
appearance of anything written in the cell.
text-align to align writing to the left, right, or
center of a cell.
44

Tables
vertical-align to align writing to the top,
middle, or bottom of a cell.
width to set the width of a table or cell.
height to set the height of a cell (often used
on a row as well).
background-color to change the background
color of a table or cell.
background-image to add an image to the
background of a table or cell.
45

46