Cascading Style Sheet - Chapter 6 - Cascading Style Sheets...

Info iconThis preview shows pages 1–9. Sign up to view the full content.

View Full Document Right Arrow Icon

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
This is the end of the preview. Sign up to access the rest of the document.

Unformatted text preview: Chapter 6 - Cascading Style Sheets (CSS) Outline 6.1 Introduction 6.2 Inline Styles 6.3 Embedded Style Sheets 6.4 Conflicting Styles 6.5 Linking External Style Sheets 6.6 W3C CSS Validation Service 6.7 Positioning Elements 6.8 Backgrounds 6.9 Element Dimensions 6.10 Text Flow and the Box Model 6.11 User Style Sheets 6.12 Web Resources Objectives In this lesson, you will learn: To control the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of a Web site the same look and feel. To use the class attribute to apply styles. To specify the precise font, size, color and other properties of displayed text. To specify element backgrounds and colors. To understand the box model and how to control the margins, borders and padding. To use style sheets to separate presentation from content. 6.1 Introduction Cascading Style Sheets (CSS) Separation of structure from presentation 6.2 Inline Styles Declare an individual elements format Attribute style CSS property Followed by a colon and a value inline.html (1 of 2) 1 <?xml version = "1.0" ?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" > 4 5 <!-- Fig. 6.1: inline.html --> 6 <!-- Using inline styles --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml" > 9 <head> 10 <title> Inline Styles </title> 11 </head> 12 13 <body> 14 15 <p> This text does not have any style applied to it. </p> 16 17 <!-- The style attribute allows you to declare --> 18 <!-- inline styles. Separate multiple styles --> 19 <!-- with a semicolon. --> 20 <p style = "font-size: 20pt" > This text has the 21 <em> font-size </em> style applied to it, making it 20pt. 22 </p> 23 pt=point em=emphasize (italic) inline.html (2 of 2) 24 <p style = "font-size: 20pt; color: #0000ff" > 25 This text has the <em> font-size </em> and 26 <em> color </em> styles applied to it, making it 27 20pt. and blue. </p> 28 29 </body> 30 </html> 6.3 Embedded Style Sheets Embed an entire CSS document in an XHTML documents head section Multipurpose Internet Mail Extensions (MIME) type (type attribute) Describes a files content Property background-color Specifies the background color Property font-family Specifies the name of the font to use Property font-size Specifies a 14-point font declared.html (1 of 3) 1 <?xml version = "1.0" ?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" > 4 5 <!-- Fig. 6.2: declared.html --> <!...
View Full Document

Page1 / 55

Cascading Style Sheet - Chapter 6 - Cascading Style Sheets...

This preview shows document pages 1 - 9. Sign up to view the full document.

View Full Document Right Arrow Icon
Ask a homework question - tutors are online