Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Chapter 3 CONFIGURING COLOR AND TEXT WITH CSS Cascading Style Sheets (CSS) • Used to configure text, color, and page layout. • Launched in 1996 • Developed by W3C CSS Zen Garden Web Page Ex Advantages of CSS • More options for typography and page layout • Style is separate from structure • Styles can be stored • Documents are smaller • Site maintenance is easier Configuring Cascading Style Sheets 1. Inline Styles – coded in the body. 2. Embedded Styles – defined within a style element in the head section. 3. External Styles – coded in a separate text file. 4. Imported Styles – similar to external, importing into sheet using @import directive. CSS Selectors and Declarations • Selector – can be an HTML element name, a class name, or an id name. • Declaration – indicates the CSS property you are setting and the value you are assigning to the property. BackgroundColor Property • Configures the background color of an element. body { background-color: yellow } Color Property • Configures the color of an element. body { color: blue } Configure Background and Text Color • Can configure more than one property for a selector • Use semicolon (;) to separate body { color: blue; background-color: yellow; } Spaces Optional body { color: blue; background-color; yellow; } body{color:blue;background-color:yellow} body { color: blue; background-color; yellow; } Hexadecimal Color Values • Uses RGB color (red, green, blue) • Values of red, green, blue vary from 0 to 255 • # is used to indicate a hexadecimal value • Hex value pairs range from 00 to FF CSS Color Syntax CSS Syntax Color Type p { color: red; } Color name Hexadecimal color value Shorthand hexadecimal Decimal color value HSL color values p { color: #FF0000; } p { color: #F00; } p { color: rgb (255, 0, 0; } p { color: hsl (0, 100%, 50%; } Inline CSS • Inline styles are coded with a style attribute • <h1 style=“color:#cc0000”>Heading text is red</h1> • <h1 style=“color:#cc0000;backgroundcolor:#cccccc”>This is displayed as a red heading on a gray background</h1> Hands-On Practice 3.1 1) Open to page 88 2) Open template.html from Ch 2 3) Modify with blue text from the book 4) Save first as inline2.html and second as inline3.html 5) Test page Solution 3.1 Embedded CSS • Placed within a <style> element • Style element nested in <head> element <!DOCTYPE html> <html lang=“en”> <head> <title>Embedded Styles</title> <meta charset=“utf-8”> <style> body { background-color: #ccffff; color: #000033; } </style> </head> <body> <h1>Embedded CSS</h1> <p>This page uses embedded styles.</p> </body> </html> Hands-On Practice 3.2 1) Open to page 90 2) Open starter.html from Ch 3 3) Modify with text from the book 4) Save as embedded.html 5) Test page Solution 3.2 FontFamily Property • Configures type fontface. p { font-family: Arial, Helvetica, sans-serif; } FontSize Property • Sets the size of the font body { font-size: 1em; } Font-weight Property • Configures the boldness of the text body { font-weight: bold; } Font-style Property • Configures text displayed in italics. body { font-style: italic; } Line-height Property • Configures the height of the line of text (use the value 200% to appear double-spaced) body { line-height: 200%; } Text-align Property • Configures alignment of text within a block display element body { text-align: center; } Text-indent Property • Configures the indentation of the first line of text body { text-indent: 5em; } Textdecoration Property • Modifies the appearance of text with an underline, overline, or line-through body { text-decoration: none; } Texttransform Property • Configures the capitalization of text body { text-transform: uppercase; } White-space Property • Specifies the way the whitespace is displayed by the browser body { white-space: nowrap; } Text-shadow Property • Configures a drop shadow on text body { text-shadow: 3px 3px 5px #666; } Vertical Offset Color Value Horizontal +# shadow below Offset Blur Radius -# shadow above +# shadow on right (optional) -# shadow on left Higher value = more blur Hands-On 1) Open to page 97 Practice 2) Open embedded.html from Ch 3 3.3 3) Modify with text from the book 4) Save as embedded1.html 5) Test page Solution 3.3 CSS Selectors CSS style rules can be configured for an: – HTML element selector – Class selector – Id selector – Descendant selector Using CSS with Class • Apply a CSS rule to a certain "class" of elements on a web page • Does not associate the style to a specific HTML element • Use .classname Placed in the <Style> tags: .feature { color: #c70000; } Placed within the <body> tags: <li class=“feature”>Usability Studies</li> Using CSS with ID • Apply a CSS rule to ONE element on a web page. • Use #idname Placed in the <Style> tags: #main { color: #333333; } Placed in the <body> tags: <div id=“main”>This sentence will be displayed using styles configured in the main id.</div> Hands-On 1) Open to page 101 Practice 2) Open embedded2.html from Ch 3 3.4 3) Modify with text from the book 4) Save as embedded3.html 5) Test page Solution 3.4 Descendant Selector • Used to specify an element within the context of its container (parent) element. main p { color: #00ff00; } Span Element • Defines a section on a web page that is not physically separated from other areas. • Use if you need to format an area that is contained within another <p>, <blockquote>, <li>, or <div> tag <p><span class=“company”>Trillium Media Design</span> will bring… Hands-On Practice 3.5 1) Open to page 103 2) Open embedded3.html from Ch 3 3) Modify with text from the book 4) Save as embedded4.html 5) Test page Solution 3.5 Using External Style Sheets Link Element - associates an external style sheet with a web page. Goes in the <head> tags: <link rel=“stylesheet” href=“color.css”> Hands-On Practice 3.6 Part 1: 1) Open to page 104 -105 2) Open a NEW text editor page 3) Modify with text from the book 4) Save as color.css Part 2: 1) Open template.html from Ch 2 2) Modify with text from the book 3) Save as external.html 4) Test page Solution 3.6 Hands-On Practice 3.7 1)Open to page 106 2)Follow directions in book 3)Test web page Solution 3.7 ID Wrapper • Centers the entire web page • Configure a div element that “wraps” the entire page content #wrapper { width: 700px; margin-left: auto; margin-right: auto; } <div id=“wrapper”> …page content here… </div> Hands-On 1) Open to page 109 Practice 2)Create a NEW folder called Trillium2 3.8 3) Copy index.html, services.html, and trillium.css into folder 4)Follow directions in book Solution 3.8 The “CASCADE” • Rules of precedence • Styles can be overridden when needed Hands-On Practice 3.9 1) Open to page 119 2)Create a NEW folder named mycascade 3)Follow directions from the book Solution 3.9 CSS Validation • W3C has a free Markup Validation Service that checks your CSS code for any syntax errors. • http://jigsaw.w3.org/css-validator Hands-On Practice 3.10 1) Open to page 113 2) Open color.css from Ch 3 3) Follow directions from the book