Web Design with
HTML5 & CSS3
8th Edition
Applying CSS Styles
to Webpages
Objectives
• Explain the importance of separating design from
content
• Describe Cascading Style Sheets (CSS)
• Define inline, embedded, and external styles and
their order of precedence
• Describe a CSS rule and its syntax
• Explain the difference between a selector,
property, and value
Chapter 4: Applying CSS Styles to Webpages 2
Objectives (continued)
• Create styles that use text and color properties
• Explain the difference between inline and block
content
• Describe the CSS box model and how to apply
margins, padding, and borders
• Create an external style sheet and link it to an
HTML page
Chapter 4: Applying CSS Styles to Webpages 3
Objectives (continued 1)
• Create styles that use padding, border, and margin
properties
• Float an image
• Create styles that use list properties
• Add comments to an external style sheet
• Validate a CSS file
Chapter 4: Applying CSS Styles to Webpages 4
Using Cascading Style Sheets
• Style – It is a rule that defines the appearance of
an element on a webpage
• Style sheet – It is the set of CSS style rules
• Style sheets provide a means to separate style
from content because it gives the flexibility to
redesign or rebrand a website
• A single CSS style sheet file containing the defined
styles can be attached to several webpages to
apply the styles to all the attached pages
Chapter 4: Applying CSS Styles to Webpages 5
Inline Styles
• Inline style – It is used to add a style to the start
tag for an element, such as a heading or
paragraph, using the style attribute
Chapter 4: Applying CSS Styles to Webpages 6
Embedded Style Sheets
• An embedded style sheet, also called an internal
style sheet, includes the style sheet within the
opening <head> and closing </head> tags of the
HTML document
Chapter 4: Applying CSS Styles to Webpages 7
External Style Sheets
• An external style sheet – It is a CSS file that
contains all of the styles that can be applied to
more than one page in a website
• External style sheets are also called linked style
sheets
• An external style sheet is a text file with the .css
extension
• To apply an external style sheet, link it (or attach it)
to a webpage using a link in the head section of the
webpage
Chapter 4: Applying CSS Styles to Webpages 8
External Style Sheets (continued)
• External style sheet provides flexibility to quickly
change webpage formats because the styles used
in it are applied to every page linked to it
• Changing the look of an entire website is
sometimes called reskinning the website
Chapter 4: Applying CSS Styles to Webpages 9
Style Sheet Precedence
• Style sheets are said to “cascade” because each
type of style has a specified level of precedence
(or priority) in relationship to the others
• CSS properties can be inherited from a parent
element through a principle called inheritance
• If a selector has more than one CSS rule,
specificity determines which CSS rule to apply
Chapter 4: Applying CSS Styles to Webpages 10
CSS Basics
• Each CSS rule consists of a selector and a
declaration
Chapter 4: Applying CSS Styles to Webpages 11
CSS Basics (continued)
• Selector – It is the part of the statement that
identifies what to style
• Any HTML5 element such as body, header, nav,
main, or footer may be a selector
• A selector may also be the value of an id or class
attribute
• The declaration defines the exact formatting of
the style
Chapter 4: Applying CSS Styles to Webpages 12
CSS Basics (continued 1)
• A declaration consists of a property and a value,
separated by a colon and followed by a semicolon
• The property identifies the style quality or
characteristic to apply, such as
– color (text color)
– background-color
– text-indent
– border-width
– font-style
Chapter 4: Applying CSS Styles to Webpages 13
CSS Basics (continued 2)
• For each property, the declaration includes a
related value that identifies the particular
property value to apply
Chapter 4: Applying CSS Styles to Webpages 14
CSS Basics (continued 3)
Chapter 4: Applying CSS Styles to Webpages 15
CSS Text Properties
Chapter 4: Applying CSS Styles to Webpages 16
CSS Text Properties (continued)
• Fallback values – They are the additional values
provided for the font-family property in case the
browser does not support the primary font
• CSS measures font sizes using many measurement
units, including pixels, points, and ems, and by
keyword or percentage
Chapter 4: Applying CSS Styles to Webpages 17
CSS Text Properties (continued
1)
Chapter 4: Applying CSS Styles to Webpages 18
CSS Colors
• HTML uses color names or codes to designate
color values
• Two types of color codes can be used with CSS:
– Hexadecimal
– RGB
• Hexadecimal values consist of a six-digit number
code that corresponds to RGB (Red, Green, Blue)
color values
Chapter 4: Applying CSS Styles to Webpages 19
CSS Colors (continued)
• To use a color in a style rule declaration, use the
color value as the property value
• For example, to style a background color as gray
use, background-color: #808080;
Chapter 4: Applying CSS Styles to Webpages 20
Understanding Inline Elements
and Block Elements
• HTML elements are positioned on the webpage as
a block or as inline content
• A block element appears as a block because it
starts and ends with a new line, such as the main
element or a paragraph element
• Inline elements are displayed without line breaks
so they flow within the same line
• Inline content always appears within block
elements
Chapter 4: Applying CSS Styles to Webpages 21
CSS Box Model
• Each block element such as a header, nav, main,
and footer element is displayed in a browser as a
box with content
• The CSS box model describes content boxes on a
webpage
Chapter 4: Applying CSS Styles to Webpages 22
CSS Box Model (continued)
• Each content box can have margins, borders, and
padding
• The margin provides passive white space between
block elements or between the top or bottom of a
webpage
• The border separates the padding and the margin
of the block element
• Padding is the passive white space between the
content and the border of a block element
Chapter 4: Applying CSS Styles to Webpages 23
CSS Box Model (continued 1)
Chapter 4: Applying CSS Styles to Webpages 24
Selectors
• A style rule begins with a selector, which specifies
the element to style
• A selector can be
– an HTML element name
– an id attribute value
– a class attribute value
• An id or a class selector is used to apply styles to
p elements
Chapter 4: Applying CSS Styles to Webpages 25
Selectors (continued)
• An id selector uses the id attribute value of an
HTML element to select a single element
• For example, to style the div id="container"
element, use #container as the selector
#container {
border: solid 2px;
}
Chapter 4: Applying CSS Styles to Webpages 26
Selectors (continued 1)
• A class selector is used to select elements that
include a certain class attribute
• For example, to style class="mobile", use .mobile
as the selector
.mobile {
font-size: 10pt;
}
Chapter 4: Applying CSS Styles to Webpages 27
Selectors (continued 2)
• A descendant selector is used to create style that
applies to an element contained within another
element
• For example, the following style rule sets the list-
style property to none for list items in an
unordered list included in the navigation area:
nav ul li {
list-style: none;
}
Chapter 4: Applying CSS Styles to Webpages 28
To Create a CSS File and a Style
Rule for the Body Element
Chapter 4: Applying CSS Styles to Webpages 29
Linking an HTML Document to a
CSS File
• After creating a CSS file, link it to all the webpages
that will use its styles
• Insert a link element on the HTML page within
the <head> and </head> tags
• The link element uses two attributes:
– rel
– href
• The rel attribute uses the stylesheet value to
indicate that the document is linked to a style
sheet
Chapter 4: Applying CSS Styles to Webpages 30
Linking an HTML Document to a
CSS File (continued)
• The href attribute value specifies the file path or
file name of the CSS file
• Following is an example of a link to a style sheet
named styles.css and stored in the css folder:
<link rel="stylesheet"
href="css/styles.css">
• The type="text/css" attribute and value is also
commonly used within a link element to
reference a CSS file
Chapter 4: Applying CSS Styles to Webpages 31
Aligning Webpage Content
• One way to align webpage content is to use the
text-align property, which applies to block
elements
• The text-align property can use left (the default),
center, right, or justify as its value
• For example, the following rule centers an h1
element:
h1 {
text-align: center;
}
Chapter 4: Applying CSS Styles to Webpages 32
To Center Content
• To center all of the elements of a webpage using a
single style rule, set the left and right margins to
auto
• In addition, set the width to 80% so that the
elements do not span 100 percent of the browser
window
Chapter 4: Applying CSS Styles to Webpages 33
Creating Style Rules for
Structural Elements
• The header section appears at the top of a
webpage and thus needs formatting that makes
the header contents stand out and attract visitors
to the page
• The nav section should be formatted differently
from the other structural elements as it should be
prominent and easy to find on the webpage
• The main section should be formatted using the
display property
Chapter 4: Applying CSS Styles to Webpages 34
Creating Style Rules for
Structural Elements (continued)
• To apply text and box model properties to the
main section and have them appear as intended,
the display property is used
• Create a style rule that formats the footer section
by defining the font size, text alignment, and top
margin of the footer element
Chapter 4: Applying CSS Styles to Webpages 35
To Create a Style Rule for the
Header Element
Chapter 4: Applying CSS Styles to Webpages 36
To Create a Style Rule for the
Nav Element
Chapter 4: Applying CSS Styles to Webpages 37
To Create a Style Rule for the
Main Element
Chapter 4: Applying CSS Styles to Webpages 38
To Create a Style Rule for the
Footer Element
Chapter 4: Applying CSS Styles to Webpages 39
Creating Style Rules for Classes
• Consider the following example:
<img class="equip"
src="images/equipment1.jpg" alt="Weight
Equipment" height="195" width="260">
– The img element displays the equipment1.jpg image
– The first attribute and value, class="equip",
assigns this element to the equip class
– Including the class="equip" attribute and value in
each img element helps format all the elements
assigned to the equip class with a single style rule
Chapter 4: Applying CSS Styles to Webpages 40
Creating Style Rules for Classes
(continued)
• For example, the following style rule adds 20 pixels
of padding to the right side of elements in the
equip class:
.equip {
padding-right: 20px;
}
Chapter 4: Applying CSS Styles to Webpages 41
Creating Style Rules for Classes
(continued 1)
• To indicate a class name as a selector, include a
period (.) before the class name
• Float property – It positions an element to the
right or left of other elements
• Clear property – It removes the float effect from a
webpage
Chapter 4: Applying CSS Styles to Webpages 42
Using CSS List Properties
• The CSS list-style properties are used to control the
appearance of numbered and bulleted lists
• Lists marked with the <ul> and </ul> tags display a solid
bullet before each list item
• Lists marked with the <ol> and </ol> tags display Arabic
numerals (1, 2, 3, and so on) before the list items
• For example,
ul {
list-style-type: square;
}
Chapter 4: Applying CSS Styles to Webpages 43
Using CSS List Properties
(continued)
• The default value for the list-style-position
property is outside, which displays the list item
with a bullet or number outside of the list’s
content block as in the following text:
1. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Chapter 4: Applying CSS Styles to Webpages 44
Using CSS List Properties
(continued 2)
• Using inside as the value displays the bullet or
number inside the list’s content block, as in the
following text:
– Morbi odio nisl, facilisis non
egestas a, tristique vitae neque.
– Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Chapter 4: Applying CSS Styles to Webpages 45
Adding Comments to CSS Files
• Comments provide additional information about
the area where the styles are applied or other
helpful explanations, such as what the styles do
• The syntax for a comment is as follows:
/* Place your comment here */
Chapter 4: Applying CSS Styles to Webpages 46
To Validate the CSS File
• The following steps validate a CSS file
– Open the browser and type
http://jigsaw.w3.org/css-validator/ in the
address bar to display the W3C CSS Validation Service
page
– Tap or click the By file upload tab to display the Validate
by file upload information
– Tap or click the Browse button to display the Choose File
to Upload dialog box
– Navigate to your css folder to find the styles.css file
(Figure 4–41)
Chapter 4: Applying CSS Styles to Webpages 47
To Validate the CSS File
(continued)
Chapter 4: Applying CSS Styles to Webpages 48
To Validate the CSS File
(continued 1)
– Tap or click the styles.css document to select it
– Tap or click the Open button to upload the selected file
to the W3C CSS validator
– Tap or click the Check button to send the document
through the validator and display the validation results
page (Figure 4–42)
Chapter 4: Applying CSS Styles to Webpages 49
To Validate the CSS File
(continued 2)
Chapter 4: Applying CSS Styles to Webpages 50
HTML
8 Edition
th
Chapter 4
Complete
Chapter 4: Applying CSS Styles to Webpages 51
