CONFIGURING COLOR AND TEXT WITH CSS Chapter 3

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

Background- Color 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 body { color: blue; background-color: yellow; } Can configure more than one property for a selector Use semicolon (;) to separate

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 SyntaxColor Type p { color: red; } Color name p { color: #FF0000; } Hexadecimal color value p { color: #F00; } Shorthand hexadecimal p { color: rgb (255, 0, 0; } Decimal color value p { color: hsl (0, 100%, 50%; } HSL color values

Inline CSS Inline styles are coded with a style attribute Heading text is red This is displayed as a red heading on a gray background

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 element Style element nested in element Embedded Styles body { background-color: #ccffff; color: #000033; } Embedded CSS This page uses embedded styles.

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

Font- Family Property Configures type fontface. p { font-family: Arial, Helvetica, sans-serif; }

Font- Size 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; }

Text- decoration Property Modifies the appearance of text with an underline, overline, or line-through body { text-decoration: none; }

Text- transform 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; } Horizontal Offset Vertical Offset +# shadow on right -# shadow on left Blur Radius (optional) Color Value +# shadow below -# shadow above Higher value = more blur

Hands-On Practice 3.3 1) Open to page 97 2) Open embedded.html from Ch 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 tags:.feature { color: #c70000; } Placed within the tags: Usability Studies

Using CSS with ID Apply a CSS rule to ONE element on a web page. Use #idname Placed in the tags: #main { color: #333333; } Placed in the tags: This sentence will be displayed using styles configured in the main id.

Hands-On Practice 3.4 1) Open to page 101 2) Open embedded2.html from Ch 3 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,,, or tag Trillium Media Design 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 tags:

Hands-On Practice 3.6 Part 1: 1)Open to page ) 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 …page content here… #wrapper { width: 700px; margin-left: auto; margin-right: auto; }

Hands-On Practice 3.8 1) Open to page 109 2)Create a NEW folder called Trillium2 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.

Hands-On Practice ) Open to page 113 2) Open color.css from Ch 3 3) Follow directions from the book