INTRODUCTORY Tutorial 3 Using CSS to Format Multiple Pages.

INTRODUCTORY

Tutorial 3

Using CSS to Format Multiple Pages

XP

New Perspectives on Blended HTML, XHTML, and CSS 2

Objectives• Use classes to style several tags• Identify the differences between dependent and

independent classes• Apply classes to text• Use external style sheets to format several pages• Create a spread heading• Position text to the left, center, or right

XP

New Perspectives on Blended HTML, XHTML, and CSS

Objectives• Identify text attributes to avoid• Use the CSS pseudo-elements :first-letter

and :first-line• Identify CSS filters• Use the <span> tag• Apply special effects to text using CSS filters• Create and apply an independent class

3

XP


Creating and Using Classes• Dependent classes are declarations that let you

style the same tag several ways• Apply the style by coding the word class followed

by an equal sign and the name of the class just to the right (and within) the element selector itself:<strong class="vital">Unplug the appliance before making any repairs.</strong>

4

XP


Creating and Using Classes• Independent classes are declarations that let you

style any tag several ways• An independent class selector is preceded by the

period flag character, like this:.center {

5

XP


Creating and Using Classes

6

• You then code the declarations, just as you would for any other style:.center {color: white;background-color: navy;text-align: center; }

• Using the class in your code is called applying a style

XP


Creating and Using Classes

7

• use ID selectors for formatting a single particular instance on a Web page where you want to style an element

• Code an ID in the same way you code an independent class, except that instead of using the period as the flag character, you use the pound symbol ( # )#copyright {font-variant: small-caps; }

XP


Creating External Styles• Inline styles: Override both embedded and

external styles• Embedded styles: Override external styles• External styles: Do not override either

embedded or inline styles

8

XP


Creating External Styles

9

• ID selectors are more specific than class selectors (whether dependent or independent)

• Element selectors (also known as type selectors), are the least specific

XP


Linking an HTML File to an External Style Sheet

10

• Rel stands for relationship– The rel attribute value is always stylesheet

• Href stands for hypertext reference– The href attribute value is the name of the CSS file to

which you are linking• The type attribute value is always text/css

XP


Linking an HTML File to an External Style Sheet

11

XP


Creating the External Style Sheet Code

12

• An external style sheet document does not have any HTML code

• External style sheets usually begin with a comment that identifies the style sheet, such as its purpose, the author, the date last revised, and so forth

XP


Using the Text Properties

13

XP


Creating the External Style Sheet Code• Setting your own values in the body element

overrides any browser default values

14

XP


Using the Text Properties

15

• Add white space between letters and words– Use the letter-spacing property to control the amount

of white space between letters.– Use the word-spacing property to create white space

between words

XP


Using the Text Properties• The text-align property takes the following

values:– left (the default)– center– right– Justify

• Indenting textp {text-indent: 2em; }blockquote {text-indent: 7%; }

16

XP


Using the Text Properties• Margin properties control white space– margin-top:– margin-right:– margin-bottom:– margin-left:

• Hanging indent– the first line of a paragraph is at the left edge of the

window and the remaining lines of the paragraph are indented from the left edge of the window

17

XP


Using the Text Properties• Change case

h3 {text-transform: capitalize; }

• Text decoration– underline– overline– line-through– blink

18

XP


Creating Pseudo-Elements

19

• The pseudo-elements create an element selector where none existed before

• The colon you see before the element names is required and is part of the pseudo-element name

• Both the :first-letter and :first-line pseudo-elements work only with block-level elements

XP


Creating Pseudo-Elements• Limit your styles to the following properties: – the font properties– the color and background-color properties– the margin, padding, and border properties– the text-transform, font-variant, and line-height

properties

20

XP


Creating Pseudo-Elements• The :first-letter

pseudo-element is used to create a drop cap (aka initial cap)

• The :first-line pseudo-element formats just the first line of a paragraph

21

XP


Creating Pseudo-Elements• The cascade determines which style prevails

based upon its source or location

22

XP


Using Filters• Proprietary code functions on only one hardware

or software platform, such as Internet Explorer or Firefox

• Both have developed proprietary code that can add special effects to text, known as filters.

23

XP


Using Filters

24

XP


Using Filters

25

XP


Working With an Independent Class

26

XP


Working With an ID Selector

27

INTRODUCTORY Tutorial 3 Using CSS to Format Multiple Pages.

Documents

Transcript of INTRODUCTORY Tutorial 3 Using CSS to Format Multiple Pages.