CSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS

Introduction to
CSS
Chapter 4
1

What Is CSS?
• CSS is a W3C standard for describing the
appearance of HTML elements
• With CSS, we can assign font properties, colors,
sizes, borders, background images, and even
position elements on the page
• CSS can be added directly to any HTML element (via
the style attribute), within the <head> element, or,
most commonly, in a separate text file that contains
only CSS.
2
Cascading Style Sheets (CSS)

What Is CSS?
• Improved control over formatting.
• Improved site maintainability.
• Improved accessibility.
• Improved page-download speed.
• Improved output flexibility (responsive design)
3
Benefits of CSS

What Is CSS?
• 1996 the CSS Level 1 Recommendation was published
• June 2011 - CSS2.1 becomes an official W3C
Recommendation
• a different group at the W3C was working on a CSS3
draft. So far the following CSS3 modules have made it to
official W3C Recommendations:
• CSS Selectors,
• CSS Namespaces,
• CSS Media Queries,
• CSS Color, and
• CSS Style Attributes
4
CSS Versions

What Is CSS?
• Historically implementation of CSS was not
consistent across major browsers.
• CSS has a reputation for being a somewhat
frustrating language due to browser
implementation differences
• CSS was not really designed to be a layout
language, so authors often find it tricky dealing
with floating elements, relative positions,
inconsistent height handling, overlapping margins,
and non-intuitive naming
5
Browser Adoption

CSS Syntax
• A CSS document consists of one or more style rules
• A rule consists of a selector that identifies the
HTML element or elements that will be affected,
followed by a series of property:value pairs (each
pair is also called a declaration)
• The series of declarations is also called the
declaration block .
6
Overview

Benefits of CSS
The degree of formatting control in CSS is significantly
better than that provided in HTML.
Web sites become significantly more maintainable
because all formatting can be centralized into one, or a
small handful, of CSS files.
CSS-driven sites are more accessible.
A site built using a centralized set of CSS files for all
presentation will also be quicker to download because
each individual HTML file will contain less markup.
CSS can be used to adopt a page for different output
mediums.
7
Why using CSS is a better way of describing presentation than HTML

CSS Syntax
A CSS document consists of one or more style rules.
A rule consists of a selector that identifies the HTML
element or elements that will be affected, followed by
a series of property and value pairs (each pair is also
called a declaration).
8
Rules, properties, values, declarations
selector { property: value; property2: value2; }
declaration block
declaration
em { color: red; }
p {
margin: 5px 0 10px 0;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
property value
selector
rule
syntax
examples

declaration block
declaration
em { color: red; }
p {
font-weight: bold;
}
property value
selector
rule
syntax
examples
Declaration Blocks
The series of declarations is also called the
declaration block.
• A declaration block can be together on a
single line, or spread across multiple lines.
9
• The browser
ignores white space
• Each declaration is
terminated with a
semicolon.

Properties
Each individual CSS declaration must contain a
property.
These property names are predefined by the CSS
standard.
The CSS2.1 Recommendation
defines over a hundred
different property names.
10
Which style properties of the selected elements
declaration block
declaration
em { color: red; }
p {
font-weight: bold;
}
property value
selector
rule
syntax
examples

Properties
Property Type Property
Fonts font
font-family
font-size
font-style
font-weight
@font-face
Text letter-spacing
line-height
text-align
text-decoration
text-indent
Color and background background
background-color
background-image
background-position
background-repeat
color
Borders border
border-color
border-width
border-style
border-top
border-top-color
border-top-width
etc
11
Common CSS properties

Properties
Property Type Property
Spacing padding
padding-bottom, padding-left, padding-right, padding-top
margin
margin-bottom, margin-left, margin-right, margin-top
Sizing height
max-height
max-width
min-height
min-width
width
Layout bottom, left, right, top
clear
display
float
overflow
position
visibility
z-index
Lists list-style
list-style-image
list-style-type
12
Common CSS properties continued.

Values
Each CSS declaration also contains a value for a
property.
•The unit of any given value is dependent upon
the property.
•Some property values are from a predefined list
of keywords.
•Others are values such as length measurements,
percentages, numbers without units, color values,
and URLs.
13
What style value for the properties

Color Values
CSS supports a variety of different ways of describing color
14
Method Description Example
Name Use one of 17 standard color names. CSS3
has 140 standard names.
color: red;
color: hotpink; /* CSS3 only */
RGB Uses three different numbers between 0
and 255 to describe the Red, Green, and
Blue values for the color.
color: rgb(255,0,0);
color: rgb(255,105,180);
Hexadecimal Uses a six-digit hexadecimal number to
describe the red, green, and blue value of
the color; each of the three RGB values is
between 0 and FF (which is 255 in
decimal). Notice that the hexadecimal
number is preceded by a hash or pound
symbol (#).
color: #FF0000;
color: #FF69B4;
RGBa Allows you to add an alpha, or
transparency, value. This allows a
background color or image to “show
through” the color. Transparency is a value
between 0.0 (fully transparent) and 1.0
(fully opaque).
color: rgb(255,0,0, 0.5);
HSL Allows you to specify a color using Hue
Saturation and Light values. This is
available only in CSS3. HSLA is also
available as well.
color: hsl(0,100%,100%);
color: hsl(330,59%,100%);

Units of Measurement
Some of these are relative units, in that they are
based on the value of something else, such as the size
of a parent element.
Others are absolute units, in that they have a real-
world size.
Unless you are defining a style sheet for printing, it is
recommended to avoid using absolute units.
Pixels are perhaps the one popular exception (though
as we shall see later there are also good reasons for
avoiding the pixel unit).
15
There are multiple ways of specifying a unit of measurement in CSS

Relative Units
16
Unit Description Type
px Pixel. In CSS2 this is a relative measure, while in CSS3 it is
absolute (1/96 of an inch).
Relative (CSS2)
Absolute (CSS3)
em Equal to the computed value of the font-size property of
the element on which it is used. When used for font sizes,
the em unit is in relation to the font size of the parent.
Relative
% A measure that is always relative to another value. The
precise meaning of % varies depending upon which
property it is being used.
Relative
ex A rarely used relative measure that expresses size in
relation to the x-height of an element’s font.
Relative
ch Another rarely used relative measure; this one expresses
size in relation to the width of the zero ("0") character of
an element’s font.
Relative
(CSS3 only)
rem Stands for root em, which is the font size of the root
element. Unlike em, which may be different for each
element, the rem is constant throughout the document.
Relative
(CSS3 only)
vw, vh Stands for viewport width and viewport height. Both are
percentage values (between 0 and 100) of the viewport
(browser window). This allows an item to change size
when the viewport is resized.
Relative
(CSS3 only)

Absolute Units
17
Unit Description Type
in Inches Absolute
cm Centimeters Absolute
mm Millimeters Absolute
pt Points (equal to 1/72 of an inch) Absolute
pc Pica (equal to 1/6 of an inch) Absolute

Comments in CSS
It is often helpful to add comments to your style
sheets. Comments take the form:
18
/* comment goes here */

Actually there are three …
Author-created style sheets (what we are learning in
this presentation).
User style sheets allow the individual user to tell the
browser to display pages using that individual’s own
custom style sheet. This option is available in a
browser usually in its accessibility options area.
The browser style sheet defines the default styles the
browser uses for each HTML element.
19
Different types of style sheet

Style Locations
CSS style rules can be located in three different
locations.
• Inline
• Embedded
• External
You can combine all 3!
20
Author Created CSS style rules can be located in three different locations

Inline Styles
An inline style only affects the element it is defined
within and will override any other style definitions for
the properties used in the inline style.
Using inline styles is generally discouraged since they
increase bandwidth and decrease maintainability.
Inline styles can however be handy for quickly testing
out a style change.
21
Style rules placed within an HTML element via the style attribute

EmbeddedStyleSheet
While better than inline styles, using embedded styles
is also by and large discouraged.
Since each HTML document has its own <style>
element, it is more difficult to consistently style
multiple documents when using embedded styles.
22
Style rules placed within the <style> element inside the <head> element

External Style Sheet
This is by far the most common place to locate style
rules because it provides the best maintainability.
• When you make a change to an external style
sheet, all HTML documents that reference that style
sheet will automatically use the updated version.
• The browser is able to cache the external style
sheet which can improve the performance of the site
23
Style rules placed within a external text file with the .css extension

Selectors
When defining CSS rules, you will need to first need to
use a selector to tell the browser which elements will
be affected.
CSS selectors allow you to select
• individual elements
• multiple HTML elements,
• elements that belong together in some way, or
• elements that are positioned in specific ways in
the document hierarchy.
There are a number of different selector types.
24
Things that make your life easier

Element Selectors
Uses the HTML element name.
You can select all elements by using the universal
element selector, which is the * (asterisk) character.
25
Selects all instances of a given HTML element
declaration block
declaration
em { color: red; }
p {
font-weight: bold;
}
property value
selector
rule

Grouped Selectors
You can select a group of elements by separating the different
element names with commas.
This is a sensible way to reduce the size and complexity of your
CSS files, by combining multiple identical rules into a single
rule.
26
Selecting multiple things

Reset
Grouped selectors are often used as a way to quickly
reset or remove browser defaults.
The goal of doing so is to reduce browser
inconsistencies with things such as margins, line
heights, and font sizes.
These reset styles can be placed in their own css file
(perhaps called reset.css) and linked to the page
before any other external styles sheets.
27

Class Selectors
A class selector allows you to simultaneously target
different HTML elements regardless of their position in
the document tree.
If a series of HTML element have been labeled with
the same class attribute value, then you can target
them for styling by using a class selector, which takes
the form: period (.) followed by the class name.
28
Simultaneously target different HTML elements

Class Selectors
29
<head>
<title>Share Your Travels </title>
<style>
.first {
font-style: italic;
color: brown;
}
</style>
</head>
<body>
<h1 class="first">Reviews</h1>
<div>
<p class="first">By Ricardo on <time>September 15, 2012</time></p>
<p>Easy on the HDR buddy.</p>
</div>
<hr/>
<div>
<p class="first">By Susan on <time>October 1, 2012</time></p>
<p>I love Central Park.</p>
</div>
<hr/>
</body>
.first {
font-style: italic;
color: brown;
}

Id Selectors
An id selector allows you to target a specific element
by its id attribute regardless of its type or position.
If an HTML element has been labeled with an id
attribute, then you can target it for styling by using an
id selector, which takes the form: pound/hash (#)
followed by the id name.
Note: You should only be using an id once per page
30
Target a specific element by its id attribute

Id Selectors
31
<head lang="en">
<meta charset="utf-8">
<title>Share Your Travels -- New York - Central Park</title>
<style>
#latestComment {
font-style: italic;
color: brown;
}
</style>
</head>
<body>
<h1>Reviews</h1>
<div id="latestComment">
<p>By Ricardo on <time>September 15, 2012</time></p>
</div>
<hr/>
<div>
<p>By Susan on <time>October 1, 2012</time></p>
</div>
<hr/>
</body>
#latestComment {
font-style: italic;
color: brown;
}

Id versus Class Selectors
Id selectors should only be used when referencing a
single HTML element since an id attribute can only be
assigned to a single HTML element.
Class selectors should be used when (potentially)
referencing several related elements.
32
How to decide

Attribute Selectors
An attribute selector provides a way to select HTML
elements by either the presence of an element
attribute or by the value of an attribute.
This can be a very powerful technique, but because of
uneven support by some of the browsers, not all web
authors have used them.
Attribute selectors can be a very helpful technique in
the styling of hyperlinks and images.
33
Selecting via presence of element attribute or by the value of an attribute

Attribute Selectors
34
<head lang="en">
<meta charset="utf-8">
<title>Share Your Travels</title>
<style>
[title] {
cursor: help;
padding-bottom: 3px;
border-bottom: 2px dotted blue;
text-decoration: none;
}
</style>
</head>
<body>
<div>
<img src="images/flags/CA.png" title="Canada Flag" />
<h2><a href="countries.php?id=CA" title="see posts from Canada">
Canada</a>
</h2>
<p>Canada is a North American country consisting of … </p>
<div>
<img src="images/square/6114907897.jpg" title="At top of Sulpher Mountain">
<img src="images/square/6592317633.jpg" title="Grace Presbyterian Church">
<img src="images/square/6592914823.jpg" title="Calgary Downtown">
</div>
</div>
</body>
[title] {
cursor: help;
padding-bottom: 3px;
border-bottom: 2px dotted blue;
text-decoration: none;
}

Pseudo Selectors
A pseudo-element selector is a way to select
something that does not exist explicitly as an element
in the HTML document tree but which is still a
recognizable selectable object.
A pseudo-class selector does apply to an HTML
element, but targets either a particular state or, in
CSS3, a variety of family relationships.
The most common use of this type of selectors is for
targeting link states.
35
Select something that does not exist explicitly as an element

Contextual Selectors
A contextual selector (in CSS3 also called
combinators) allows you to select elements based on
their ancestors, descendants, or siblings.
That is, it selects elements based on their context or
their relation to other elements in the document tree.
37
Select elements based on their ancestors, descendants, or siblings

Contextual Selectors
38
Selector Matches Example
Descendant A specified element that is
contained somewhere within
another specified element
div p
Selects a <p> element that is contained somewhere
within a <div> element. That is, the <p> can be any
descendant, not just a child.
Child A specified element that is a
direct child of the specified
element
div>h2
Selects an <h2> element that is a child of a <div>
element.
Adjacent
Sibling
A specified element that is the
next sibling (i.e., comes directly
after) of the specified element.
h3+p
Selects the first <p> after any <h3>.
General Sibling A specified element that shares
the same parent as the specified
element.
h3~p
Selects all the <p> elements that share the same parent
as the <h3>.

Descendant Selector
While some of these contextual selectors are used
relatively infrequently, almost all web authors find
themselves using descendant selectors.
A descendant selector matches all elements that are
contained within another element. The character used
to indicate descendant selection is the space
character.
39
Selects all elements that are contained within another element
div p { … }
context selected element
Selects a <p> element
somewhere
within a <div> element
#main div p:first-child { … }
Selects the first <p> element
somewhere within a <div> element
that is somewhere within an element
with an id="main"

Contextual Selectors in Action
40
<body>
<nav>
<ul>
<li><a href="#">Canada</a></li>
<li><a href="#">Germany</a></li>
<li><a href="#">United States</a></li>
</ul>
</nav>
<div id="main">
Comments as of <time>November 15, 2012</time>
<div>
</div>
<hr/>
<div>
</div>
<hr/>
</div>
<footer>
<ul>
<li><a href="#">Home</a> | </li>
<li><a href="#">Browse</a> | </li>
</ul>
</footer>
</body>
#main time { color: red; }
ul a:link { color: blue; }
#main div p:first-child {
color: green;
}
#main>time { color: purple; }

Why Conflict Happens
Because
• there are three different types of style sheets
(author-created, user-defined, and the default
browser style sheet),
• author-created stylesheets can define multiple rules
for the same HTML element,
CSS has a system to help the browser determine how
to display elements when different style rules conflict.
41
In CSS that is

Cascade
The “Cascade” in CSS refers to how conflicting rules
are handled.
The visual metaphor behind the term cascade is that
of a mountain stream progressing downstream over
rocks.
The downward movement of water down a cascade is
meant to be analogous to how a given style rule will
continue to take precedence with child elements.
42
How conflicting rules are handled in CSS

Cascade Principles
CSS uses the following cascade principles to help it
deal with conflicts:
• inheritance,
• specificity,
• location
43

Inheritance
Many (but not all) CSS properties affect not only
themselves but their descendants as well.
Font, color, list, and text properties are inheritable.
Layout, sizing, border, background and spacing
properties are not.
44
Cascade Principle #1

Inheritance
45
<body>
<h1> <p>
<h2>
<small>
<time>
<a>
<head>
<html>
<img>
<strong>
<h3> <div>
<p> <p>
<p>
<time>
<div>
<p> <p>
<meta> <title>
body {
font-family: Arial;
color: red;
border: 8pt solid green;
margin: 100px;
}
inherited
not inherited
inherited
not inherited

Inheritance
It is possible to tell elements to inherit properties that
are normally not inheritable.
46
How to force inheritance
div {
font-weight: bold;
margin: 50px;
}
p {
border: inherit;
margin: inherit;
}
<h3>Reviews</h3>
<div>
</div>
<hr/>
<div>
</div>
<hr/>

Inheritance
47
<body>
<h1> <p>
<h2>
<small>
<time>
<a>
<head>
<html>
<img>
<strong>
<h3> <div>
<p> <p>
<p>
<time>
<div>
<p> <p>
<meta> <title>
div {
font-weight: bold;
margin: 50px;
}
inherited
not inherited
not inherited

Specificity
Specificity is how the browser determines which style
rule takes precedence when more than one style rule
could be applied to the same element.
The more specific the selector, the more it takes
precedence (i.e., overrides the previous definition).
48

Specificity
The way that specificity works in the browser is that
the browser assigns a weight to each style rule.
When several rules apply, the one with the greatest
weight takes precedence.
49
How it works

Specificity
50
This text is not within a p element.
<p>Reviews</p>
<div>
<p>By Ricardo on <time>September 15, 2012</time
This text is not within a p element.
</div>
<hr/>
<div>
</div>
<hr/>
<div>
<p class="last">By Dave on <time>October 15, 20
<p class="last" id="verylast">Thanks for postin
</div>
<hr/>
body {
font-weight: bold;
color: red;
}
div {
font-weight: normal;
color: magenta;
}
p {
color: green;
}
.last {
color: blue;
}
#verylast {
color: orange;
font-size: 16pt;
}
These color and font-weight
properties are inheritable and thus
potentially applicable to all the child
elements contained within the body.
However, because the <div> and <p>
elements also have the same
properties set, they override the value
defined for the <body> element
because their selectors (div and p) are
more specific.
Class selectors are more specific
than element selectors, and thus
take precedence and override
element selectors.
Id selectors are more specific than
class selectors, and thus take
precedence and override class
selectors.

Specificity Algorithm
First count 1 if the declaration is from a 'style' attribute
in the HTML, 0 otherwise (let that value = a).
Count the number of ID attributes in the selector (let
that value = b).
Count the number of other attributes and pseudo-
classes in the selector (let that value = c).
Count the number of element names and pseudo-
elements in the selector (let that value = d).
Finally, concatenate the four numbers a+b+c+d
together to calculate the selector’s specificity.
51
The algorithm that is used to determine specificity is :

Specificity Algorithm
52
div {
color: green;
}
element selector
class and attribute
selectors
id selector
descendant selector
(elements only)
div form {
color: orange;
}
overrides
overrides
.example {
color: blue;
}
#firstExample {
color: magenta;
}
overrides
1
2
3
4
id +
additional
selectors
div #firstExample {
color: grey;
}
overrides
A higher specificity value
overrides lower specificity
values
inline style
attribute <div style="color: red;">
overrides
5
Specificity Value
0001
0002
0010
0100
0101
1000

Location
When inheritance and specificity cannot determine
style precedence, the principle of location will be
used.
The principle of location is that when rules have the
same specificity, then the latest are given more
weight.
53

Location
54
<head>
<link rel="stylesheet" href="stylesA.css" />
<link rel="stylesheet" href="stylesWW.css" />
<style>
#example {
color: orange;
color: magenta;
}
</style>
</head>
<body>
<p id="example" style="color: red;">
sample text
</p>
</body>
overrides
overrides
overrides
1
2
3
overrides
#example {
color: green;
}
#example {
color: blue;
}
user-styles.css
Browser’s
default style
settings
overrides
4
5
6
overrides
Can you guess what will be the color of the sample text ?

Location
What color would the sample text be if there wasn’t an inline style definition?
55
<head>
<link rel="stylesheet" href="stylesA.css" />
<link rel="stylesheet" href="stylesWW.css" />
<style>
#example {
color: orange;
color: magenta;
}
</style>
</head>
<body>
<p id="example" style="color: red;">
sample text
</p>
</body>
overrides
overrides
overrides
1
2
3
overrides
#example {
color: green;
}
#example {
color: blue;
}
user-styles.css
Browser’s
default style
settings
overrides
4
5
6
overrides

Location
There is one exception to the principle of location.
If a property is marked with !important in an author-
created style rule, then it will override any other
author-created style regardless of its location.
The only exception is a style marked with !important
in an user style sheet; such a rule will override all
others.
56
There’s always an exception

The BOX MODEL
Section 6 of 7
57

The Box Model
In CSS, all HTML elements exist within an element box.
It is absolutely essential that you familiarize yourself
with the terminology and relationship of the CSS
properties within the element box.
58
Time to think inside the box

The Box Model
59
Every CSS rule begins with a selector. The selector identifies
which element or elements in the HTML document will be
affected by the declarations in the rule. Another way of
thinking of selectors is that they are a pattern which is used
by the browser to select the HTML elements that will receive
padding
margin
element content area
border
background-color/background-image of element
width
height
background-color/background-image of element’s parent

Background
The background color or image of an element fills an
element out to its border (if it has one that is).
In contemporary web design, it has become extremely
common too use CSS to display purely presentational
images (such as background gradients and patterns,
decorative images, etc) rather than using the <img>
element.
60
Box Model Property #1

Background Properties
61
Property Description
background A combined short-hand property that allows you to set the background values
in one property. While you can omit properties with the short-hand, do
remember that any omitted properties will be set to their default value.
background-attachment Specifies whether the background image scrolls with the document (default) or
remains fixed. Possible values are: fixed, scroll.
background-color Sets the background color of the element.
background-image Specifies the background image (which is generally a jpeg, gif, or png file) for
the element. Note that the URL is relative to the CSS file and not the HTML.
CSS3 introduced the ability to specify multiple background images.
background-position Specifies where on the element the background image will be placed. Some
possible values include: bottom, center, left, and right. You can also supply a
pixel or percentage numeric position value as well. When supplying a numeric
value, you must supply a horizontal/vertical pair; this value indicates its
distance from the top left corner of the element.
background-repeat Determines whether the background image will be repeated. This is a common
technique for creating a tiled background (it is in fact the default behavior).
Possible values are: repeat, repeat-x, repeat-y, and no-repeat.
background-size New to CSS3, this property lets you modify the size of the background image.

Background Repeat
62
background-image: url(../images/backgrounds/body-background-tile.gif);
background-repeat: repeat;
background-repeat: no-repeat; background-repeat: repeat-y; background-repeat: repeat-x;

Background Position
63
body {
background: white url(../images/backgrounds/body-background-tile.gif) no-repeat;
background-position: 300px 50px;
}
300px
50px

Borders
Borders provide a way to visually separate elements.
You can put borders around all four sides of an
element, or just one, two, or three of the sides.
64
Box Model Property #2

Borders
65
Property Description
border A combined short-hand property that allows you to set the style,
width, and color of a border in one property. The order is important
and must be:
border-style border-width border-color
border-style Specifies the line type of the border. Possible values are: solid,
dotted, dashed, double, groove, ridge, inset, and outset.
border-width The width of the border in a unit (but not percents). A variety of
keywords (thin, medium, etc) are also supported.
border-color The color of the border in a color unit.
border-radius The radius of a rounded corner.
border-image The URL of an image to use as a border.

Shortcut notation
With border, margin, and padding properties, there
are long-form and shortcut methods to set the 4 sides
66
TRBL
border-top-color: red; /* sets just the top side */
border-right-color: green; /* sets just the right side */
border-bottom-color: yellow; /* sets just the bottom side */
border-left-color: blue; /* sets just the left side */
border-color: red; /* sets all four sides to red */
border-color: red green orange blue; /* sets all four sides differently */
When using this multiple values shortcut, they are applied in clockwise order starting at the top.
Thus the order is: top right bottom left.
border-color: red green orange blue;
border-color: top right bottom left;
top
right
bottom
left
TRBL (Trouble)

Margins and Padding
Box Model Properties #3 and #4
67
p {
border: solid 1pt red;
margin: 0;
padding: 0;
}
p {
margin: 30px;
padding: 0;
}
p {
margin: 30px;
padding: 30px;
}

Margins
Did you notice that the space
between paragraphs one and two and
between two and three is the same
as the space before paragraph one
and after paragraph three?
This is due to the fact that adjoining
vertical margins collapse.
68
Why they will cause you trouble.
p {
margin: 0;
padding: 0;
}
p {
margin: 30px;
padding: 0;
}
p {
margin: 30px;
padding: 30px;
}

Collapsing Margins
69
90px
90px
90px
50px
50px
50px
50px
div {
border: dotted 1pt green;
padding: 0;
margin: 90px 20px;
}
p {
padding: 0;
margin: 50px 20px;
}
<div>
<p>Every CSS rule ...</p>
<p>Every CSS rule ...</p>
</div>
<div>
<p>In CSS, the adjoining ... </p>
<p>In CSS, the adjoining ... </p>
</div>
1
2
3
4
5
50px
50px
If overlapping margins did not collapse, then margin space for
would be 180p (90pixels for the bottom margin of the first <div> +
90 pixels for the top margin of the second <div>), while the margins
and for would be 100px.
However, as you can see this is not the case.

Collapsing Margins
When the vertical margins of two elements touch,
• the largest margin value of the elements will be
displayed
• the smaller margin value will be collapsed to zero.
Horizontal margins, on the other hand, never collapse.
To complicate matters even further, there are a large
number of special cases in which adjoining vertical
margins do not collapse.
70
How it works

Width and Height
The width and height properties specify the size of the
element’s content area.
Perhaps the only rival for collapsing margins in
troubling our students, box dimensions have a number
of potential issues.
71
Box Model Properties #5 and #6

Width and Height
Only block-level elements and non-text inline
elements such as images have a width and height that
you can specify.
By default the width of and height of elements is the
actual size of the content.
For text,
• this is determined by the font size and font face;
For images,
• the width and height of the actual image in pixels
determines the element box’s dimensions.
72
Potential Problem #1

Width and Height
Since the width and the height refer to the size of the
content area, by default, the total size of an element is
equal to not only its content area, but also to the sum
of its padding, borders, and margins.
73
Potential Problem #2

200px
100px
div {
box-sizing: content-box;
width: 200px;
height: 100px;
padding: 5px;
margin: 10px;
border: solid 2pt black;
}
10px 5 5 10px
2 2
True element width = 10 + 2 + 5 + 200 + 5 + 2 + 10 = 234 px
True element height = 10 + 2 + 5 + 100 + 5 + 2 + 10 = 134 px
div {
...
box-sizing: border-box;
}
True element width = 10 + 200 + 10 = 220 px
True element height = 10 + 100 + 10 = 120 px
100px
200px 10px
10px
Default
74

Width and Height
75
p {
background-color: silver;
width: 200px;
height: 100px;
}
p {
background-color: silver;
}
100px
}

Overflow Property
76
overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: auto;

Sizing Elements
While the previous examples used pixels for its
measurement, many contemporary designers prefer to
use percentages or em units for widths and heights.
• When you use percentages, the size is relative to
the size of the parent element.
• When you use ems, the size of the box is relative to
the size of the text within it.
The rationale behind using these relative measures is
to make one’s design scalable to the size of the
browser or device that is viewing it.
77
Time to embrace ems and percentages

<body>
<div class="pixels">
Pixels - 200px by 50 px
</div>
<div class="percent">
Percent - 50% of width and height
</div>
</body>
<body>
<div class="parentFixed">
<strong>parent has fixed size</strong>
PERCENT - 50% of width and height
</div>
</div>
<div class="parentRelative">
<strong>parent has relative size</strong>
PERCENT - 50% of width and height
</div>
</div>
</body>
<style>
html,body {
margin:0;
width:100%;
height:100%;
background: silver;
}
.pixels {
width:200px;
height:50px;
background: teal;
}
.percent {
width:50%;
height:50%;
background: olive;
}
.parentFixed {
width:400px;
height:150px;
background: beige;
}
.parentRelative {
width:50%;
height:50%;
background: yellow;
}
</style>
50%
50%
50%
50%
50%
50%
50% 50%
50% of parent (= 200px)
50% of parent (= 200px)
50% 50%
50% of parent
78

Developer Tools
Developer tools in current browsers make it
significantly easier to examine and troubleshot CSS
than was the case a decade ago.
You can use the various browsers’ CSS inspection tools
to examine, for instance, the box values for a selected
element.
79
Help is on the way

Developer Tools
80
Chrome – Inspect Element Firefox – Inspect
Internet Explorer – Developer Tools
Opera – Inspect Element

TEXT STYLING
Section 7 of 7
81

Text Properties
CSS provides two types of properties that affect text.
• font properties that affect the font and its
appearance.
• paragraph properties that affect the text in a
similar way no matter which font is being used.
82
Two basic types

Font-Family
A word processor on a desktop machine can make use
of any font that is installed on the computer; browsers
are no different.
However, just because a given font is available on the
web developer’s computer, it does not mean that that
same font will be available for all users who view the
site.
For this reason, it is conventional to supply a so-called
web font stack, that is, a series of alternate fonts to
use in case the original font choice in not on the user’s
computer.
83
A few issues here

Specifying the Font-Family
84
p { font-family: Cambria, Georgia, "Times New Roman", serif; }
Use this font as
the first choice
But if it is not available,
then use this one
If it isn’t available, then
use this one
And if it is not available
either, then use the
default generic serif font
1
2
3
4

Generic Font-Family
The font-family property supports five different
generic families.
The browser supports a typeface from each family.
85
This
This
This
This
This
serif
sans-serif
monospace
cursive
fantasy
Th
Th
serif
Without
("sans") serif
This In a monospace font,
each letter has the
same width
Decorative and cursive fonts
vary from system to system;
rarely used as a result.
Generic
Font-Family
Name
This
In a regular,
proportionally-spaced
font, each letter has a
variable width

@font-face
Over the past few years, the most recent browser
versions have begun to support the @font-face
selector in CSS.
This selector allows you to use a font on your site even
if it is not installed on the end user’s computer.
Due to the on-going popularity of open source font
sites such as Google Web Fonts
(http://www.google.com/webfonts) and Font Squirrel
(http://www.fontsquirrel.com/), @font-face seems to
have gained a critical mass of widespread usage.
86
The future is now

Font Sizes
The issue of font sizes is unfortunately somewhat
tricky.
In a print-based program such as a word processor,
specifying a font size in points is unproblematic.
However, absolute units such as points and inches do
not translate very well to pixel-based devices.
Somewhat surprisingly, pixels are also a problematic
unit.
Newer mobile devices in recent years have been
increasing pixel densities so that a given CSS pixel
does not correlate to a single device pixel.
87
Mo control, mo problems

Font Sizes
If we wish to create web layouts that work well on
different devices, we should learn to use relative units
such as em units or percentages for our font sizes (and
indeed for other sizes in CSS as well).
One of the principles of the web is that the user
should be able to change the size of the text if he or
she so wishes to do so.
Using percentages or em units ensures that this user
action will work.
88
Welcome ems and percents again

How to use ems and percents
When used to specify a font size, both em units and
percentages are relative to the parent’s font size.
89

90
Browser’s default text size is usually 16 pixels
200% or 2em is 32 pixels
150% or 1.5em is 24 pixels
125% or 1.125em is 18 pixels
<body>
<h3>
<h2>
<h1>
100% or 1em is 16 pixels
<p>
/* using 16px scale */
body { font-size: 100%; }
h3 { font-size: 1.125em; } /* 1.25 x 16 = 18 */
h2 { font-size: 1.5em; } /* 1.5 x 16 = 24 */
h1 { font-size: 2em; } /* 2 x 16 = 32 */
<body>
<p>this will be about 16 pixels</p>
<h1>this will be about 32 pixels</h1>
<p>this will be about 16 pixels</p>
</body>

While this looks pretty easy to master, things
unfortunately can quickly become quite complicated.
Remember that percents and em units are relative to
their parents, so if the parent font size changes, this
affects all of its contents.
91
It might seem easy … but it’s not …

ems and percents
92
p { font-size: 1em; } /* 1 x 16 = 16px */
h1 { font-size: 2em; } /* 2 x 16 = 32px */
<body>
<p>this is 16 pixels</p>
<h1>this is 32 pixels</h1>
<article>
<div>
</div>
</article>
</body>
p { font-size: 1em; }
h1 { font-size: 2em; }
article { font-size: 75% } /* h1 = 2 * 16 * 0.75 = 24px
p = 1 * 16 * 0.75 = 12px */
div { font-size: 75% } /* h1 = 2 * 16 * 0.75 * 0.75 = 18px
p = 1 * 16 * 0.75 * 0.75 = 9px */

The rem unit
CSS3 now supports a new relative measure, the rem
(for root em unit).
This unit is always relative to the size of the root
element (i.e., the <html> element).
However, since Internet Explorer prior to version 9 do
not support the rem units, you need to provide some
type of fallback for those browsers.
93
Solution to font sizing hassles?

The rem unit
94
p {
font-size: 16px; /* for older browsers: won’t scale properly though */
font-size: 1rem; /* for new browsers: scales and simple too */
}
h1 { font-size: 2em; }
article { font-size: 75% } /* h1 = 2 * 16 * 0.75 = 24px
p = 1 * 16 = 16px */
div { font-size: 75% } /* h1 = 2 * 16 * 0.75 * 0.75 = 18px
p = 1 * 16 = 16px */

CSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS

More Related Content

Similar to CSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS (20)

Recently uploaded (20)

CSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS