Web Chapter.03

Views:
 
Category: Education
     
 

Presentation Description

No description available.

Comments

Presentation Transcript

Tutorial 3Using CSS to Format Multiple Pages : 

Tutorial 3Using CSS to Format Multiple Pages

Objectives : 

New Perspectives on Blended HTML, XHTML, and CSS 22 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

Objectives : 

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 New Perspectives on Blended HTML, XHTML, and CSS 33

Creating and Using Classes : 

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> New Perspectives on Blended HTML, XHTML, and CSS 44

Creating and Using Classes : 

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 { New Perspectives on Blended HTML, XHTML, and CSS 55

Creating and Using Classes : 

Creating and Using Classes New Perspectives on Blended HTML, XHTML, and CSS 66 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

Creating and Using Classes : 

Creating and Using Classes New Perspectives on Blended HTML, XHTML, and CSS 77 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; }

Creating External Styles : 

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 New Perspectives on Blended HTML, XHTML, and CSS 88

Creating External Styles : 

Creating External Styles New Perspectives on Blended HTML, XHTML, and CSS 99 ID selectors are more specific than class selectors (whether dependent or independent) Element selectors (also known as type selectors), are the least specific

Linking an HTML File to an External Style Sheet : 

Linking an HTML File to an External Style Sheet New Perspectives on Blended HTML, XHTML, and CSS 1010 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

Linking an HTML File to an External Style Sheet : 

Linking an HTML File to an External Style Sheet New Perspectives on Blended HTML, XHTML, and CSS 1111

Creating the External Style Sheet Code : 

Creating the External Style Sheet Code New Perspectives on Blended HTML, XHTML, and CSS 1212 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

Using the Text Properties : 

Using the Text Properties New Perspectives on Blended HTML, XHTML, and CSS 1313

Creating the External Style Sheet Code : 

Creating the External Style Sheet Code Setting your own values in the body element overrides any browser default values New Perspectives on Blended HTML, XHTML, and CSS 1414

Using the Text Properties : 

Using the Text Properties New Perspectives on Blended HTML, XHTML, and CSS 1515 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

Using the Text Properties : 

Using the Text Properties The text-align property takes the following values: left (the default) center right Justify Indenting text p { text-indent: 2em; } blockquote {text-indent: 7%; } New Perspectives on Blended HTML, XHTML, and CSS 1616

Using the Text Properties : 

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 New Perspectives on Blended HTML, XHTML, and CSS 1717

Using the Text Properties : 

Using the Text Properties Change case h3 { text-transform: capitalize; } Text decoration underline overline line-through blink New Perspectives on Blended HTML, XHTML, and CSS 1818

Creating Pseudo-Elements : 

Creating Pseudo-Elements New Perspectives on Blended HTML, XHTML, and CSS 1919 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

Creating Pseudo-Elements : 

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 New Perspectives on Blended HTML, XHTML, and CSS 2020

Creating Pseudo-Elements : 

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 New Perspectives on Blended HTML, XHTML, and CSS 2121

Creating Pseudo-Elements : 

Creating Pseudo-Elements The cascade determines which style prevails based upon its source or location New Perspectives on Blended HTML, XHTML, and CSS 2222

Using Filters : 

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. New Perspectives on Blended HTML, XHTML, and CSS 2323

Using Filters : 

Using Filters New Perspectives on Blended HTML, XHTML, and CSS 2424

Using Filters : 

Using Filters New Perspectives on Blended HTML, XHTML, and CSS 2525

Working With an Independent Class : 

Working With an Independent Class New Perspectives on Blended HTML, XHTML, and CSS 2626

Working With an ID Selector : 

Working With an ID Selector New Perspectives on Blended HTML, XHTML, and CSS 2727

authorStream Live Help