Session 3.1.

ObjectivesWhat is CSS?Define CSS syntaxLearn about the authoring optionsAdd comments to a CSSDefining 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

HTML CSS

CSS SyntaxGeneral Syntax of a CSS rule:selector {

property1: value1;

property2: value2;

property3: value3;

...

}

CSS Syntaxh2 {

color: green;

text-align: center;

}

body {

background-color: black;

}

Grouping Selectorsh1 {font-weight: normal; color: blue;}

h2 {font-weight: normal; color: blue;}

Can be grouped:

h1, h2 {font-weight: normal; color: blue;}

Authoring OptionsBased on style locations

External StylesEmbedded StylesInline styles

External Styles

Embedded Styles

Inline Styles

Practice – Link to CSS files1. Download Sunny Acres files.2. Link holiday.htm to the hs_layout.css style

sheet and the hs_styles.css style sheet.

Writing Comments/*Chocolate Factory Style SheetAuthor: Johnny DeppDate: 02/18/2013*/

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

Defining a Color in CSSDefining a color in CSS

RGB tripletsHexadecimal numbers

http://www.w3schools.com/html/html_colors.asp

RGB triplet syntax:rgb(red, green, blue)

Hexadecimal number syntax:

#redgreenblue

Setting Foreground and Background ColorBackground Color:background-color: color;

where color is a color value.Foreground Color (text color):color: color;

Practice – Setting Background Colors and Text Colors1. Create a style rule for the page for the body page, set the

background color to white.2. 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.

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

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