Creating Web Pages with HTML, 3e - PowerPoint PPT Presentation

Loading...

PPT – Creating Web Pages with HTML, 3e PowerPoint presentation | free to download - id: 65a64e-ZDNlN



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Creating Web Pages with HTML, 3e

Description:

New Perspectives on Creating Web Pages with HTML Tutorial 7: Working with Cascading Style Sheets Tutorial Objectives Learn about the history and theory of cascading ... – PowerPoint PPT presentation

Number of Views:20
Avg rating:3.0/5.0
Slides: 126
Provided by: Course154
Learn more at: http://science.slc.edu
Category:
Tags: html | creating | designs | logo | pages | web

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Creating Web Pages with HTML, 3e


1
New Perspectives on Creating Web Pages with HTML
  • Tutorial 7 Working with Cascading Style Sheets

2
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

3
Tutorial Objectives Continued
  • Design a style for hyertext links in their four
    conditions
  • Define document content with the class and id
    attributes and create styles for them
  • Mark document content with the ltdivgt and ltspangt
    tags and create styles for them
  • Use cascading styles to design page layout

4
HTML and Page Layout
  • Early versions of HTML had little support for Web
    page design.
  • The philosophy was to
  • use basic text files that could be quickly
    downloaded
  • rely on Web browsers to format the documents
    appearance
  • The simplicity of HTML tags made creating Web
    pages easier and made pages load faster.

5
HTML and Page Layout
  • Web authors looked for ways to deliver more
    visually interesting documents. This has been
    done chiefly in three ways
  • using HTML tag extensions
  • converting text to images
  • controlling page layout with tables

6
HTML and Page Layout Upside
  • HTML tag extensions Provide the Web author with
    more choices in layout and design.
  • Converting text to images Dont have to worry
    whether a browser will support a particular font.
    Place in specific locations on the Web page.
  • Tables Use as a layout tool.

7
HTML and Page Layout Downside
  • HTML tag extensions Not all browsers support the
    various tag extensions.
  • Converting text to images You are limited in the
    number of inline images you can use and still
    have the page downloaded in a timely fashion.
    Moreover, its difficult to make quick changes to
    the pages content if you have to edit the inline
    graphics first.
  • Tables This makes the HTML files more
    complicated to write and to interpret.

8
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).

9
Cascading Style Sheets (CSS)
  • 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.

10
CSS Versions
  • CSS1 was released in 1996.
  • CSS2 was released in 1998.
  • CSS3, the latest standard is being developed.

11
Browser Support for CSS
  • Browser support for CSS has proven to be uneven.
  • Internet Explorer
  • Internet Explorer 4.0 provides support for CSS1
    standard.
  • Internet Explorer 5.0 provides the best support
    for CSS1, there are still buys in the
    implementation of Internet Explorer.
  • Netscape
  • Netscapes support for CSS1 has been spotty.
  • Netscape has been pushing their own style sheet
    language over CSS.
  • Netscape is not considered CSS1-compliant,
    However, Netscape 5.0 may end up supporting CSS1.

12
Benefits of Style Sheets
  • Use as a design tool.
  • Makes website more flexible.
  • Easier to maintain and modify.
  • More aesthetically interesting.
  • Consistent look.

13
Web Sites with Information on Cascading Style
Sheets
This figure displays websites that provide more
information about the compliance of browsers with
CSS1 and CSS2, and for information about the
standards themselves.
14
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
    sites design..

15
Using Inline Styles
  • If you need to format a single section in a Web
    page, youd probably use an inline style.
  • To create in inline style, add the style
    attribute to the HTML tag using the following
    syntax
  • lttag stylestyle declarationsgt
  • tag is the name of the tag (h1, h2, etc)
  • style declarations are the styles youll define
    for a particular tag
  • style declaration must be enclosed within double
    quotation marks

16
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
  • attribute1value1 attribute2value2

17
Inserting an Inline Style
This figure shows how to insert an inline style.
18
Heading with New Style
This figure shows the heading with the new style.
19
Creating an Embedded Style
  • An embedded style is a style applied to various
    sections within a Web page.
  • Insert a ltstylegt tag within the head section of
    the HTML file.
  • Within the ltstylegt tag, enclose the style
    declarations needed for the entire Web page.
  • The syntax of an embedded style is
  • ltstyle typestyle sheet languagegt
  • style declarations
  • lt/stylegt
  • style sheet language identifies the type of style
    language used in the document
  • The default, is text/css for use with CSS

20
Selectors and Declarations
  • Style declaration within the ltstylegt tags obey
    the following syntax
  • selector attribute1value1 attribute2value2
    ...
  • 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

21
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
  • ltstylegt
  • h1 color gold font-family sans-serif
  • lt/stylegt
  • h1 is the selector and the text enclosed in the
    braces is the declaration

22
Defining a Global Style
The type attribute was not included within the
ltstylegt tag. This is because text/css is the
default style language , and unless you specify a
different style language, you dont need to enter
the type attribute. When using the ltstylegt tags,
you dont need to include double quotes around
the attributes and attribute values.
23
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
  • ltstylegt
  • h1, h2, h3, h4, h5, h6 colorgold
    font-familysans-serif
  • lt/stylegt

24
The Same Style Applied to Two Headings
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 lth1gt tag is still larger than
text formatted in the lth2gt tag. This is because
the size of the heading text was not defined, so
that attribute is left to the browser.
25
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 dont need ltstylegt
    tags, just the style declarations.

26
Linking to Style Sheets with the ltlinkgt Tag
  • Use the ltlinkgt tag to link Web pages to a style
    sheet.
  • The general syntax for using the ltlinkgt tag is as
    follows
  • ltlink hrefURL relrelation_type
    typelink_typegt
  • 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
    ltlinkgt tag would be
  • ltlink hrefmws.css relstylesheet
    typetext/cssgt

27
Linking to Style Sheetswith _at_import
  • Another way to link to a style sheet is to use
    the _at_import command, which accesses the style
    sheet definitions from another file.
  • To use _at_import with styles, enclose the _at_import
    command within the embedded ltstylegt tags as
    follows
  • ltstylegt
  • _at_import url(stylesheet.css)
  • style declarations
  • lt/stylegt
  • stylesheet.css is the URL of the style sheet file

28
The _at_import Command
  • The _at_import command provides greater flexibility
    than the ltlinkgt tag when working with multiple
    style sheets.
  • The _at_import command has limited browser support.
  • Unless you have a compelling reason to use
    _at_import, you are probably better off using the
    ltlinkgt tag.

29
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

30
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.

31
Working with Style Inheritance
  • Web pages invariably have elements placed within
    other elements.
  • for example, a Web page might have a bold tag,
    ltbgt, placed within a paragraph tag, ltpgt, to
    create boldface text within the paragraph. The
    paragraph tag is likewise placed within the
    ltbodygt tag.

32
Sample Tree Structureof HTML Elements
This figure displays the HTML element
relationship using a tree diagram.
33
Parent and Descendant Elements
  • An element that lies within another element is
    called a descendant or descendant element.
  • An element that contains another element is
    called the parent or parent element.
  • An example of a parent is the ltbodygt tag, which
    contains all of the other tags used to format the
    content of a Web page.
  • Using the principle of inheritance, styles
    defined for each parent tag are transferred to
    its descendants.

34
Contextual Selectors
  • Use the tree structure concept to better control
    how styles are applied to a Web page.
  • CSS provides ways of fine-tuning the context in
    which the selector is applied.
  • if you want to apply a style only to the direct
    descendant of a parent element, use the syntax
    e1 gt e2
  • el and e2 are the names of HTML elements and e2
    is directly below the e1 in the hierarchy of
    elements in the document
  • for example li gt b colorblue

35
Contextual Selectors Continued
  • Not all browsers support contextual selectors
  • Always test Web page using various browsers and
    browser versions.

36
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 users 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.

37
Generic Fonts
This figure shows examples of each generic
type. For each generic font there can be a wide
range of designs.
38
Generic and Specific Fonts
  • One issue with generic fonts is that you cannot
    be sure which specific font the Web browser uses
    to display your text.
  • Whenever possible, it is a good idea to use
    specific fonts.
  • Provide the Web browser with several fonts to
    choose from.
  • Browsers that dont have access to the font you
    specified as your first choice may have your
    second or third choice available.
  • List specific font names first, followed by a
    generic font name for the browser to use if none
    of the specific fonts can be found.

39
Managing Font Size
  • The ltaddressgt tag can format address information
    on a Web page.
  • by default, text formatted with the ltaddressgt tag
    is displayed in normal-sized type, italicized,
    and aligned with the left edge of the Web page.
  • A common method for specifying font sizes with
    HTML is to use the size attribute of the ltfontgt
    tag.
  • The size attribute limits you to only seven font
    sizes.
  • Browsers can display font sizes quite differently.

40
Managing Font Size Continued
  • 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

41
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 browsers default font size
  • the ex unit is equal to the height of a small x
    in the default font

42
The EM and EX Units
The em unit is more useful for page design,
because 1 em is equal to the browsers 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).
43
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.

44
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.

45
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 ltfontgt tag.

46
Expressing Font Sizeas 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.
47
Express a Font Sizeusing Keywords
  • 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

48
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.)

49
Specifying Word, Letter,and Line Spacing
Continued
  • 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.

50
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.
51
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

52
A Title with a Large Font Sizeand Small Line
Height
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.
53
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.

54
Font Weights
  • CSS considers bold to be an aspect of the
    fonts 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

55
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 ltbgt tag will be
    bolder or thicker in appearance than the
    surrounding heading text.

56
Aligning Text Horizontallyand 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

57
Applying the Center Text-Align Style
This figure shows how to apply the center
text-align style.
58
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

59
Values of the VerticalAlignment Attribute
This figure shows the alignment keyword values.
60
Examples of theVertical Alignment Values
This figure shows an example of each
vertical-align value. Baseline is the default
value for vertical alignment.
61
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

62
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.

63
Special Text Attributes
  • CSS provides three attributes for special text
    effects
  • text-decoration
  • text-transform
  • font-variant

64
Values of the Text-Decorating Attribute
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.
65
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

66
Values of theText-Transform Attribute
This figure shows the effect of the various
text-transform values.
67
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.

68
Values of the Font-Variant Attribute
This figure shows values of the font-variant
attribute.
69
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.

70
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 colorteal
  • body color 008080
  • body color rgb (0,128,128)
  • body color rgb (0, 50, 50

71
Changing the Color of the H1-H6 Headings
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.
72
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.

73
Applying a Background Color
This figure shows how to apply a background color.
74
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

75
Applying a Background Imageto an Element
This figure demonstrates how you can apply this
style to the ltbgt tag to create an interesting
design for a section of boldface text.
76
Working with Background Images Continued
  • 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.

77
Values of theBackground-Repeat Attribute
This figure shows the background-repeat
attributes four possible values.
78
Examples of theBackground-Repeat Values
This figure shows examples of each
background-repeat values.
79
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
    elements top edge
  • These values can be expressed as a percentage of
    the display area, in units of length, or with
    keywords.

80
Background-Position Keywordsand Percentages
This figure shows how background-position
keywords relate to the percentage values.
81
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 browsers
    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.

82
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 background-image
    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

83
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

84
Using the Background Style Attribute
This figure shows an example of the background
style attribute.
85
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 ltulgt, ltolgt, or ltligt tags.

86
Values of theList-Style-Type Attribute
This figure shows the possible values of the
list-style-type attribute.
87
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.
88
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.
  • Its a good idea to include the list-style-type
    attribute along with the list-style-image
    attribute.

89
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.

90
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.
91
The list-style Attribute
  • You can combine all of these attributes into the
    list-style attribute.
  • The syntax for this style is
  • list-style list-style-type list-style-image
    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

92
Defining the Appearanceof a List Label
This figure shows how to define the appearance of
a list label.
93
Formatting Hypertext Links
  • Hypertext has an additional attribute that normal
    text doesnt have the condition of the hypertext
    link itself.
  • A hypertext link can be in one of four states
  • the links target has already been visited by the
    user
  • the links target has never been visited by the
    user
  • the link is currently being clicked by the user
  • the users 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.

94
Formatting Hypertext Links Continued
  • CSS provides a different selector for each
    condition.
  • The general syntax is
  • avisited styles for previously visited targets
  • alink styles for targets that have never been
    visited
  • aactive styles for links that are currently
    being clicked
  • ahover 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
  • avisited colorred

95
Creating a Rollover Effect
This figure shows the rollover effect.
96
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.

97
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.
98
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
  • lttag classclass_namegt
  • tag is the HTML tag
  • class_name is the name of the class

99
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.
100
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
  • lttag idid_namegt
  • 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.

101
Creating a Class for Monthly Specials
This figure shows how to create a class for
monthly specials.
102
Working with Container Elements
  • HTML supports two types of container types
  • the ltspangt tag, which is used to contain inline
    elements such as individual letters, words,
    phrases, or inline images
  • the ltdivgt 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

103
Using the ltdivgt Tag
This figure shows an example in which a heading
and a paragraph have been enclosed in a ltdivgt
container. The ltdivgt tag does not actually
format the block-level elements it merely groups
them as a unit. For this reason, the ltdivgt tag
always includes either a class or id attribute
that identifies that group.
104
Using the ltdivgt and ltspangt Tags
This figure shows an example of how the ltspangt
tag can be used to format a selection of text
within a paragraph. A ltdivgt tag is used to
format the entire paragraph. You almost always
include an id or class attribute with the ltspangt
tag.
105
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
  • lth1gt - lth6gt tags
  • ltpgt tag
  • ltblockquotegt and ltaddressgt tags
  • ltulgt, ltolgt, and ltdlgt list tags
  • ltligt, ltdtgt, or ltddgt tags (individual list items)
  • ltdivgt tag
  • ltbodygt tag
  • lthrgt tag
  • ltimggt tag

106
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.

107
Features of the Box Around a Block-Level Element
This figure shows features of the box around a
block-level element.
108
Some Block-Level Elementsin a Web page.
This figure shows some of the boxes in a Web page.
109
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

110
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.

111
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.
112
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

113
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 elements padding
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

114
Formatting the Border
  • CSS provides a variety of attributes for managing
    the boxs 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.

115
Different Border Attributes
The figure summarizes the various border
attributes.
116
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.
117
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 browsers display area
  • The width attribute is seldom used except with
    text boxes and inline images.

118
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 wont 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.

119
The float Attribute
  • The float attribute works like the alignleft
    or alignright attributes used with the ltimggt
    tags.
  • This attribute places the block-level element on
    the left or right margin of the parent element.

120
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 block-level element up. The
text in that element is wrapped around the
floating element.
121
Using the clear Attribute
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).
122
An Example Web site
This figure shows an example Web site with the
features discussed in this tutorial.
123
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.

124
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.

125
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 ids.
  • 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 ltdivgt tag on the Web page.
About PowerShow.com