Transcript Tutorial 3: Designing a Web Page with CSS

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
HTML
CSS
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
Download Sunny Acres files.
2. Link holiday.htm to the hs_layout.css style sheet and
the hs_styles.css style sheet.
1.
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
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).
1.
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
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.
1.
Selecting a Color Palette:
Too Tough?
Selecting a Color Palette: Too
Tough?