Introduction to
CSS
Chapter 4
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
© 2017 Pearson
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd
Ed.
http://www.funwebdev.com
Chapter 4
1 What Is CSS?
2 CSS Syntax
3 Location of
Styles 4 Selectors
5 6
The Cascade: How The Box Model
Styles Interact
7 8
CSS Text Styling Summary
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 4
1 What Is CSS?
2 CSS Syntax
3 Location of
Styles 4 Selectors
5 6
The Cascade: How The Box Model
Styles Interact
7 8
CSS Text Styling Summary
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
What Is CSS?
Cascading Style Sheets (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.
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
What Is CSS?
Benefits of CSS
• Improved control over formatting.
• Improved site maintainability.
• Improved accessibility.
• Improved page-download speed.
• Improved output flexibility (responsive design)
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
What Is CSS?
CSS Versions
• 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
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
What Is CSS?
Browser Adoption
• 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
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 4
1 What Is CSS?
2 CSS Syntax
3 Location of
Styles 4 Selectors
5 6
The Cascade: How The Box Model
Styles Interact
7 8
CSS Text Styling Summary
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
CSS Syntax
Overview
• 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 .
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
CSS Syntax
Overview
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
CSS Syntax
Selectors
• 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
• Many ways to write selectors (stay tuned…)
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
CSS Syntax
Properties
• Each individual CSS declaration must contain a
property.
• The CSS2.1 recommendation defines over a
hundred different property names
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
CSS Syntax
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
box-shadow
color
opacity
Borders border*
border-color
border-width
border-style
border-top, border-left, ...*
border-image*
border-radius
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
CSS Syntax
Properties
Property Type Property
Spacing padding
padding-bottom, padding-left, ...
margin
margin-bottom, margin-left, ...
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
Effects animation*
filter
perspective
transform*
transition*
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
CSS Syntax
Values
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.
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
CSS Syntax
Colors
• Name
• RGB
• Hexadecimal
• RGBa
• HSL
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
CSS Syntax
Relative and absolute Units
• Relative
• px
• em
• %
• vw,vh
• Absolute
• In
• cm
• Pt
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 4
1 What Is CSS?
2 CSS Syntax
3 Location of
Styles 4 Selectors
5 6
The Cascade: How The Box Model
Styles Interact
7 8
CSS Text Styling Summary
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Location of Styles
Inline Styles
Inline styles are style rules placed within an HTML
element via the style attribute
<h1>Share Your Travels</h1>
<h2 style="font-size: 24pt">Description</h2>
...
<h2 style="font-size: 24pt; font-weight:bold;">
Reviews</h2>
Using inline styles is generally discouraged
Handy for quickly testing out a style change
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Location of Styles
Embedded Style Sheet
Embedded style sheets (also called internal styles) are style rules placed
within the <style> element (inside the <head> element of an HTML
document).
<head>
<meta charset="utf-8">
<title>Share Your Travels -- New York - Central Park</title>
<style>
h1 { font-size: 24pt; }
h2 {
font-size: 18pt;
font-weight: bold;
}
</style>
</head>
<body>
...
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Location of Styles
External Style Sheet
External style sheets are style rules placed within a
external text file with the .css extension.
<head>
<meta charset="utf-8">
<title>Share Your Travels -- New York - Central
Park</title>
<link rel="stylesheet" href="styles.css" />
</head>
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Location of Styles
External Style Sheet
There are in fact three different types of style sheet:
1. Author-created style sheets (what you are
learning in this chapter)
2. User style sheets
3. Browser style sheets
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 4
1 What Is CSS?
2 CSS Syntax
3 Location of
Styles 4 Selectors
5 6
The Cascade: How The Box Model
Styles Interact
7 8
CSS Text Styling Summary
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Selectors
Remember the DOM tree
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Selectors
Element Selectors
Element selectors select all instances of a given HTML
element.
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Selectors
Class Selectors
A class selector allows you to simultaneously target
different HTML elements regardless of their position in
the document tree using the same class attribute
value.
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Selectors
Class Selectors
<head>
<title>Share Your Travels </title>
<style>
.first {
font-style: italic;
color: red;
}
</style>
</head>
<body>
<h1 class="first">Reviews</h1>
<div>
<p class="first">By Ricardo on <time>2016-05-23</time></p>
<p>Easy on the HDR buddy.</p>
</div>
<hr/>
<div>
<p class="first">By Susan on <time>2016-11-18</time></p>
<p>I love Central Park.</p>
</div>
<hr/>
</body>
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Selectors
Id Selectors
An id selector allows you to target a specific element
by its id attribute regardless of its type or position
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Selectors
Id Selectors
<head>
<title>Share Your Travels </title>
<style>
#latestComment {
font-style: italic;
color: red;
}
</style>
</head>
<body>
<h1 class="first">Reviews</h1>
<div id="latestComment">
<p class="first">By Ricardo on <time>2016-05-23</time></p>
<p>Easy on the HDR buddy.</p>
</div>
<hr/>
<div>
<p class="first">By Susan on <time>2016-11-18</time></p>
<p>I love Central Park.</p>
</div>
<hr/>
</body>
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Selectors
Attribute Selectors
An attribute selector provides a way to select HTML
elements either by the presence of an element
attribute or by the value of an attribute
[title] { … }
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Selectors
Attribute Selectors
<head>
<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 Sulphur Mountain" />
<img src="images/square/6592317633.jpg” title="Grace Presbyterian Church" />
<img src="images/square/6592914823.jpg” title="Calgary Downtown" />
</div>
</div>
</body>
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Selectors
Attribute Selectors
Selector Matches
[] A specific attribute.
[=] A specific attribute with a specific value.
[~=] A specific attribute whose value matches
at least one of the words in a space delimited
list of words.
[^=] A specific attribute whose value begins
with a specified value.
[*=] A specific attribute whose value contains
a substring.
[$=] A specific attribute whose value ends
with a specified value.
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Selectors
Pseudo-Element and Pseudo-Class 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 anHTML
element, but targets either a particular state or, in
CSS3, a variety of family relationships.
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Selectors
Pseudo-Element and Pseudo-Class Selectors
• a:link
• a:visited
• :focus
• :hover
• :active
• :checked
• :first-child
• :first-letter
• :first-line
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Selectors
Pseudo-Element and Pseudo-Class Selectors
<style>
a:link {
text-decoration: underline;
color: blue;
}
a:visited {
text-decoration: underline;
color: purple;
}
a:hover {
text-decoration: none;
font-weight: bold;
}
a:active {
background-color: yellow;
}
</style>
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Selectors
Contextual Selectors
Selector Matches Example
Descendant A specified element that is contained div p
somewhere within another specified Selects a <p> element that is
element. contained somewhere within a <div>
element.
Child A specified element that is a direct div>h2
child of the specified element. Selects an <h2> element that is a
child of a <div>
element.
Adjacent Sibling A specified element that is the next h3+p
sibling (i.e., comes directly after) of Selects the first <p> after any <h3>.
the specified element
General Sibling A specified element that shares h3~p
the same parent as the specified Selects all the <p> elements that
element. share the same
parent as the <h3>.
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Selectors
Contextual Selectors
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 4
1 What Is CSS?
2 CSS Syntax
3 Location of
Styles 4 Selectors
5 6
The Cascade: How The Box Model
Styles Interact
7 8
CSS Text Styling Summary
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Cascade: How Styles Interact
CSS
The “Cascade” in CSS refers to how conflicting rules
are handled.
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
CSS uses the following cascade principles to help it
deal with conflicts:
• inheritance,
• specificity, and
• location
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Cascade: How Styles Interact
Inheritance
Many (but not all) CSS properties affect not only themselves but their descendants
as well.
Are inheritable:
• Font,
• color,
• list, and
• text properties
Not inheritable:
• layout,
• sizing,
• border,
• background, and
• spacing properties
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Cascade: How Styles Interact
Inheritance
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Cascade: How Styles Interact
Inheritance
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Cascade: How Styles Interact
Specificity
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Cascade: How Styles Interact
Specificity
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Cascade: How Styles Interact
Specificity Algorithm
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Cascade: How Styles Interact
Location
1. Browser Style Sheets
2. User Style Sheets
3. External Style Sheets
4. Embedded Style Sheets
5. Inline Style Sheets
When multiple style sheets are at the same level, the
later one overrides the previous one.
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Cascade: How Styles Interact
Location
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Cascade: How to Start with an Even
Playing Field
reset.css
• 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 style sheets.
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Cascade: How to Start with an Even
Playing Field
reset.css
• An example of a simplified reset is shown below:
html, body, div, span, h1, h2, h3, h4, h5, h6, p {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 4
1 What Is CSS?
2 CSS Syntax
3 Location of
Styles 4 Selectors
5 6
The Cascade: How The Box Model
Styles Interact
7 8
CSS Text Styling Summary
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Box Model
Overview
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Box Model
Background
• Background
• Background-attachment
• Background-color
• Background-image
• Background-position
• Background-repeat
• Background-size
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Box Model
Background
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Box Model
Collapsing Margins
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Box Model
CSS TRBL Shortcut
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 */
Alternately, we can set all four sides at once:
border-color: red; /* sets all four sides to red */
border-color: red green orange blue; /* sets 4 colors */
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Box Model
Box Dimensions
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Box Model
Limitations of Height Property
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Box Model
Overflow Property
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Box Model
Box Sizing Using Percents
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
The Box Model
Inspecting CSS using modern browsers
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 4
1 What Is CSS?
2 CSS Syntax
3 Location of
Styles 4 Selectors
5 6
The Cascade: How The Box Model
Styles Interact
7 8
CSS Text Styling Summary
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
CSS Text Styling
Font Family
Property Description
font A combined shorthand property that allows you to
set the family, style, size, variant, and weight in one
property.
style weight variant size font-family
font-family Specifies the typeface/font to use. More than one
can be specified.
font-size The size of the font in one of the measurement
units
font-style Specifies whether italic, oblique, or normal
font-variant Specifies either small-caps text or none
font-weight Specifies either normal, bold, bolder, lighter, or a
value between 100 and 900 in multiples of 100,
where larger number represents
weightier (i.e., bolder) text.
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
CSS Text Styling
Specifying the Font Family
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
CSS Text Styling
Different Font Families
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
CSS Text Styling
Font Sizes
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
CSS Text Styling
Font Face
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
CSS Text Styling
Paragraph Properties
Just as there are properties that affect the font in CSS,
there are also a range of CSS properties that affect text
independently of the font.
• letter-spacing
• line-height
• text-align
• text-decoration
• text-diretion
• text-shadow
• …
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
CSS Text Styling
Just look at text-shadow
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 4
1 What Is CSS?
2 CSS Syntax
3 Location of
Styles 4 Selectors
5 6
The Cascade: How The Box Model
Styles Interact
7 8
CSS Text Styling Summary
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Summary
Key Terms
absolute units class selector declaration block
attribute selector collapsing margins descendant
selector
author-created combinators
style element box
contextual selector
sheets element selectors
CSS
box model em units
CSS3 modules
browser style embedded style
sheets declaration sheets
cascade external style
sheets
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Summary
Key Terms
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Questions
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
