WEB I - 06 - CSS

EASING
INTO WEB
DEVELOPMENT
6.
6 CSS

1 INTRODUCTION
2 HTML
3 TABLES
4 FORMS
5 HTTP
6 CSS
7 CSS FRAMEWORKS
8 DIGITAL MEDIA
2 9 USABILITY

What is CSS?
3

 Cascading St l Sh t (CSS) i the W3C
C di Style Sheets is h W3C-approved d
method for specifying and enriching the visual
p
presentation of web pages.
p g
 CSS is not HTML but does enhance HTML by allowing
you to redefine how pre-existing tags work.
 A style sheet is written according to the grammar
defined in the W3C CSS 1 or CSS 2 recommendations.
 It
I can b contained in :
be i di
 A text file (which has a .css suffix)
 Embedded within <style> element contained within the
<head> element
 Inline within any element via the style= attribute.

Why CSS?
4

 There are numerous advantages of using CSS
f CSS:
 Greater control over textual effects and page layout.
 Separates document content (HTML) from its
appearance (CSS).
R d i
Reducing d li i of style commands.
duplication f l d
 Increase ease in web site maintenance.

 The disadvantages of CSS is:
f
 Harder to learn than straight HTML
 Some unevenness with browser support
 IE prior to vers. 7 in particular has several CSS bugs

So why is separating appearance from content so
important?
i ?
5

 Currently ( ith t CSS) th vast majority of a given HTML
C tl (without CSS), the t j it f i
document’s markup is devoted to formatting/layout.
 These types of documents are very hard to maintain and
change.
 Using markup, there is no easy way to replicate a design change
over an entire site
site.
 Using markup for layout (i.e., tables) creates fragile and hard to
change layouts.
 These documents are not accessible (i.e., not easily usable
by people with visual disabilities).
 These documents are hard to index (e.g., by search engines)
(e g
accurately.
 Google “is in effect the world’s most active blind user” (Meyer, 3).

Eric Meyer, Cascading Style Sheets, 2nd Ed, (O’Reilly, 2004).

Example Problem
6

What is the actual content of this document?

Example Problem
7

 This page’s content:
 Date
 Image
 News Navigation Links
 Link Newsroom
 Link Events
 Link Media Centre
 Link Mount Royal Experts
 News & Events
 Feature Story
 Policy Studies program joins forces with Students' Association to host all-candidates debate
 Just days before Canadians cast their votes in our federal election, Mount Royal College will host an all-
all
candidates debate
 Link
 Image
 Caption
 Tami Rothery VP Student Life etc
 Newsroom
 Link
 Link
 Link
 Link
 Link

HTML for the Content
8
<div id=“news”>
<div id=“newsNavigationLinks”>
<ul>
<li><a href=???>NewsRoom</a></li>
<li><a href=???>Events</a></li>
etc
</ul>
</div>
<p>Date</p>
<img src=???>
<h1>News & Events</h1>
<div id=“story”>
<h2>Feature Story</h2>
y
<img>
<p id=caption>Tami Rothery VP Student Life etc</p>
<p><em>Policy Studies program joins forces with Students' Association
to host all‐candidates debate</em></p>
<p>Just days before Canadians cast their votes in our federal
election, Mount Royal College will host an all‐candidates debate</p>
, y g p
<a href=???>More</a>
</div>
<div id=“newsLinks”>
<h2>Newsroom</h2>
<ul>
<li><a href=???>Current News</a></li>
/ /
<li><a href=???>News Archive</a></li>
etc
</ul>
</div>
</div>

Actual HTML (which contains content and presentation)

9
<table width 720 border="0" align="center" cellpadding="0" cellspacing="0" valign="top"><tr><td valign="top" width="620"
<table width="720" border 0 align center cellpadding 0 cellspacing 0 valign top ><tr><td valign top width 620
height="9"><img src="images/spacer.gif" width="620" height="9" border="0"></td></tr><tr><td valign="top" width="620"
height="29"><img src="images/spacer.gif" width="63" height="5" border="0"><script language="JavaScript"><small><font color='white'
face='Arial' size='1'><b>January 11, 2006</b></font></small></td></tr><tr><td valign="top" width="620" height="98"><img
src="images/spacer.gif" width="620" height="98" border="0" alt="News & Events"></td></tr></table></td></tr></table><table
width="720" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td width="100" valign="top" bgcolor="#003399"><a
_ g _ jpg _ g _ jpg g
href="newsroom.php" onMouseOver="document.ne_new.src='images/ne_newr.jpg'" onMouseOut="document.ne_new.src='images/ne_new.jpg'"><img
src="images/ne_new.jpg" alt="Newsroom" title="Newsroom" name="ne_new" border="0"></a><br><a href="events.php"
onMouseOver="document.ne_eve.src='images/ne_ever.jpg'“ onMouseOut="document.ne_eve.src='images/ne_eve.jpg'"> <img
src="images/ne_eve.jpg" alt="Events" title="Events" name="ne_eve" border="0"></a><br>
<a href="mediarelations.shtml" onMouseOver="document.ne_med.src='images/ne_medr.jpg'"
onMouseOut="document.ne_med.src='images/ne_med.jpg'"><img src="images/ne_med.jpg" alt="Media Centre" title="Media Centre"
name="ne_med" border="0"></a><br><a href="experts.php" onMouseOver="document.ne_exp.src='images/ne_expr.jpg'"
onMouseOut="document.ne_exp.src='images/ne_exp.jpg'"> <img src="images/ne_exp.jpg" alt="Mount Royal Experts" title="Mount Royal
Experts" name="ne_exp" border="0"></a></td><td width="35" valign="top"><img src="images/homepage_top1.jpg"></td><td width="550"
valign="top"><font face="arial" size="2"><img src="images/homepage_top2.jpg"><br><table width="550" align="center" cellpadding="0"
cellspacing="0" border="0"><tr><td width="355" valign="top" colspan="3"><img src="images/title_featurestory.jpg" alt="Feature
Story"></td><td width="35" valign="top"><img src="images/featureshadow1.jpg"></td><td width="160" valign="top"><img
src="images/title_newsroom.jpg" alt="Newsroom"></td></tr><tr><td width="355" height="163" valign="top" colspan="3"
background= images/feature_bg.jpg ><table width= 355 align center cellpadding 0 cellspacing 0 border 0 ><tr><td width= 355
background "images/feature bg jpg"><table width "355" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td width "355"
height="12" colspan="5" valign="top"><img src="images/spacer.gif" width="355" height="12" border="0"></td></tr><tr><td width="12"
height="139" valign="top"><img src="images/spacer.gif" width="12" height="139" border="0"></td><td width="147" height="139"
valign="top"><img src="featurestories/images/candidatedebate.jpg" border="0" alt="Tami Rothery, V.P. Student Affairs and Jackie
Chuckrey, SAMRC President overlook the location of the upcoming candidates debate."></td><td width="12" height="139"
valign="top"><img src="images/spacer.gif" width="12" height="139" border="0"></td><td width="171" height="139" valign="top"><font
size 2 face="arial"><strong>Policy Studies program joins forces with Students' Association to host all‐candidates
size="2" face arial ><strong>Policy Studies program joins forces with Students Association to host all candidates
debate</strong></font> <p><font size="1" face="arial">Just days before Canadians cast their votes in our federal election, Mount
Royal College will host an all‐candidates debate...   > <a href="featurestories/candidatedebate.shtml">More</a></font></p>
</td><td width="12" height="139" valign="top"><img src="images/spacer.gif" width="12" height="139" border="0"></td></tr><tr><td
width="355" height="12" colspan="5" valign="top"><img src="images/spacer.gif" width="355" height="12"
border="0"></td></tr></table></td><td width="35" valign="top"><img src="images/featureshadow2.jpg"></td><td width="160"
g p g g p g g p p
valign="top"><font face="arial" size="1"><img src="images/spacer.gif" width="160" height="15"><br><a href="newsroom.php">Current
News</a> <img src="images/spacer.gif" width="160" height="5"><br><a href="archive.php">News Archives</a> <img
src="images/spacer.gif" width="160" height="5"><br><a href="/alumni/e_news.shtml">Alumni News</a> <img src="images/spacer.gif"
width="160" height="5"><br><a href="http://cougars.mtroyal.ca/">Cougar News</a> <img src="images/spacer.gif" width="160"
height="5"><br><a href="/conservatory/news.php">Conservatory News</a></font></td></tr></table>

Mixing Presentation with Content
10

 Combining presentation and content makes the HTML h d
C b d k h harder
to understand and to maintain.
 Almost all of this sample consists of position markup (all the table
tags), formatting markup, and gratuitous images (single pixels for
spacing, simple text images for headings).
 This little code snippet has 8 font tags: each one made the same
change (white color, font name=Arial and size=small).
 The entire page in fact had 20 font tags doing the same thing.
 To change to a different color and font and size, we will have to
change 60 attributes in a total of 20 tags.
 With CSS
Wi h CSS, we can specify this font rule just once.
if hi f l j
 To make the same change we only have to make one change to three
CSS rules.

11

 In fact the entire main content pages (thousands of pages) of the www.mtroyal.ca site
used to have tens of thousands of font tags, almost all of which were one of the following:

<font face="Arial, Helvetica, sans-serif" size=2>
<font face="Arial, Helvetica, sans-serif" size=1>
<font face="Arial, Helvetica, sans-serif">
<font face "Arial">
face="Arial">
<font size=2>
<font size=1>
<font size=4>
<font face="Arial" size=2 bgcolor=white>
<font face="Arial" size=2 bgcolor=black>
<font face="Arial, Helvetica, sans-serif" size=2 bgcolor=black>
<font face="Arial, Helvetica, sans-serif" size=1 bgcolor=black>
o t ace a s e bgco o b ac

12

 To k
T make a site-wide change to the font face, size, or
i id h h f f i
color, for www.mtroyal.ca site would take hundreds of
very tedious hours.
y
 To change the font used in all the images would again
take hundreds of very tedious hours
 If the same site had been designed to separate
presentation from content and to properly structured
that content, the same change would take under a
content
minute.
 An entire site can use a single CSS file.
 If the CSS is properly cascaded, we would only have to
make a few changes to that one file.

What does cascading mean?
13

 CSS are considered cascading because the
styles can use a hierarchy which passes styles
down to the elements
elements.
 Previously defined styles are applied unless
a new, overriding style change is made.

What does cascading mean?
g
body font-face: Arial, Helvetica, sans-serif; color: black;
14
h1 font-size:14pt;

p font-size:10pt;

div id=story font-size:12pt; font-weight: bold;

div id=news background:white;

div id=story position: relative; left: 125px; width: 200px

p font-weight: normal;

CSS Rules
15

 Style sheets consist of one or more rules.
 Each rule defines what an element should look like
and how it should behave in the browser window.

 The following contains two rules.
 The first indicates that the use of h2 should result in the
text being colored green. The second indicates text in a
b i l d Th d i di i
p tag should be 12pt Arial or some sans-serif font.

h2 { color: green; }
p { font-size: 12pt; font-face: Arial, sans-serif;
}

CSS Rule Placement
16

 There are three ways in which rules can be applied
to a document:
 Inlinestyles
 Embedded styles
y
 External styles

Inline Styles
17

 Are added to a tag via the style attribute.
<h2 style="color: green;">
<p style="font-size: 12pt; font-face: Arial, sans-serif;">

 Affects only that instance of the tag.
 Not recommended
recommended.

Embedded Styles
18

 Are added in the head of the page and affects all
instance of the defined tag.
<head>
<style type="text/css">
h2 { color: green; }
p { font-size: 12pt; font-face: Arial sans-serif;
Arial, }
</style>
</head>

External Styles
19

 Are t d in
A stored i an external fil and linked or imported i t a page.
t l file d li k d i t d into
 Generally the best approach since a single external stylesheet file
can be used in multiple pages.
 They thus provide a way to achieve consistent styling across an entire
site.
 Two approaches
pp
 Linking
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

 Importing
@import url(styles.css);
@import url(colours.css);
</style>

CSS Rule Composition
20

 A CSS rule i composed of two parts:
l is d ft t
 Selector
 Declaration block
 The selector defines which part of the document is to be affected.
 The declaration block consists of one or more declarations.
 Each declaration is separated by semicolons
semicolons.
 A declaration is a combination of CSS property and a value for that
property.

Declaration Block

h1 { color: green; font-size: 24pt; }

Selector Declaration property value

Document Structure
21

 As mentioned, XHTML should describe the structure
and content of the document, while CSS describes
its appearance.
 Understanding this XHTML structure is a necessary part
of mastering CSS.
 XHTML documents contain a hierarchy of elements
M y

Document Structure
22

html
body is an ancestor of img

head body

body is the parent of ul

title link h1 p a ul ul is a child of body

a img li li

img is a descendent of body

Selectors
23

 Selectors are what connect the style definitions to
the specific tags that are to be modified.
 There are three basic forms of selectors:
 HTML selectors
 Class selectors

 ID select

HTML Selectors
24

 You h
Y have already seen HTML selectors. These are the styles
l d l Th h l
that directly effect an HTML tag element.
h1 { color: red; }

 These selectors can also be grouped into comma-separated
lists (this modifies all elements in list).
h2, h3, p { color: blue; }

Class Selectors
25

 A class selector is used to specify the styles of
elements that have been classified using the class
attribute in the HTML tags.
 Theseallow you to define styles independently of the
HTML elements.
period indicating list of property-
st o p ope ty
a class selector value pairs

.classname { property: value; }

name of
class selector

Class Selectors Examples
26

 An
A HTML element can be classified using the class
l b l ifi d i h
attribute.
 The following shows that two tag instances have been
classified as warning tags:
<em class="warning">Do not apply to exposed skin.</em>
<h4 class="warning">Do not induce vomitting.</h4>
<h4 l " i ">D t i d itti </h4>

 With these elements classified, we can set up a style
for the class “warning”:
warning :
.warning { font‐size: 36pt; color: red; }

 We can also combine HTML and class selectors to
more narrowly target some classes:
b.warning { font size: 36pt; color: red; }
b warning { font‐size: 36pt; color: red; }
h4.warning { font‐size: 48pt; color: red; }

Class Selectors
27

 You can also specify multiple classes via the class
attribute.

.box {
box { <div class= box a >
<div class="box a">
margin: 10px; <div class="box b">
}
.a {
background: green;
}
.b {
background: red;
}

ID Selectors
28

 An ID selector is used to target specific instances
(those with the ID) rather than classifying elements
# symbol indicating list of property-
an ID selector value pairs

#idname { property: value; }

name off
ID selector

ID Selectors Examples
29

 An HTML element can be identified using the id
attribute.
 The following shows that this tag instance has been
identified with the value 5511:
<p id="5511">hot sales on now!</p>

 With this element identified, we can set up a style for
the id “5511”
h “5511”:
#5511 { font-style: italic; color: blue; }

ID Selectors Examples
30

 We can also combine HTML and ID selectors.

p#5511 { font‐style: italic; color: blue; }

#5511 { font‐style: italic; color: blue; }

Both of these do the same thing.

The fi t
Th first one is however more self-
i h lf
documenting.

Class versus ID selectors
31

 Classes can be applied to any number of elements.
 Use classes to style a number of different but related
elements.
 IDs are used once and only once in an HTML
y
document.
 Use ids to style a unique element uniquely.

Contextual Selectors
32

 There are specialized contextual selectors:
 Descendant selectors
 Child selectors

 Adjacent Sibling selectors
j g
 Attribute selectors

Contextual Selectors
33

 These are rules that operate only in specific
structural or contextual situations.
 Forinstance, in the example below, let's change only the
<h2> element within the <div> to green 24pt text.
<div id="logo">
<h1>Pearson Education</h1>
<h2>Book Rep System</h2>
</div>
<h2>Technical Books</h2>

 How would we do this?
 We could add an id to the specific h2 element (or a class if
we had multiples). However, over time, our markup and css
can become too bloated (and too complicated) with ids and
classes.

Descendant Selectors
34

 Instead, we could use a contextual selector.
 For instance, we could use a descendant selector, which
selects/matches all elements that are descendants of an
element.
<div id="logo">
</div>
/

a div that contains a h2

div h2 {color: green; font-size: 24pt; }

h2 is a descendant of the di
div
h2 contained within a div
div is the ancestor of the h2

Child Selectors
35

 Matches/selects all elements that are immediate
child of a specified element, including elements that
are not direct descendants.
<div id="logo">
</div>
/
NOT Supported by IE 6
div>h2 {color: green; font-size: 24pt; } or earlier

h2 is direct child of div

Child Selectors
36

<div class="box">
<p>This text will be green</p>
<p>This text will be green as well</p>
<div class="title">
<p>this text will be green as well if we use descendant selector,
<p>this text will be green as well if we use descendant selector
but if we use a child selector it will be red.
</p>
</div>
</div>
<p>What color will I be?</p>

p {
p { color: red; }
; } p { color: red; }
.box p { color: green; } .box>p { color: green; }
b { l }

Adjacent Sibling Selectors
37

 Selects all elements that are the adjacent (i.e.,
follows immediate) siblings of an element.

/
<p>This is the first</p> Only the first <p> will be
<p>This is the second</p> selected

h1+p {color: green; font-size: 24pt; }
or earlier
p is direct adjacent sibling of h1

Attribute Selectors
38

 Will match elements on the basis of the presence of
an attribute or a match of the attribute value.
input[type="text"] {
background‐color: yellow;
color: red;
}

or earlier

Attribute Selectors
39

<label>Name </label>
<label>Name </label>
<input type="text" /><br/>
<label>Phone </label>
<input type="text" /><br/>
<label>Password </label>
<input type="password" /><br/>

<input type="submit" />
Matches elements that contain that
attribute (regardless of its value)
Matches only elements with a particular
attribute value input[type] {
color: red;
input[type="text"] { }
color: red;
}

Pseudo Classes
40

 Pseudo classes refer to a variety of additional
labels that can be added to a selector based on its
user state.
 Indicated via a colon (:)
()

Pseudo Classes
41

 In CSS 1, only the <a> element supports four
different pseudo-classes
A link that is active, visited, unvisited, or when you
mouse over a link can all be displayed in different
ways.
 E.g.
a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: red; text-decoration: none; font-weight:bold; }
a:active {color: olive}

 Order of these is important
 Link
Link, visited hover active
visited, hover,

Pseudo Classes
42

 CSS 2 introduced a few other pseudo classes (not
uniformly supported by IE 7):
 :focus

 :first-child

 :first-letter
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</ l> <h1>Heading Is Here</h1>
input[type="text"]:focus {
border: 2px solid blue; li:first‐child { h1:first‐letter {
} color: red; color: green;
} }

Selectors Exercise
43

<div id="logo">
<img src="whatever.gif" /> .extra { color: green; }
<p>tagline</p>
</div> div.extra { color: green; }
<div class="header">
<h2>Book Rep System</h2> #logo { color: green; }
<p>Some random text.</p>
<p>here is some more.</p>
</div> div p { color: green; }
p { g ; }
<p>My name is Ishmael.</p>
<p>Some years ago</p> div p:first‐child { color: green; }
<div class="extra">
<p>Some more random text.</p> p { g ; }
h2+p { color: green; }
<h2>Products</h2>
<p>This paragraph will be displayed.</p>
<p>So will this one.</p> h2>p { color: green; }
<div id="subtext">
<p>never mind how long</p>
p g p div>p { color: green; }
p { g ; }
</div>
</div> div[class] { color: green; }
<p class="extra">having little or no money</p>

div.extra { color: green; }
.extra { color: green; }
extra { color: green; }
<div id="logo">
<img src="whatever.gif" />
<p>tagline</p>
</div>
</div>
<p>My name is Ishmael </p>
<p>Some years ago</p>
<div class="extra">
<p>Some more random text.</p>
<h2>Products</h2>
<p>This paragraph will be displayed.</p
<p>So will this one.</p>
<div id="subtext">
</div>
</div>
<p class extra >having little or no mone
<p class="extra">having little or no mone

44

#logo { color: green; }
div p { color: green; }

<div id="logo">
<p>tagline</p>
</div>
</div>
<div class="extra">
<h2>Products</h2>
<div id="subtext">
</div>
</div>
<p class extra >having little or no money</
<p class="extra">having little or no money</

45

div p:first‐child { color: green; }
div p:first‐child { color: green; }
<div id="logo">
h2+p { color: green; }
<p>tagline</p>
</div>
</div>
<div class="extra">
<h2>Products</h2>
<div id="subtext">
</div>
</div>
<p class extra >having little or no money</
<p class="extra">having little or no money</

46

h2>p { color: green; } div>p { color: green; }

<div id="logo">
<p>tagline</p>
</div>
</div>
<div class="extra">
<h2>Products</h2>
<div id="subtext">
</div>
</div>
<p class extra >having little or no money</p
<p class="extra">having little or no money</p

47

div[class] { color: green; }

<div id="logo">
<p>tagline</p>
</div>
<p>here is some more </p>
</div>
<div class="extra">
<h2>Products</h2>
h d /h
<div id="subtext">
/
</div>
</div>
<p class="extra">having little or no money</p>

48

Font Formatting with CSS
50

 The font-family property should always specify a
generic font family name in case the computer
viewing the page does not have one of the
specified fonts. Generic family name
font-family: Arial, Tahoma, sans-serif;

 The font property allows you to combine multiple
font styles into one declaration.
font: bold 12pt Arial, Tahoma, sans-serif;

Platform Considerations
51

 Do not assume that a font you have is one that is on
the viewer's computer.
 Fonts
common (for most users) to both Mac and
Windows:
 Arial,Arial Black, Arial Narrow, Comic Sans, Courier New
 Georgia, Impact, Tahoma, Times New Roman
 Trebuchet MS, Verdana

CSS Sizes
52

 Font sizes (and all CSS sizes) can be specified using
absolute or relative units
 Relative
 smaller, larger keywords
 Percentages
 em value
 This is the height of the character box for the font
 Absolute
 small, medium, large, etc keywords.
 Inches (in), points (pt), pixels (px), etc.

Sizing Fonts
53

 Generally, the most common approach is to set the
size in pixels.

h2 { font-size: 18px; }

 Advantage is that the designer has complete control
over what the user sees in terms of the size of the font.
 Any problems with this?
yp

Sizing Fonts
54

 Not all users have the same eye strength.
 Browsers provide user with ability to resize font size.
 Unfortunately, with IE 6 and 7, if the page's CSS uses
pixel unit to set font size then the text will not be
resized.

Sizing Fonts
55

 It is better to use a relative unit for sizing fonts, even
though it is initially a bit tricky.
 Three approaches
 Use keywords (x‐small, small, medium, large, etc)
x small, small, medium, large
 Unfortunatelynot as much control over ultimate size due to
limited number of sizes.
 Use em unit
h2 { font-size: 1.5 em; }

 Use percentage size
h2 { font-size: 120%; }

Percentage Size
56

 This is a percentage of the elements parent's font
size. body { font-size: 10px; }
font size:
#logo { font-size: 150%; }
h2 { font-size: 200%; }
.dwarf { font-size: 75%; }

<body>
<div id="logo">
<h2>Book Rep System</h2> 30px ( (10*2.00)* 1.5 )
</div>
<h2>Technical Books</h2> 20px (10 * 2.00)
<p>Here is some regular text</p> 10px
<p class="dwarf">really small</p> 7.5px (10 * 0.75)
</body>
y

Percentage Size
57

 Unfortunately, the previous example doesn't allow
resizing due to absolute setting of body font size.
 Instead, we should use a relative setting for the
body.y

Percentage Size
58

 body { font-size: 10px; }

body { font-size: 100%; }
 #logo { font-size: 150%; }
h2 { font-size: 200%; }

 body { font-size: small; }
#logo { font-size: 150%; }
g
h2 { font-size: 200%; }

Percentage Size
59

 Advantage to this approach is that you can change
the overall size of text in your site by making just
one change: the font-size of the body.
 Disadvantage is that it can get quite complicated
g g q p
with percentages and nested elements.

Em sizes
60

 As an alternative to percentages, you can use em
sizes.
 An em unit when used for sizing fonts is relative to the
baseline size of the parent.
 If the parent of an element has a font size of 14 pixels,
then 1em is 14 pixels; if the font size is 24 pixels, then
1 em is 24 pixels.
 Most browsers have a default font size of 1em
(about 16 pixels).

em sizes
61

body { font-size: 1em; }
#logo { font-size: 1.2em; }
h2 { font-size: 1.5em; }
.dwarf { font-size: 0
i 0.75em; }

<body>
<div id="logo">
g
<h2>Book Rep System</h2> 28px ( (16*1.2)* 1.5 )
</div>
<h2>Technical Books</h2> 24px (16 * 1.5)
<p>Here is some regular text</p>
p g p 16px
p
<p class="dwarf">really small</p> 12px (16 * 0.75)
</body>

Conclusion: Font Sizes
62

 Set the base body font-size relatively (i.e., using
keyword, em, or percentage).
 Use percentage or em for all other sizes,
remembering that they are relative to the size set
g y
for the body.

Block Level Inline Level
Block-Level vs Inline-Level elements
64

 Block-level elements
 Generate an element box that fills its parent element's
content area.
 That is, they generate "breaks" before and after the
element box.
 E.g. <p>, <div>, <ul>, <table>

 Inline-level elements
 Generate an element box within a line of text
text.
 E.g., <a>, <span>, <strong>

Element Boxes
65

 CSS assumes that every element generates a
rectangular box called the element box (sometimes
also called the box model).
 Each element box has
a content area,
 a background color and/or image
image,
 a margin,

 a possible b d
ibl border
 internal padding.

Element Boxes
66

 CSS assumes that every HTML element exists in a
rectangle called the element box.
Background image
and/or color

margin
g border

padding
This is a content area. CSS assumes that every HTML
element exists in a rectangle called the element box.

height

width

Element box

Element Box
67

Molly Holzschlag,”Thinking Outside the Grid”, http://www.alistapart.com/articles/outsidethegrid

Element Box
68

 You can adjust the following parts of the box with
CSS
 Width and Height
 Border
 Thickness, style, and color of the border
 Margin
g
 Setthe distance between the box and adjacent element's
boxes
 Padding
 Set the distance of the content from the border of the box

Width and Height
69

 You can change the width and height of the element
box in quite a few different ways.
 The most straightforward way is via the width and
height properties
H1 { width: 50%; height: 25px; }

 Remember, the width and height properties set the
size of the content area, not the element box itself.
i f th t t t th l t b it lf
margin
p
padding
g
This is a content area. CSS assumes that every HTML
element exists in a rectangle called the element box.

height

width

Width and Height
70

 Unfortunately, the width and height properties have
a different meaning in CSS standard than in IE 5 or
IE 6 in quirks mode.
 Recall that unless you have a valid DOCTYPE specifying
xhtml strict or xhtml transitional DTD, IE will display
document in quirks mode.
 For IE in quirks mode, width and height refer to the
element box not to the content area.

Border
71

 Can specify each axis individually, e.g.
border-top-style: dashed;
border left color:
border-left-color: red;
border-right-width: 5px;

 Can specify all 4 axis at once identically, e.g.
p y y, g
border-style: solid;
border-color: green;

 Can
C specify multiple axis at once i di id ll e.g.
if li l i individually,
border-width: 2px 3px 4px 5px; TOP

p p
property: top right bottom left
y p g TRouBLe left right
border-color: green red; green red green red
bottom
 Can also specify multiple properties at once
border: 1px double green;
border: width style color;

Padding
72

 The space between the border and the content area
 Can specify each side individually or all at once, e.g.,
padding-top: 5px; TOP

padding: 3px 2px 5px 4px; left right

 Default is no padding bottom

 If you have a border on box containing text, it is a good
idea to add padding
padding.

Margins
73

 Margins provide separation between element boxes
 Can specify each side individually or all at once,
p y y ,
e.g.,
margin-top: 5px;
margin: 3px 2px 5px 4px;

Margin Demo
<h1>Margin demo</h1>
74 <p>Cascading Style Sheets (CSS) is the W3C-approved
method for specifying and enriching the visual
presentation of web pages.</p>
i f b /
<p>CSS is not HTML but does enhance HTML by allowing
you to redefine how pre-existing tags work. A style
sheet is written according to the grammar defined in
the W3C CSS 1 or CSS 2 recommendations. </p>

<style>
* { border: 1px solid black; }
</style>

<style>
* { border: 1px solid black; margin: 0; }
</style>

Padding versus Margins
75

padding

margin

Collapsing Margins
76

 For adjacent vertical block-level elements in the
normal document flow, only the margin of the
element with the largest margin value will be
honoured,
 while the margin of the element with the smaller margin
value will be collapsed to zero.

Collapsing Margins <div>before</div>
<p>line one</p>
<p>line two</p>
77 <p>line three</p>
<div>after</div>
<style>
div { border: 1px solid black; margin: 0;}
p { background-color: silver; height: 50px;
margin-top: 50px; margin-bottom: 0px;}
</style>
<style>
div { border: 1px solid black; margin: 0;}
p { background-color: silver; height: 50px;
margin-top: 50px; margin-bottom: 20px;}
</style>

Notice that vertical margins collapse!!!
o a a ag o ap

When top and bottom margins meet
they overlap until one of the margins
touches the border of the other element
element.

Collapsing Margins
78

.box {
margin: 10px;
<div class="box a">
}
<div class="box b">
.a {
<div class="box c">
background: #777;
<div class="box d">
}
<div class="box e">
.b {
b {
The top and bottom margins collapse but the left and
background: #999;
right margins don't. The top and bottom margins also
}
collapse in IE 7 because the elements don't have a
.c {
layout.
background: #bbb;
</div>
}
</div>
.d {
.d {
</div>
background: #ddd;
</div>
}
</div>
.e {
background: #fff;
}

Tommy Olsson & Paul O’Brien, The Ultimate CSS Reference (SitePoint, 2008).

Collapsing Margins
79

 You can stop vertical margins collapsing by adding
a border or padding.

.box {
margin: 10px;
padding: 1px;
}

Collapsing Margins
80

 However, IE 7 will NOT collapse margins if the
collapsed element has layout (i.e., has a width
setting).

.box {
margin: 10px;
width: 400px;
}

Firefox
IE 7

Collapsing Margins
81

 Also, margins don’t collapse (in all browsers) for:
 floated elements
 absolutely positioned elements

 inline-block elements

 cleared elements

 overflow set to anything other than visible

Collapsing Margins
82

.box {
margin: 10px;
float: left;
}

Firefox, Safari, Chrome, IE8

IE 7

Can I just forget IE 7 (and 6)?
83

http://stats.wikimedia.org/wikimedia/squids/SquidReportClients.htm

http://www.statowl.com/web_browser_market_share.php?mes=ndd

Element box size revisited
84

 Recall that in CSS standard, the width and height
properties set the size of the content area, not the
element box itself.
 Any p
y padding or borders increases the size of the
g
element box
 However,
However with IE in quirks mode (or version 5) the
5),
width and height indicate the size of the element
box.
box
 Padding and borders thus shrinks the size of the content
area.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> IE in quirks mode

<style>
p { background-color: silver;
height: 100px; width: 100px; } 100px 100px
</style>

100px 100px
<style>
height: 100px; width: 100px;
padding: 20px; }
</style> 140px 100px

100px
100
140px

<style>
height: 100px; width: 100px;
padding: 20px; 100px
border: 6px solid black; } 152px
/ y
</style>

85 100px

152px

Containing Boxes
86

 Block boxes act as a containing block for any
boxes within them.

<div>
This is the first sentence.
<p>This is the second sentence.</p>
</div>

 In this code, the div element establishes a containing
, g
block for both the first string of text and the P
element.
 The p element in turn creates a containing block for
the second text string
string.

Positioning
87

 You can change the position of an element box via
the position, top, left, bottom, and right properties.
 Note: it doesn’t make sense to set both left and right.
 Note: it doesn’t make sense to set both top and bottom.

Positioning Property Values
88

 static
 Eachposition is laid out based on the normal flow of the
document (default)
 relative
 Moves an element relative to its normal (static) position.
 absolute
 Moves an element absolutely relative to its containing block,
y g ,
and not relative to the page or window.
 fixed
 Moves an element absolutely relative to the browser window
so that the element never moves, even when the page is
scrolled (not supported in IE 6 or lower).
 This can be used to replicate HTML frames in CSS

Static Positioning
89

 Element boxes flow vertically starting at the top
of their containing block with each placed
directly below the preceding one.
 Inline boxes flow horizontally from left to right.

Positioning
90

 positioned elements are placed in relation to their
d l l d l h
containing blocks (but are not confined by this
containing block)
block).
 Fixed
 Containing block is browser window
 Absolute
 Containing bo is closest positioned ancestor
box ancestor.
 If there is no positioned ancestor, the initial containing block
is the browser window.
 Relative
 Does not have a containing block.
 It is positioning away from its normal (static) position.

#logo {
border: 1
1px solid black; width: 300
i i 300px;
position: relative; top: 200px; left: 100px; }
</style>

<body> <body>
<div id="logo"> You can change the position of an element …
<h1><span>Pearson Education</span></h1> You can change the position of an element …
<h2><span>Book Rep System</span></h2> You can change the position of an element …
</div> <div id="logo">
</body> <h1><span>Pearson Education</span></h1>
<h2><span>Book Rep System</span></h2>
</div>
</body>

91 Remember that relative moves an element relative to its normal position

#logo {
border: 1
1px solid black; width: 300
i i 300px;
position: absolute; top: 200px; left: 100px; }
</style>

<body> <body>
<div id="logo"> You can change the position of an element …
<h1><span>Pearson Education</span></h1> You can change the position of an element …
<h2><span>Book Rep System</span></h2> You can change the position of an element …
</div> <div id="logo">
</body> <h1><span>Pearson Education</span></h1>
</div>
</body>

92

<body>
<div id="logo">
<h1><span>Pearson Education</span></h1>
</div>
</body>

#logo {
border: 1px solid black;
width: 300px; height: 100px;
#logo h2 {
</style>

y yp
#logo {
#logo h2 {
position: relative; top: 20px; left: 100px; }
</style>

Remember that absolute moves an element absolutely relative to its containing block, and
93 not relative to the page or window.

<body>
<div id="logo">
</div>
</di >
</body>

100px

20px

#logo {
#logo h2 {
</style>

Remember that absolute moves an element absolutely relative to its containing block, and
94 not relative to the page or window.

20px

100px

#logo {
p ;
#logo h2 {
</style>

#logo { <body>
border: 1px solid black; <div id="logo">
width: 300px; height: 100px; <h2><span>Book Rep System</span></h2>
h2 B k R S t / /h2
} </div>
#logo h2 { </body>

</style>

Remember that absolute moves an element absolutely relative to its containing block, which is closest
95 positioned ancestor; if none, then container is browser window.

100px

20px

<style type="text/css"> Without #logo h2 positioning
#logo {
#l
#logo h2 {
position: relative; top: 20px; left: 100px; } <body>
</style> <div id="logo">
</div>
</body>
y

96 Remember that relative moves an element relative to its normal position

Positioning
97

 Absolute positioning is sometimes used to position an
element off-screen.
 An example is the click to skip navigation link added for
screen readers.

Floats
98

 Floating is achieved by setting the float property on
an element's style to either left or right.
 Non-floated content will flow along the side
opposite to the specified float direction.
pp p
.image { float: left; }

No float .image { float: right; }

<img src="images/pic.gif" class="image" />
<p>
Floated boxes will move to the left or right until …
</p>

Clearing Floats
99

 Block-level elements will continue to wrap around
floated element for the entire height of floated
element.

Clearing Floats
100

 The CSS property clear forces an element to
display beneath any floated elements.
No clear

.clear {
clear: both;
;
}

<p>Float boxes …
<p class="clear">Floating an image …

Clear
101

 clear: l f
l left
 The element is moved below the bottom outer edge of any
left-floating boxes that resulted from elements earlier in the
g
source document.
 clear: right
 The element is moved below the bottom outer edge of any
right-floating boxes that resulted from elements earlier in
the source document.
 clear: both
 The element is moved below all floating boxes of earlier
elements in the source d
l i h document.
 clear: none

Floats
102

 Floated boxes will move to the left or right until
their outer edge touches the containing block edge
or the outer edge of another float.

<div id="logo">
<p>
Floated boxes will …
</p>
</div>

#logo { margin: 50px; border: 1px solid black;}

div p {background‐color: yellow; border: 1px dashed black; }

.image { float: left; }

Floating Left and Right
103

 You can float items in a container both left and
right.

.leftImage { float: left; }
.rightImage { float: right; }

<img src= images/pic.gif class="leftImage" />
<img src="images/pic gif" class= leftImage />
<img src="images/pic.gif" class="rightImage" />

104

 Once you’ve floated all the elements within a
container, that container will no longer have any
non-floated content, so the container will collapse to
zero height.
Notice no background color

<div id="logo">
#logo { margin: 50px;
<img src="images/pic.gif" class="leftImage" />
<img src="images/pic.gif" class="rightImage" />
background‐color:yellow; }
</div>

105

 To avoid this problem, set an explicit height for the
containing block.

#logo { margin: 50px;
height: 120px;
background‐color:yellow; }

Multi Column
Multi-Column Layouts
106

 Two approaches for creating multi-column layouts:
 Using floats
 Using positioning

 Note: this refers to how the basic multi-column
multi column
layout is created.
 One might still use floats (for other elements, such as a
elements
header) within a layout created via positioning.

Multi Column
Multi-Column Layouts
107

 A complicated float-based layout:
 canbe tricky and fragile (esp. in IE before version 8).
 Hard to preserve source-order (see next slide).

 A complicated position-based layout:
position based
 has fewer problems with IE
 it i really t
is ll troublesome to di l a f t b l th
bl t display footer below the
columns.

Source Order
108

 refers to how page elements are arranged, or
ordered in the source.
 This is important for:
 accessibility
reasons
 SEO (Search Engine Optimization)
 We want the page s content to appear in the markup
page’s
before things like secondary navigation columns.

WEB I - 06 - CSS

Recommended

Recommended

More Related Content

Similar to WEB I - 06 - CSS

Similar to WEB I - 06 - CSS (20)

More from Randy Connolly

More from Randy Connolly (20)

Recently uploaded

Recently uploaded (20)

WEB I - 06 - CSS