LESSON OBJECTIVES - CSS

1. CSS Introduction
2. CSS How To
3. CSS Syntax

IN-CLASS Exercise: SAVE AS: css1.html and mystyle.css

Go to the W3Schools CSS Tutorial website

READ and COMPLETE the following:

1. READ the section on CSS Introduction
2. READ the section on CSS How To
3. READ the section on CSS Syntax
4. Complete the CSS Syntax Exercises 1 - 4
5. Complete the CSS How To Exercises 1 - 4

IN-CLASS Exercise: SAVE AS: css2.html, css3.html

Go to the W3Schools CSS Tutorial website

READ and COMPLETE the following:

1. Types of CSS Selectors: (Global, Id, Class and more)
2. Use the <div> tag to break your page into divisions.
3. READ the section on CSS Text
4. READ the section on CSS Fonts
5. READ the section on CSS Box Model
• Complete Exercises 1 - 4
6. READ the section on CSS Background (Image)
• Complete Exercises 1 - 4

LESSON OBJECTIVES - CSS

RECIPE WEB PAGE REQUIREMENTS: Save as Recipe.html (Extended until Tuesday, September 18, 2018 by 4:00 pm)

1. Create a web page of your favorite recipe.
2. Use **internal** CSS for styling your (Background, Images, Lists, Links, Text alignment and Fonts).
3. Use <div> tag.
4. Web page content should informative and design should be appealing.

1. CSS Links
• a:link, a:visited, a:hover, a:active
2. CSS Lists
• list-style-type, list-style-image, list-style-position, list-style
3. CSS Tables
• border, width & height, text-align, vertical-align
• padding, color
4. CSS Pseudo-class
   • highlight:hover, div:hover
5. CSS Position
   • position:static, position:relative, position:fixed, position:absolute, position:sticky
6. CSS Floats
   • float property, clear property, clearfix Hack
7. CSS Navigation Bar - List of Links
   • Vertical Examples, Horizontal Examples, Active / Current / Fixed
8. CSS Website Layout
• Header, Navigation Menu, Content in Columns, Footer, Responsive Layout

Go to the W3Schools CSS Tutorial website

READ and complete the following:

1. READ the section on CSS Links
• Review the 4 Link States.
2. READ the section on CSS Lists
• Review how to remove the bullets.
3. READ the section on CSS Tables
• Review how to create a fancy table using CSS.
4. READ the section on CSS Pseudo-class
   • Review how to style an element for different states.
5. READ the section on CSS Position
• Review how to position elements for layout.
6. READ the section on CSS Floats
• Review how to float an element.
7. READ the section on CSS Navigation Bars
• Review how to use for easy navigation on web pages.
8. READ the section on CSS Website Layout
• Review how to design different types of web page layouts.

IN-CLASS Exercise:

1. Save As: css_topnav.html --> Click on CSS Templates, create the topnav, content and footer webpage layout.
2. Save As: css_float.html --> Click on CSS Templates, create a header, equal columns, footer using float web page layout.

LESSON OBJECTIVES - CSS

1. CSS Quiz 2

CSS Project 2 Web Page Project

DUE - Tuesday, September 25, 2018 by 4:00 pm

BEFORE LEAVING EVERY CLASS

1. SIGN OUT of your Email.
2. DELETE files or folders you saved on the Desktop.
3. EMPTY Your Recycle Bin.
4. CLEAR YOUR BROWSER HISTORY.
5. CLOSE all Open Windows