HTML5 and CSS3

7 Edition
th

Tutorial 2
Getting Started with CSS
 Objectives XP

• Explore the history of CSS

• Study different types of style sheets
• Explore style precedence and inheritance
• Apply color in CSS
• Use contextual selectors
• Work with attribute selectors

New Perspectives on HTML5 and CSS3, 7th Edition 2

 Objectives (continued) XP

• Apply text and font styles

• Use a web font
• Define list styles
• Work with margins and padding space
• Use pseudo-classes and pseudo-elements
• Insert page content with CSS

New Perspectives on HTML5 and CSS3, 7th Edition 3

 CSS Styles and Colors XP

New Perspectives on HTML5 and CSS3, 7th Edition 4

 Introducing CSS XP

• The appearance of the page is determined by

one or more style sheets written in the
Cascading Style Sheets (CSS) language
• The latest version of the CSS language is CSS3
• CSS3 is built upon several modules, where
each module is focused on a separate design
topic

New Perspectives on HTML5 and CSS3, 7th Edition 5

 Types of Style Sheets XP

• Browser styles or user agent styles – Styles

built into the browser
• User-defined styles – Styles defined by a user
based on the configuration setting of the user’s
browser
• External styles – Styles created by a website
author, placed within a CSS file, and linked to
the page

New Perspectives on HTML5 and CSS3, 7th Edition 6

 Types of Style Sheets (continued) XP
• Embedded styles – Styles added to the head of
an HTML document
• Inline styles – Styles added as element
attributes within an HTML document and
applied to only that particular element

New Perspectives on HTML5 and CSS3, 7th Edition 7

 Exploring Style Rules XP

• The general syntax of a CSS style rule is

selector{
property1: value1;
property2: value2;
...
}

New Perspectives on HTML5 and CSS3, 7th Edition 8

 Exploring Style Rules (continued) XP

• Browser extensions are an extended library of

style properties in the browser
• Vendor prefix – Indicates the browser vendor
that created and supports the style property

New Perspectives on HTML5 and CSS3, 7th Edition 9

 Embedded Style Sheets XP

• They are inserted directly into the HTML file as

metadata by adding the following element to
the document head
<style>
style rules
</style>
where style rules are the different rules
embedded in the HTML page

New Perspectives on HTML5 and CSS3, 7th Edition 10

 Inline Styles XP

• They are styles applied directly to specific

elements using the following style attribute
<element style=“property1: value1;
property2: value2; …”>
content
</element>
where the property: value pairs define the
styles applied directly to that element

New Perspectives on HTML5 and CSS3, 7th Edition 11

 Style Specificity and Precedence XP

• The more specific style rule has precedence

over the more general style rule
• Specificity is an issue when two or more styles
conflict
• If two rules have equal specificity and equal
importance, then the one that is defined last
has precedence

New Perspectives on HTML5 and CSS3, 7th Edition 12

 Style Inheritance XP

• Style inheritance – Process in which properties

are passed from a parent element to its
children
• For example, the following style rule sets the
color of article text to blue and the rule is
passed to any paragraph or other elements
nested within that article
article {color: blue;}
p {text-align: center;}

New Perspectives on HTML5 and CSS3, 7th Edition 13

 Browser Developer Tools XP

• They allow designers to view HTML code and

CSS styles
• They make it easier to locate the source of a
style that has been applied to a specific page
element
• They are different in each browser and are
updated and improved constantly

New Perspectives on HTML5 and CSS3, 7th Edition 14

 Writing Style Comments XP

New Perspectives on HTML5 and CSS3, 7th Edition 15

 Importing Style Sheets XP

• @import is a CSS at-rule used to import the

content of a style sheet file
@import url(url);
where url is the URL of an external
stylesheet file
• It is similar to adding link elements to an
HTML file

New Perspectives on HTML5 and CSS3, 7th Edition 16

 Working with Color in CSS XP

• Color values – Values in which the color is

given by an exact numeric representation
• RGB triplet – The intensity of primary colors
expressed as a set of numbers in CSS
rgb(red, green, blue)
• Hexadecimal numbers – A number expressed
in the base 16 numbering system

New Perspectives on HTML5 and CSS3, 7th Edition 17

 RGB Color Values XP

New Perspectives on HTML5 and CSS3, 7th Edition 18

 HSL Color Values XP

• Hue – Tint of a color, represented by a

direction on a color wheel
• Saturation – Measures the intensity of a color
and ranges from 0% (no color) up to 100% (full
color)
• Lightness – Measures the brightness of a color
and ranges from 0% (black) up to 100% (white)

New Perspectives on HTML5 and CSS3, 7th Edition 19

 HSL Color Values (continued) XP

New Perspectives on HTML5 and CSS3, 7th Edition 20

 Defining Semi-Opaque Colors XP

• Opacity – Defines how solid a color appears

• A color’s opacity is specified using the
following properties:
– rgba(red, green, blue, opacity)
– hsla(hue, saturation, lightness,
opacity)
where opacity sets the opacity of the color
ranging from 0 (completely transparent) up to
1.0 (completely opaque)

New Perspectives on HTML5 and CSS3, 7th Edition 21

 Setting Text and Background ColorXP
• CSS defines the text and background color for
each element on a webpage
color: color;
background-color: color;
where color is a color name or a color value

New Perspectives on HTML5 and CSS3, 7th Edition 22

 Employing Progressive XP
Enhancement
• Progressive enhancement – A technique of
placing the code conforming to elder standards
before newer properties
• It provides support for older browsers and
allows newer standards to be used by the
browsers that support them

New Perspectives on HTML5 and CSS3, 7th Edition 23

 Contextual Selectors XP

• Contextual selector – Specifies the context

under which a particular page element is
matched
• Context is based on the hierarchical structure
of a document, whichs involves the
relationships between a parent element
containing one or more child elements and
within those child elements several levels of
descendant elements

New Perspectives on HTML5 and CSS3, 7th Edition 24

 Contextual Selectors (continued 1)XP

New Perspectives on HTML5 and CSS3, 7th Edition 25

 Contextual Selectors (continued 2)XP
• To match any element, a wildcard selector
with the * character is used
• Sibling selectors are used to select elements
based on elements that are adjacent to them
in the document hierarchy

New Perspectives on HTML5 and CSS3, 7th Edition 26

 Attribute Selectors XP

• Selectors also can be defined based on

attributes and attribute values within elements
– id – Identifies specific elements within the
document
– class– Identifies a group of elements that share a
similar characteristic or property

New Perspectives on HTML5 and CSS3, 7th Edition 27

 Attribute Selectors (continued) XP

New Perspectives on HTML5 and CSS3, 7th Edition 28

 Working with Fonts XP

• Typography is the art of designing the

appearance of characters and letters on a page
• Color and font are one of few properties in the
CSS family of typographical styles

New Perspectives on HTML5 and CSS3, 7th Edition 29

 Choosing a Font XP

• Text characters are based on fonts that define

the style and appearance of each character in
the alphabet
• The general structure of defining font for any
page element is
font-family: fonts;
where fonts is a comma-separated list,
also known as a font stack

New Perspectives on HTML5 and CSS3, 7th Edition 30

 Choosing a Font (continued) XP

• Specific font – Identified by name and based

on a font definition file stored in a user’s
computer or accessible on the web
• Generic font – Describes the general
appearance of the characters in the text but
does not specify any particular font definition
file
– Supports the font groups serif, sans-serif,
monospace, cursive, and fantasy

New Perspectives on HTML5 and CSS3, 7th Edition 31

 Styling Web Page Text XP

New Perspectives on HTML5 and CSS3, 7th Edition 32

 Exploring Web Fonts XP

• Web font – Definition font is supplied to the

browser in an external file because web safe
fonts limit the number of fonts choices

New Perspectives on HTML5 and CSS3, 7th Edition 33

 The @font-face Rule XP

• To access and load a web font, add the @font-

face rule to the style sheet
• Once a web font is defined using the @font-
face rule, it is included in the font stack

New Perspectives on HTML5 and CSS3, 7th Edition 34

 The @font-face Rule (continued 1)XP
• The general syntax to include @font-face is
@font-face {
font-family: name;
src: url (‘url1’) format
(‘text1’),
url (‘url2’) format
(‘text2’),
…;
descriptor1: value1;
descriptor2: value2;
…
}
New Perspectives on HTML5 and CSS3, 7th Edition 35
 The @font-face Rule (continued 2)XP
where name is the name of the font, url is
the location of the font definition file, text is
an optional text description of the font
format, and the descriptor1: value1;
pairs are optional style properties of the font

New Perspectives on HTML5 and CSS3, 7th Edition 36

 Setting the Font Size XP

• To set a font size, use the style property

font-size: size;
where size is a CSS unit of length in either
relative or absolute units.
• Absolute units – Fixed in size regardless of the
output device and are used only with printed
media
• Relative units – Expressed relative to the size
of other objects within the web page or to the
display properties of the device itself
New Perspectives on HTML5 and CSS3, 7th Edition 37
 Scaling Fonts with ems and rems XP

• Text is made scalable with all font sizes

expressed relative to default font sizes
• The three relative measurements used to
provide scalability are
– percentage
– em unit
– rem or root em unit

New Perspectives on HTML5 and CSS3, 7th Edition 38

 Using Viewport Units XP

• Viewport unit – A relative unit used to express

length as a percentage if the width and height
if the browser window
• CSS3 introduced four viewport units
– 1 vw = 1% of the browser window width
– 1 vh = 1% of the browser window height
– 1 vmin = 1 vw or 1 vh (whichever is smaller)
– 1 vmax = 1 vw or 1 vh (whichever is larger)

New Perspectives on HTML5 and CSS3, 7th Edition 39

 Sizing Keywords XP

• Font sizes are expressed using the following

keywords
– xx-small
– x-small
– small
– medium
– large
– x-large
– xx-large
– larger
– smaller
New Perspectives on HTML5 and CSS3, 7th Edition 40
 Controlling Spacing and XP
Indentation
• Kerning measures the amount of space
between characters, while tracking measures
the amount of space between words
• The properties to control an element’s kerning
and tracking are:
letter-spacing: value;
word-spacing: value;

New Perspectives on HTML5 and CSS3, 7th Edition 41

 Controlling Spacing and XP
Indentation (continued 1)
• Leading – Measures the amount of space
between lines of text and is set using the
following line-height property:
line-height: size;
• Text spacing can be controlled by setting the
indentation for the first line of text block by
using the text-indent property
text-indent: size;

New Perspectives on HTML5 and CSS3, 7th Edition 42

 Controlling Spacing and XP
Indentation (continued 2)

New Perspectives on HTML5 and CSS3, 7th Edition 43

 Working with Font Styles XP

• To specify the font style, use

font-style: type;
where type is normal, italic, or oblique
• To change the weight of the font, use
font-weight: weight;
where weight is the level of bold formatting
applied to the text

New Perspectives on HTML5 and CSS3, 7th Edition 44

 Working with Font Styles
XP
(continued 1)
• To specify a text decoration, use
text-decoration: type;
where type is none, underline, overline, or
line-through
• To transform text, use
text-transform: type;
where type is capitalize, uppercase,
lowercase, or none

New Perspectives on HTML5 and CSS3, 7th Edition 45

 Working with Font Styles
XP
(continued 2)
• To display a font variant of text, use
font-variant: type;
where type is normal or small-caps

New Perspectives on HTML5 and CSS3, 7th Edition 46

 Aligning Text Horizontally and
XP
Vertically
• To horizontally align the text , use
text-align: alignment;
where alignment is left, right, center, or
justify
• To vertically align the text within each line, use
vertical-align: alignment;
where alignment is baseline, bottom, middle,
sub, super, text-bottom, text-top, or top

New Perspectives on HTML5 and CSS3, 7th Edition 47

 Aligning Text Horizontally and XP
Vertically (continued)

New Perspectives on HTML5 and CSS3, 7th Edition 48

 Combining All Text Formatting XP
in a Single Style
• The text and font styles can be combined using
the following shorthand font property:
font: style variant weight
size/height family;
where style is the font’s style, variant is the
font variant, weight is the font weight, size is
the font size, height is the height of each line,
and family is the font stack

New Perspectives on HTML5 and CSS3, 7th Edition 49

 Combining All Text Formatting
XP
in a Single Style (continued)

New Perspectives on HTML5 and CSS3, 7th Edition 50

 Formatting Lists XP

• List marker – It is the default browser style

symbol displayed before each list item for
unordered and ordered lists
• To change the type of list marker or to prevent
any display of a list marker, use
list-style-type: type;
where type is the various types of markers

New Perspectives on HTML5 and CSS3, 7th Edition 51

 Formatting Lists (continued) XP

New Perspectives on HTML5 and CSS3, 7th Edition 52

 Using Images for List Markers XP

• A customized graphic image for the list marker

can be supplied by the user
list-style-image: url (url);
where url is the URL of a graphic file
containing the marker image

New Perspectives on HTML5 and CSS3, 7th Edition 53

 Using Images for List Markers
XP
(continued)

New Perspectives on HTML5 and CSS3, 7th Edition 54

 Setting the List Marker Position XP

• CSS treats each list item as a block-level

element, placed within a virtual box in which
the list marker is placed outside of the list text
• To change the default behaviour, use
list-style-position: position;
where position is either outside or inside

New Perspectives on HTML5 and CSS3, 7th Edition 55

 Setting the List Marker Position
XP
(continued)

New Perspectives on HTML5 and CSS3, 7th Edition 56

 Working with Margins and
XP
Padding
• Block-level elements follow the structure of
the box model
• Contents in a box model are enclosed within
the following series of concentric boxes:
– The content of the element itself
– The padding space, which extends from the
element’s content to a border

New Perspectives on HTML5 and CSS3, 7th Edition 57

 Working with Margins and
XP
Padding (continued)
– The border surrounding the padding space
– The margin space comprised of the space beyond
the border up to the next page element

New Perspectives on HTML5 and CSS3, 7th Edition 58

 Setting the Padding Space XP

• To set the width of the padding space, use the

following padding property
padding: size;
where size is expressed in one of the CSS
units of length or the keyword auto to let the
browser automatically choose the padding

New Perspectives on HTML5 and CSS3, 7th Edition 59

 Setting the Padding Space
XP
(continued)

New Perspectives on HTML5 and CSS3, 7th Edition 60

 Setting the Margin and Border XP
Spaces
• To set the size of the margin around block-level
elements, use
– margin: size;
– margin: top right bottom left;
• To set the size of the border space, use
– border-width: size;
– border-width: top right bottom left;

New Perspectives on HTML5 and CSS3, 7th Edition 61

 Setting the Margin and Border XP
Spaces (continued)

New Perspectives on HTML5 and CSS3, 7th Edition 62

 Using Pseudo-Classes and XP
Pseudo-Elements
• Pseudo-class – classifies an element based on
its current status, position, or use in the
document
element: pseudo-class
where element is an element from the
document and pseudo-class is the name of a
css pseudo-class
• Structural pseudo-class – classifies an element
based on its location within the structure of
the HTML document
New Perspectives on HTML5 and CSS3, 7th Edition 63
 Using Pseudo-Classes and
XP
Pseudo-Elements (continued 1)

New Perspectives on HTML5 and CSS3, 7th Edition 64

 Using Pseudo-Classes and
XP
Pseudo-Elements (continued 2)

New Perspectives on HTML5 and CSS3, 7th Edition 65

 Pseudo-classes for Hypertext XP

• Dynamic pseudo-class – A type of pseudo-

class in which the class can change state based
on the actions of the user

New Perspectives on HTML5 and CSS3, 7th Edition 66

 Pseudo-Elements XP

• Pseudo-element – An object that exists only in

the rendered page
• Pseudo-elements can be selected using the
following CSS selector:
element::pseudo-element
where element is an element from the HTML
file and pseudo-element is the name of a CSS
pseudo-element

New Perspectives on HTML5 and CSS3, 7th Edition 67

 Pseudo-Elements (continued) XP

New Perspectives on HTML5 and CSS3, 7th Edition 68

 Generating Content with CSS XP

• New content can be added either before or

after an element using the following before
and after pseudo-elements:
element::before {content: text;}
element::after {content: text;}
where text is the content to be inserted into
the rendered web page

New Perspectives on HTML5 and CSS3, 7th Edition 69

 Generating Content with CSS
XP
(continued)

New Perspectives on HTML5 and CSS3, 7th Edition 70

 Displaying Attribute Values XP

• The content property can be used to insert an

attribute value into the rendered web page
using the attr( ) function
content: attr(attribute);
where attribute is an attribute of the
selected element

New Perspectives on HTML5 and CSS3, 7th Edition 71

 Inserting Quotation Marks XP

• The blockquote and q elements are used for

quoted material
• Decorative opening and closing quotation
marks can be inserted using the content
property as follows:
content: open-quote;
content: close-quote;

New Perspectives on HTML5 and CSS3, 7th Edition 72

 Inserting Quotation Marks
XP
(continued)

New Perspectives on HTML5 and CSS3, 7th Edition 73