Transcript Class Slide Show on CSS

XP
New Perspectives on Creating Web Pages
with HTML
Tutorial 7: Working with Cascading Style
Sheets
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
1
XP
Tutorial Objectives
• Learn about the history and theory of cascading
style sheets
• Create inline styles, embedded styles, and style
sheets
• Understand style precedence and style inheritance
• Use cascading style sheets to format paragraphs,
lists, and headings
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
2
XP
Tutorial Objectives Continued
• Design a style for hypertext links in their four
conditions
• Define document content with the class and id
attributes and create styles for them
• Mark document content with the <div> and
<span> tags and create styles for them
• Use cascading styles to design page layout
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
3
XP
History and Support of CSS
• One principle of design theory is to separate the
content of a document from its design.
• A style defines the appearance of a document element.
• The collection of styles for a Web page or Website is
known as a style sheet.
• Style sheets use a common language and syntax.
• The main style sheet standard is Cascading Style
Sheets (CSS).
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
4
Cascading Style Sheets (CSS)
XP
• Like HTML, style sheets must use a common language and
follow common rules. This language is known as Cascading
Style Sheets, or more simply, CSS.
• CSS has been developed by the WWW Consortium
(www.w3c.org), the same organization that develops standards
for HTML.
• CSS is designed to augment HTML, not replace it.
• CSS is a whole new way of formatting Web pages.
• CSS provides several tools not available with standard HTML.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
5
XP
Style Types
• There are three ways of employing CSS in Web pages:
– inline styles in which styles are added to each tag within the
HTML file. The style affects that particular tag but does not affect
other tags in the document.
– embedded or global styles applied to an entire HTML file,
allowing the Web designer to modify the appearance of any tag in
the document.
– linked or external style sheets placed in an external file and
linked with pages in the Web site, allowing the Web designer to
modify the appearance of tags in several documents
• Which approach you choose depends on the Web site’s
design..
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
6
XP
Using Inline Styles
• If you need to format a single section in a Web page, you’d
probably use an inline style.
• To create in inline style, add the style attribute to the
HTML tag using the following syntax:
<tag style=“style declarations”>
– tag is the name of the tag (h1, h2, etc)
– style declarations are the styles you’ll define for a particular
tag
– style declaration must be enclosed within double quotation
marks
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
7
XP
A Style Declaration
• A style declaration consists of attribute names that specify
such features as:
– font size
– color
– font type
• Attributes are followed by a colon and then the value of the
attribute.
• Multiple attributes can be used as long as you separate each
one by a semicolon.
• The general syntax for the style declaration is:
attribute1:value1; attribute2:value2;
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
8
XP
Inserting an Inline Style
This figure shows how to insert an inline style.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
9
XP
Heading with New Style
This figure shows the heading with the new style.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
10
XP
Creating an Embedded Style
• An embedded style is a style applied to various sections within a
Web page.
• Insert a <style> tag within the head section of the HTML file.
• Within the <style> tag, enclose the style declarations needed
for the entire Web page.
• The syntax of an embedded style is:
<style type=“style sheet language”>
style declarations
</style>
– style sheet language identifies the type of style language used in the
document
– The default, is “text/css” for use with CSS
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
11
XP
Selectors and Declarations
• Style declaration within the <style> tags obey the following
syntax:
selector {attribute1:value1; attribute2;value2; ...}
– selector identifies an element in your document, such as a heading
or paragraph, and the attributes and values within the curly braces
indicate the styles applied to all the occurrences of that element
– this collection of attributes and values is also referred to as the
declaration of the selector
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
12
XP
Selectors and Declarations Continued
• For example, to display all h1 headings in the HTML
document using a gold sans-serif font, use the following
embedded style:
<style>
h1 {color: gold; font-family: sansserif}
</style>
– h1 is the selector and the text enclosed in the braces is the
declaration
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
13
XP
Defining a Global Style
The type attribute was not included within the <style> tag. This is because
“text/css” is the default style language , and unless you specify a different style
language, you don’t need to enter the type attribute. When using the <style> tags,
you don’t need to include double quotes around the attributes and attribute values.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
14
XP
Grouping Selectors
• You can apply the same declaration to a group of
selectors by including all of the selector names
separated by commas.
• The following is a sample style declaration to format
all headings in a gold sans-serif font:
<style>
h1, h2, h3, h4, h5, h6 {color:gold; fontfamily:sans-serif}
</style>
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
15
The Same Style Applied
to Two Headings
XP
Even though the same style is used for all heading tags, there are still some differences
in how the browser displayed text formatted with these tags. Most notably, the styles
did not affect the relative sizes of the text. Text formatted with the <h1> tag is still
larger than text formatted in the <h2> tag. This is because the size of the heading text
was not defined, so that attribute is left to the browser.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
16
XP
Using an External Style Sheet
• Create styles that apply to an entire Web site by
creating a text file containing style declarations.
• Most style sheets have the extension “.css”,
though this is not a requirement.
• Within a style sheet, you don’t need <style>
tags, just the style declarations.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
17
Linking to Style Sheets
with the <link> Tag
XP
• Use the <link> tag to link Web pages to a style sheet.
• The general syntax for using the <link> tag is as follows:
<link href=“URL” rel=“relation_type”
type=“link_type”>
– URL is the URL of the linked document
– relation_type establishes the relationship between the linked document
and the Web page
– link_type indicates the language used in the linked document
• In order to link to a style sheet, the value of the rel attribute should be
“stylesheet” and the value of the type attribute should be “text/css”.
• To link to a style sheet named “mws.css,” the <link> tag would be:
<link href=“mws.css” rel=“stylesheet” type=“text/css”>
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
18
XP
Resolving Style Precedence
• In cases where the styles conflict, precedence is
determined in the following order:
– an inline style overrides any embedded style or
external style sheet
– an embedded style overrides an external style sheet
– an external style sheet overrides the internal style
rules set by the Web browser
– any style attributes left undefined by an inline style, an
embedded style, or an external style sheet are left to
the Web browser
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
19
XP
Changing Styles
• As a change is made to a style at one level, the changes are
cascaded through to the other levels (hence the term,
cascading style sheets).
• Where a different font has not been specified, changes will
cascaded through the embedded and inline styles.
• As you define more styles for a Web site, you need to keep
track of the inline, embedded, and external style sheets to
correctly predict the impact that style changes have on the
appearance of each page.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
20
XP
Using Font Families
• The font-family attribute allows you to choose a font face
for use in Web pages.
• CSS works with two types of font faces:
– a specific font, which is a font such as Arial, Garamond, or
Times New Roman that is actually installed on a user’s
computer.
– a generic font, which is a general description of a font,
allowing the operating system to determine which installed
font best matches it.
• CSS supports five generic font types: serif, sans-serif,
monospace, cursive, and fantasy.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
21
XP
Managing Font Size
• In CSS, you use the font-size attribute to
manage font sizes. Font sizes can be expressed:
– as a unit of length
– with a keyword description
– as a percentage of the parent element
– with a keyword expressing the size relative to
the font size of the parent element
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
22
XP
Absolute and Relative Units
• If you choose to express size as a unit of length, you can use
absolute units or relative units.
– absolute units define the font size based on one of the following
standard units of measurement: mm (millimeter), cm (centimeter),
in (inch), pt (point), and pc (pica).
– use a relative unit, which expresses the font size relative to a size
of a standard character. There are two standard typesetting
characters, referred to as “em” and “ex.”
– the em unit is equal to the width of the capital letter “M” in the
browser’s default font size
– the ex unit is equal to the height of a small “x” in the default font
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
23
XP
The EM and EX Units
The em unit is more useful for page design, because 1 em is equal to the browser’s
default font size for body text. This is true no matter what font is being used (unlike
the ex unit, whose size changes based on the font face being used).
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
24
XP
The EM and EX Units
• As with absolute units, you can specify factional
values for the em and ex units.
• Unlike the absolute units, em and ex units are
scalable in that they retain their relative
proportions regardless of the monitor size or
resolution.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
25
XP
Pixels
• Pixels give you the greatest control over size.
• A pixel is the smallest element recognized by the
monitor.
• Pixels should be used with some caution.
• Text that is 10 pixels high may be perfectly
readable at a monitor resolution of 640 x 480, but
it can become unreadable if the monitor is set to
1024 x 768.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
26
XP
Descriptive Keywords
• If you are uncomfortable dealing with units of length, you
can use one of the seven descriptive keywords:
–
–
–
–
–
–
–
xx-small
x-small
small
medium
large
x-large
xx-large
• These keywords correspond to the seven values of the size
attribute in the <font> tag.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
27
XP
Expressing Font Size
as a Percentage of the Parent Tag
This figure shows the impact of such a style definition on boldface text in a Web page.
The style has the same impact within a heading, since the heading is the parent
element, and the boldface text is increased to 150% of the surrounding heading text.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
28
Express a Font Size
using Keywords
XP
• Express a font size using the keywords “larger”
and “smaller,” which makes the font one size
larger or smaller than the size of the parent
element.
– for example, to make the h2 heading one size larger
than the body text, you could use the following style:
body {font-size: medium}
h2 {font-size: larger}
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
29
XP
Specifying Word, Letter,
and Line Spacing
• Use CSS font attributes to control the spacing
between letters, words, and lines of text.
• To set the space between individual letters, you
use the letter-spacing attribute, with the syntax:
letter-spacing: size
– size can either have the value “normal”, which allows
the browser to determine the letter spacing based on the
font being used, or a number expressed in the same
measuring units used to describe font size (inches,
millimeters, centimeters, em units, etc.)
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
30
Specifying Word, Letter,
and Line Spacing Continued
XP
• Another technique to change the spacing between individual
words is the word-spacing attribute, with the syntax:
word-spacing: size
– size is either equal to “normal,” to allow the browser to set the
word spacing, or to a specific length using the standard units of
measure
• Use the line-height attribute to modify the vertical space
between lines of text.
• Graphic designers may know this spacing as leading.
• The line-height attribute specifies the minimum distance
between the baselines of adjacent lines.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
31
XP
Comparison of Line Height
to Font Size
This figure shows how the line height relates to the font size. The line height is
usually larger than the font size to leave additional space between lines of text.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
32
XP
Line Height
• To set the line height, use the style:
line-height: size
– size is either a specific length, a percentage of the font
size, or a number representing the ratio of the line
height to the font size
– the standard ratio is 1.2, which means that the line
height is 1.2 times the font size
– to make paragraphs double-spaced use the style
definition p {line-height: 2}
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
33
A Title with a Large Font Size
and Small Line Height
XP
A common typographic technique is to create titles with large fonts and
small line heights. This figure shows an example where the line height is actually
smaller than the font size. This treatment can give the title greater impact than it
would have with more space between the two lines.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
34
XP
Setting Font Styles and Weights
• Font styles are controlled by the font-style attribute.
• The font-style attribute has three possible values:
normal, italic, or oblique.
• The italic and oblique styles are similar in appearance
though there can be small differences depending on
the font.
• Versions of Netscape prior to 6.0 do not support the
oblique attribute value.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
35
XP
Font Weights
• CSS considers “bold” to be an aspect of the font’s weight,
or line thickness.
• Font weights can be expressed as an absolute number
ranging in intervals of 100, going from 100 (the lightest)
up to 900 (the heaviest or “most bold”).
• For most fonts, you can assume that:
– a weight of 400 corresponds to normal text
– a weight of 700 can be used for bold text
– a weight of 900 for “extra” bold text
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
36
XP
Font Weights Continued
• Use the keywords “normal” and “bold” in place of a weight
value.
• Express the font weight relative to the parent tag by using the
keywords “bolder” or “lighter.”
• Use the CSS bolder attribute to get bolder text:
h2 {font-weight: 700}
b {font-weight: bolder}
• If these style definitions are applied to a Web page, h2 text
formatted with the <b> tag will be bolder or thicker in
appearance than the surrounding heading text.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
37
XP
Aligning Text Horizontally
and Vertically
• Use the text-align attribute to left, center, right or
justify text.
• To do this with CSS, use the text-align attribute:
text-align: alignment
– alignment can be left, center, right, or justify
– setting the text-align value to “justify” stretches the
text, extending it from the left to the right margin
– some browsers will ignore the text-align attribute value
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
38
XP
Applying the Center Text-Align Style
This figure shows how to apply the center text-align style.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
39
XP
Vertically Align Elements
• CSS allows you to vertically align elements such
as text and images relative to the surrounding text.
• The syntax for setting the vertical alignment is:
vertical-align: alignment
– alignment has one of the keyword values
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
40
Values of the Vertical
Alignment Attribute
XP
This figure shows the alignment keyword values.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
41
Examples of the
Vertical Alignment Values
XP
This figure shows an example of each vertical-align value.
Baseline is the default value for vertical alignment.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
42
XP
Indenting Text
• CSS allows you to indent the first line of a
paragraph.
• The syntax for creating an indentation is:
text-indent: indentation
– indentation is either the length, in either absolute or
relative units, of the indentation or a percentage of the
width of the paragraph
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
43
XP
Hanging Indent
• The length and percentage values also can be
negative, which extends the first line to the left by
the specified value or percentage, and then indents
the rest of the lines in the paragraph.
• This particular effect, called a hanging indent,
works sporadically on many browsers.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
44
XP
Special Text Attributes
• CSS provides three attributes for special text
effects:
– text-decoration
– text-transform
– font-variant
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
45
Values of the
Text-Decorating Attribute
XP
This figure shows the text-decoration attribute can be used to underline your text
or place a line over or through your text. You can also make your text blink
on and off using the text-decoration: blink attribute.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
46
XP
The Text-Transform Attribute
• The text-transform attribute can be used to:
– capitalize the first letter of each word in a
paragraph
– display the text in all capital letters
– display the text in all lowercase letters
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
47
Values of the
Text-Transform Attribute
XP
This figure shows the effect of the various text-transform values.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
48
XP
The Font-Variant Command
• Use the font-variant command to create small
caps.
• Small caps are capital letters that are the same size
as lowercase letters.
• The syntax for the font-variant attribute is:
font-variant: small-caps
• Netscape does not support the font-variant
attribute in versions prior to 6.0.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
49
XP
Values of the Font-Variant Attribute
This figure shows values of the font-variant attribute.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
50
XP
The font Attribute
• The font attribute provides an efficient way for you to define
multiple attributes.
• The syntax for the font attribute is:
font: font-style; font-variant; font-weight;
font-size/line-height; font-family
– font-style, font-variant, and so forth are the values for font and text
style attributes
• The font attribute requires that you specify the font size, font
variant, and font weight.
• If a font attribute is not included, the browser assigns the
normal or standard value for the element.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
51
XP
The color Attribute
• CSS works with most of the color names supported by HTML.
• Another way to specify color in CSS is to use RGB color
values.
• You can enter the hexadecimal form of the color value or the
RGB color values directly.
– for example, to change the body text color to teal, use any of
the following styles:
body {color:teal}
body {color: #008080}
body {color: rgb (0,128,128)}
body {color: rgb (0%, 50%, 50%}
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
52
Changing the Color of
the H1-H6 Headings
XP
RGB color values range from 0 to 255, so specifying a color percentage of 50% for
green and blue is close to a color value of 128. This figure shows an example of
changing the color of the H1-H6 headings.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
53
XP
Working with Background Color
• By default, elements take on the background color
of their parent element.
• To change the background color of almost any
element, use the background-color style.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
54
XP
Applying a Background Color
This figure shows how to apply a background color.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
55
XP
Working with Background Images
• Almost any element on the page can also be displayed with its
own background image.
• The background image has four attributes:
–
–
–
–
the source of the image file
how the image is repeated in the background
where the image is placed on the background
whether the image scrolls with the display window
• To specify which file to use for a background, use the syntax:
background-image: url(URL)
– URL is the location of the image file
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
56
Applying a Background Image
to an Element
XP
This figure demonstrates how you can apply this style to the <b> tag to create an
interesting design for a section of boldface text.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
57
Working with Background
Images Continued
XP
• By default, background images are tiled both
horizontally and vertically behind the element
until the entire element is filled.
• Control the way the tiling occurs using the
background-repeat style attribute.
• The background-repeat attribute has four
possible values.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
58
Values of the
Background-Repeat Attribute
XP
This figure shows the background-repeat attributes four possible values.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
59
Examples of the
Background-Repeat Values
XP
This figure shows examples of each background-repeat values.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
60
XP
The Background-Position Attribute
• Background images are placed in the upper-left corner of
their element, and then repeated (if tiling is being used)
from there.
• You can move the background image to a different location
using the background-position style attribute.
• The background-position attribute has two values:
– the first indicates the distance from the left edge of the element
– the second indicates the distance from the element’s top edge
• These values can be expressed as a percentage of the
display area, in units of length, or with keywords.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
61
Background-Position Keywords XP
and Percentages
This figure shows how background-position keywords relate to the percentage values.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
62
XP
The Background-Attachment
Attribute
• By default, background images move along with the background
of the page as the user scrolls through the Web page.
• To change the movement of background images, use the
background-attachment attribute.
• The syntax of this style is:
background-attachment: attach
– attached is either “scroll,” to scroll the image along with the
element, or “fixed,” which places the image in a fixed place in the
browser’s display window, preventing it from moving even if the
user scrolls down through the Web page
• The background-attachment attribute is not supported by
Netscape prior to version 6.0.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
63
XP
Background Images
• Fixed background images are often used to create the impression
of a watermark.
– a watermark is a term that refers to a translucent graphic impressed
into the very fabric of the paper and used in specialized stationery
• If you use a background image that employs a transparent color,
you can combine the background-color and background-image
attributes to create a new image.
– for example, the style:
body {background-color: yellow; backgroundimage: url(logo.gif)}-- displays logo.gif on the
background, and anywhere that a transparent color appears in
the logo the background color yellow will shine through
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
64
XP
The Background Attribute
• You can combine all of the various attributes for
backgrounds into one attribute, called the background
attribute.
• The syntax for the background attribute is:
background: background-color background-image
background-repeat
background-attachment background position
– background-color, background-image, etc., are the values for the
various background attributes
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
65
XP
Using the Background Style Attribute
This figure shows an example of the background style attribute.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
66
XP
Working with List Styles
• CSS provides more control over the appearance and
behavior of ordered, unordered, and definition lists than
does HTML.
• CSS allows you to specify the types of labels attached to
list items and how to position the labels with respect to the
label text.
• The list-style-type attribute allows you to choose the type
of label to display alongside text formatted with the <ul>,
<ol>, or <li> tags.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
67
Values of the
List-Style-Type Attribute
XP
This figure shows the possible values of the list-style-type attribute.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
68
XP
Creating a Nested Outline Style
Use contextual selectors to create an outline style for several levels of nested lists.
This figure shows a set of contextual selectors used to create an outline style
for different outline levels.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
69
XP
Using a list-style-image Attribute
• You can create a label, not included in the list-style-type
values, with an image file and the list-style-image
attribute.
• The syntax for applying this attribute is:
list-style-image: url(URL)
– URL is the location and the filename of the image file
• The list-style-image attribute is not supported by Netscape
version 4.7 or earlier.
• It’s a good idea to include the list-style-type
attribute along with the list-style-image attribute.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
70
XP
Defining the List Style Position
• List items are treated by CSS as if they have an
invisible box around them.
• The syntax for specifying the location of the list
item label is:
list-style-position: location
– location is either “inside” or the default value,
“outside.”
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
71
XP
Defining the Position of the List Label
This figure shows that the labels for the list items can be placed either outside or inside the box.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
72
The list-style Attribute
XP
• You can combine all of these attributes into the
list-style attribute.
• The syntax for this style is:
list-style: list-style-type list-styleimage list-style-position
– list-style-type, list-style-image, and list-style-position
are the attribute values for each of the individual list
style attributes
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
73
Defining the Appearance
of a List Label
XP
This figure shows how to define the appearance of a list label.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
74
XP
Formatting Hypertext Links
• Hypertext has an additional attribute that normal text
doesn’t have: the condition of the hypertext link itself.
• A hypertext link can be in one of four states:
–
–
–
–
the link’s target has already been visited by the user
the link’s target has never been visited by the user
the link is currently being clicked by the user
the user’s mouse pointer is hovering over the link
• Web browsers provide a visual clue for each of these
states, such as a different color for visited links, and a
different shape for the pointer when it is hovering over a
link.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
75
Formatting Hypertext Links
Continued
XP
• CSS provides a different selector for each condition.
• The general syntax is:
a:visited {styles for previously visited targets}
a:link {styles for targets that have never been visited}
a:active {styles for links that are currently being clicked}
a:hover {styles when the mouse cursor is hovering over the
link} - this is called a rollover effect
• You can use a variety of CSS attributes to create a different style for each
condition.
– for example, to change the color of previously visited targets to red, use
the style:
a:visited {color:red}
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
76
XP
Creating a Rollover Effect
This figure shows the rollover effect.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
77
XP
Working with ids and Classes
• A pseudo-class is a classification of an element based on
its status or its use.
– in the example of the rollover effect, the status was the
condition of the hypertext link
– the element itself, a hypertext link with the pointer located
over it, is called a pseudo-element
• CSS introduces additional pseudo-classes, including the
first-line pseudo-class and the first-letter pseudo-class,
which are used for formatting the first line and first letter
of a block of text, respectively.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
78
XP
Applying a Style to a Pseudo-Class
This figure shows how to apply a style to a pseudo-class and what it would like in the browser.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
79
XP
The class Attribute
• Many browsers do not support the first-letter and first-line
pseudo-classes yet.
• The only pseudo-classes widely supported are the four
hypertext link conditions.
• You can create customized classes by adding the class
attribute to HTML tags.
• The syntax for creating a class is:
<tag class=“class_name”>
– tag is the HTML tag
– class_name is the name of the class
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
80
XP
Applying a Style to a Pseudo-Class
This figure demonstrates creating an inline style for the h1 heading with the class name “First
Header.” This technique is useful when you have multiple Web pages in which you want the
first heading in each page to be formatted in the same way.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
81
XP
The id Attribute
• Closely related to the class attribute is the id attribute, which
applies an id to a specific element in the document.
• The id attribute must be unique; there can not be more than
one tag with the same id value.
• The syntax for creating an id is:
<tag id=“id_name”>
– tag is the HTML tag
– id_name is an id name assigned to the tag
• The class and id attribute are useful HTML features to use
with CSS to define styles for specific content without using
inline styles.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
82
XP
Creating a Class for Monthly Specials
This figure shows how to create a class for monthly specials.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
83
XP
Working with Container Elements
• HTML supports two types of container types:
– the <span> tag, which is used to contain inline
elements such as individual letters, words, phrases, or
inline images
– the <div> tag, which is used to group blocks of text
such as paragraphs, block quotes, headings, or lists.
Collectively, these text blocks are known as block-level
elements
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
84
Using the <div> Tag
XP
This figure shows an example in which a heading and a paragraph have been enclosed
in a <div> container. The <div> tag does not actually format the block-level
elements; it merely groups them as a unit. For this reason, the <div> tag always
includes either a class or id attribute that identifies that group.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
85
XP
Using the <div> and <span> Tags
This figure shows an example of how the <span> tag can be used to format a selection
of text within a paragraph. A <div> tag is used to format the entire paragraph. You
almost always include an id or class attribute with the <span> tag.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
86
XP
Formatting Block-Level
Element Boxes
• With CSS, you can control the layout of a Web page by manipulating
the size and location of block-level elements.
• CSS treats all block-level elements as a group.
• HTML tags that can be treated as block-level elements are:
–
–
–
–
–
–
–
–
–
<h1> - <h6> tags
<p> tag
<blockquote> and <address> tags
<ul>, <ol>, and <dl> list tags
<li>, <dt>, or <dd> tags (individual list items)
<div> tag
<body> tag
<hr> tag
<img> tag
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
87
XP
Parts of the Block-Level Element Box
• There are three elements:
– margin between the box and the parent element
– border of the box
– padding, which is the space between the box around
the block-level element and the border
• CSS provides attributes you can use to control the
appearance and behavior of each of these
elements.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
88
Features of the Box Around
a Block-Level Element
XP
This figure shows features of the box around a block-level element.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
89
Some Block-Level Elements
in a Web page.
XP
This figure shows some of the boxes in a Web page.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
90
XP
Controlling Margins
• The margin is the space between the block-level element
and the parent element.
• There are four attributes that control the margin size:
– margin-top - the space between the top of the box and the
top margin
– margin-right - the space between the right side of the box
and the right margin
– margin-bottom - the space between the bottom of the box
and the bottom margin
– margin-left - the space between the left side of the box and
the left margin
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
91
XP
Controlling Margins Continued
• Margin sizes can be expressed in units of length (points,
pixels, em units, etc.) or as a percentage of the width of the
parent element box.
• Use the “auto” value, which allows the browser to
determine the margin size.
• A margin size can be negative, although this can lead to
unpredictable results when viewed with certain browsers.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
92
XP
Creating an Overlay Effect
Web page designers can use negative margins to place one block-line element on top of another,
creating an “overlay” effect. This figure shows an example of an overlay effect.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
93
XP
Controlling Margins Continued
• The four margin attributes can be combined into a single attribute
with the syntax:
selector {margin-top margin-right margin-bottom
margin-left}
– if you only include three values in the combined attribute, they are
applied in the following order: top, right, bottom, and the browser
sets the left margin to match the right margin
– if two values are specified, they are applied to the top and right
margins, and the browser sets the bottom and left margins to match
the top and right margins
– if only one value is entered, the browser applies the value to all
four margins
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
94
XP
Setting Padding Size
• Padding refers to the amount of space between
the element and its border.
• Four attributes are used to control the size of the
element’s padding:
–
–
–
–
padding-top
padding-right
padding-bottom
padding-left
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
95
XP
Formatting the Border
• CSS provides a variety of attributes for managing the box’s
border width, border color, and border style.
• To combine all of the border attributes, use the syntax:
border: border-width border-style border-color;
• These attributes can be applied to all four borders at once, or
you can work with individual borders.
• There are a variety of ways with which border styles can be
expressed.
• Support for the border declaration is inconsistent across
browser types and versions.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
96
XP
Different Border Attributes
The figure
summarizes the
various border
attributes.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
97
XP
Example of Border-Style Values
Border widths can be
expressed using units
of length or with the
keywords thin,
medium, or think.
The border color can
be defined using color
names or color values.
This figure shows that
each of the nine
different styles that
can be applied to a
border.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
98
XP
Formatting the Width and
Height of Block-Level Boxes
• To change the width of a box, use the width attribute.
• Box width can be expressed in terms of absolute or
relative units of length, or as a percentage of the width of
the parent element.
– for example, the style:
body {width: 75%}
– reduces the width of the Web page body to 75% of the width of the
browser’s display area
• The width attribute is seldom used except with text boxes
and inline images.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
99
XP
Formatting the Width and Height of
Block-Level Boxes Continued
• The height attribute sets the height of the element.
• Heights can be expressed in absolute or relative lengths,
but not percentages.
• Typically, you won’t set the height of a block-level element
because problems can arise when the amount of text in the
element exceeds the height allowed.
• The height attribute is usually applied to inline images
and little else.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
100
XP
The float Attribute
• The float attribute works like the align=“left”
or align=“right” attributes used with the <img>
tags.
• This attribute places the block-level element on
the left or right margin of the parent element.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
101
XP
Floating a Block-Level Element
This figure shows that
when a browser
encounters the float
attribute, it moves the
element over to
whatever margin the
Web author has
specified and then
brings the next blocklevel element up. The
text in that element is
wrapped around the
floating element.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
102
Using the clear Attribute
XP
Prevent other elements
from wrapping around
the floating element by
adding the clear
attribute to the element
below the floating
element.
When the value of the
clear attribute is set to
“right,” the browser
displays the element on
the page at the point
where the right margin
is clear.
Other possible values
for the clear attribute
are “left” and “both”
(for both margins).
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
103
XP
An Example Web site
This figure shows an example Web site with the features discussed in this tutorial.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
104
XP
Tutorial 7 Summary
• Learned about the history and theory of style sheets.
• Covered the three types of style sheets: inline, embedded
or global, and linked or external style sheets.
• Covered the syntax of style, describing selectors,
attributes, and attribute values.
• Learned how to group selectors to apply the same style to
multiple tags.
• Learned how a browser resolves style precedence and style
inheritance.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
105
XP
Tutorial 7 Summary Continued
• Discussed parent and descendant elements and contextual
selectors.
• Focused on applying different style attributes to Web page
elements.
• Examined font and text attributes including word and letter
spacing, font styles and weights, and text alignment.
• Learned how to apply color and background attributes.
• Covered the style attributes that can be applied to lists.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
106
XP
Tutorial 7 Summary Continued
• Learned how to apply styles to hypertext.
• Learned about pseudo-elements and pseudo-classes in
order to create rollover effects (Internet Explorer only).
• Discussed general classes and id’s.
• Covered style attributes of all block-level elements..
• Learned how to control the margin, padding, and border
attributes of their block-level elements.
• Covered the float attribute to control the placement of a
<div> tag on the Web page.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 7
107