Session 3.1.

Objectives
 What is CSS?
 Define CSS syntax
 Learn about the authoring options
 Add comments to a CSS
 Defining color in CSS

What is CSS?
 Cascading Style Sheets is a style sheet language developed to control the presentation of markup language documents.

Difference between HTML and
CSS
CSS
HTML

CSS Syntax
 General Syntax of a CSS rule: selector { property1: value1; property2: value2; property3: value3;
...
}

CSS Syntax h2 { color: green; text-align: center;
} body { background-color: black;
}

Grouping Selectors h1 {font-weight: normal; color: blue;} h2 {font-weight: normal; color: blue;}
Can be grouped: h1, h2 {font-weight: normal; color: blue;}

Authoring Options
 Based on style locations
 External Styles
 Embedded Styles
 Inline styles

External Styles

Embedded Styles

Inline Styles

Practice – Link to CSS files
1.
2.
Download Sunny Acres files.
Link holiday.htm to the hs_layout.css style sheet and the hs_styles.css style sheet.

Writing Comments
/*
Chocolate Factory Style Sheet
Author: Johnny Depp
Date: 02/18/2013
*/

Practice - Comments
1.
Add comments at the top of the hs_styles.css file.

Defining a Color in CSS
 Defining a color in CSS
 RGB triplets
 Hexadecimal numbers
 http://www.w3schools.com/html/html_colors.asp
 RGB triplet syntax: rgb(red, green, blue)
 Hexadecimal number syntax:
# redgreenblue

Setting Foreground and Background Color
 Background Color: background-color: color ; where color is a color value.
 Foreground Color (text color): color: color ;

Practice – Setting Background
Colors and Text Colors
1.
2.
3.
Create a style rule for the page for the body page, set the background color to white.
Create a style rule for unordered lists within the nav element that sets the background color to the value (248, 175, 175).
For every hypertext link within the navigation list, create a style that sets the font color to white.
The owner has placed a promotional photo in a figure box.
Set the background color of figure boxes to the color value
(248, 175, 175).

Including Opacity (only CSS3) rgba( red , green , blue , opacity )
Examples: rgba(182, 156, 89, 0.7) rgba(45, 199, 205, 0.8)

Practice – Setting Colors including Opacity
1.
2.
For h1 headings nested within the section element, create a style rule to: a) set the background color to the value (148,
51, 62) and b) set the font color to white for older browsers and to the color value (255, 255, 255) with an opacity of 80% for newer browsers.
For address elements nested within the footer element, create a style rule to a) set the background to the color (148,
51, 62) and b) set the font color to white for older browsers and to the value (255, 255, 255) with 80% opacity for newer browsers.

Selecting a Color Palette:
Too Tough?

Selecting a Color Palette: Too
Tough?