HTML & CSS: Chapter 04

Applying CSS Styles
to Webpages
Web Design with
HTML5 & CSS3
8th Edition

• 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

• 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
Objectives (continued)

• 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
Objectives (continued 1)

• 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
Using Cascading Style Sheets

• 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
Inline Styles

• 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
Embedded 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
External Style Sheets

• 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
External Style Sheets (continued)

• 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
Style Sheet Precedence

• Each CSS rule consists of a selector and a
declaration
CSS Basics

• 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
CSS Basics (continued)

• 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
CSS Basics (continued 1)

• For each property, the declaration includes a
related value that identifies the particular
property value to apply

CSS Text Properties

• 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
CSS Text Properties (continued)

CSS Text Properties (continued
1)

• 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
CSS Colors

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;

• 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
Understanding Inline Elements
and Block Elements

• 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
CSS Box Model

• 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
CSS Box Model (continued)

CSS Box Model (continued 1)

• 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
Selectors

• 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;
}
Selectors (continued)

• 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;
}
Selectors (continued 1)

• 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;
}
Selectors (continued 2)

To Create a CSS File and a Style
Rule for the Body Element

• 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
Linking an HTML Document to a
CSS File

• 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
Linking an HTML Document to a
CSS File (continued)

• 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;
}
Aligning Webpage 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
To Center Content

• 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
Creating Style Rules for
Structural Elements

• 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
Creating Style Rules for
Structural Elements (continued)

To Create a Style Rule for the
Header Element

Nav Element

Main Element

Footer Element

• 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
Creating Style Rules for Classes

• 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;
}
(continued)

• 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
(continued 1)

• 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;
}
Using CSS List Properties

• 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.
(continued)

• 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.
(continued 2)

• 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 */
Adding Comments to CSS Files

• 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)
To Validate the CSS File

(continued)

– 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)
(continued 1)

(continued 2)

Chapter 4
Complete
HTML
8th Edition

HTML & CSS: Chapter 04

Recommended

More Related Content

What's hot (20)

Similar to HTML & CSS: Chapter 04 (20)

More from Steve Guinan (20)

Recently uploaded (20)

HTML & CSS: Chapter 04