Scribd
Upload
13 views51 pages

Chapter 04

This chapter discusses applying CSS styles to webpages. It covers separating design from content using CSS, the different types of CSS style sheets (inline, embedded, external), CSS syntax including selectors, properties and values, and how to style text, colors, and structural elements. It also explains the CSS box model and how to center and align webpage content. The chapter provides examples of how to create CSS rules and link an external CSS stylesheet to an HTML document.

Uploaded by

angrejcanada78
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
13 views51 pages

Chapter 04

This chapter discusses applying CSS styles to webpages. It covers separating design from content using CSS, the different types of CSS style sheets (inline, embedded, external), CSS syntax including selectors, properties and values, and how to style text, colors, and structural elements. It also explains the CSS box model and how to center and align webpage content. The chapter provides examples of how to create CSS rules and link an external CSS stylesheet to an HTML document.

Uploaded by

angrejcanada78
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 51

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

You might also like