CSS: Introduction
PV219, spring 2023
Agenda
1. What is CSS?
2. CSS Syntax
3. Location of Styles
4. Selectors
5. The Cascade: How Styles Interact
6. The Box Model
7. CSS Selectors Level 3/4 – teaser
8. CSS Text Styling
7
What is CSS?
What is CSS?
CSS is a W3C standard for describing the presentation
(or appearance) of HTML elements.
With CSS, we can assign
• font properties,
• colors,
• sizes,
• borders,
• background images,
• even the position of elements.
What is CSS?
CSS is a language in that it has its own syntax rules.
CSS can be added directly to any HTML element (via
the style attribute), within the element, or,
most commonly, in a separate text file that contains
only CSS.
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.
Why using CSS is a better way of describing presentation than HTML
CSS Versions
• W3C published the CSS Level 1 Recommendation in
1996.
• A year later, the CSS Level 2 Recommendation (also
more succinctly labeled simply as CSS2) was published.
• Even though work began over a decade ago, an updated
version of the Level 2 Recommendation, CSS2.1, did not
become an official W3C Recommendation until June
2011.
• And to complicate matters even more, all through the
last decade (and to the present day as well), during the
same time the CSS2.1 standard was being worked on, a
different group at the W3C was working on a CSS3 draft.
Let’s just say there’s more than 1
Browser Adoption
While Microsoft’s Internet Explorer was an early
champion of CSS, its later versions (especially IE5, IE6,
and IE7) for Windows had uneven support for certain
parts of CSS2.
In fact, all browsers have left certain parts of the CSS2
Recommendation unimplemented.
CSS has a reputation for being a somewhat frustrating
language.
• this reputation is well deserved!
CSS Syntax
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).
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
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 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.
• The browser
ignores white space
• Each declaration is
terminated with a
semicolon.
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.
Which elements
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
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 the style.
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.
Which style properties of the selected elements
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
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
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
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.
What style value for the properties
Color Values
CSS supports a variety of different ways of describing color
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 realworld
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).
There are multiple ways of specifying a unit of measurement in CSS
Relative Units
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
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:
/* comment goes here */
Location of Styles
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.
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.
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.
Style rules placed within an HTML element via the style attribute
While better than inline styles, using embedded styles
is also by and large discouraged.
Since each HTML document has its own
Reviews
By Ricardo on
Easy on the HDR buddy.
By Susan on
I love Central Park.
.first {
font-style: italic;
color: brown;
}
Class Selectors
• You can also specify that only specific HTML elements should be
affected by a class. In the example below, only
elements with
class="center" will be center-aligned:
• HTML elements can also refer to more than one class. In the
example below, the
element will be styled according to
class="center" and to class="large":
p.center {text-align: center;}
This paragraph refers
to two classes.
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.
Target a specific element by its id attribute
Id Selectors
Share Your Travels -- New York - Central Park
Reviews
By Ricardo on
Easy on the HDR buddy.
By Susan on
I love Central Park.
#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.
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 historical support by some of the browsers,
not all web authors have used them. All modern
browsers have full support.
Attribute selectors can be a very helpful technique in
the styling of hyperlinks and images.
Selecting via presence of element attribute or by the value of an attribute
Attribute Selectors
Share Your Travels
Canada is a North American country consisting of …
[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.
Select something that does not exist explicitly as an element
Pseudo Selectors
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.
Select elements based on their ancestors, descendants, or siblings
Contextual Selectors
Selector Matches Example
Descendant A specified element that is
contained somewhere within
another specified element
div p
Selects a
element that is contained
somewhere within a
element. That is,
the
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
element that is a child of a
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
after any
.
General Sibling A specified element that shares
the same parent as the
specified element.
h3 ~ p
Selects all the
elements that share the
same parent as the
.
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.
Selects all elements that are contained within another element
div p { … }
context selected element
Selects a
element
somewhere
within a
element
#main div p:first-child { … }
Selects the first
element
somewhere within a
element
that is somewhere within an element
with an id="main"
Contextual Selectors in Action
Comments as of
By Ricardo on
Easy on the HDR buddy.
By Susan on
I love Central Park.
#main time { color: red; }
ul a:link { color: blue; }
#main div p:first-child {
color: green;
}
#main>time { color: purple; }
The Cascade: How Styles Interact
Why Conflict Happens
Because
• there are three different types of style sheets (authorcreated,
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.
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.
How conflicting rules are handled in CSS
Cascade Principles
CSS uses the following cascade principles to help it
deal with conflicts:
• inheritance,
• specificity,
• location.
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.
Cascade Principle #1
Inheritance
