Griffin | Web Design 2
 
Resume Table of Contents  

Web Design 2
HTML

Chapter 8
Creating Style Sheets

 
State Standards
 
  • WD 2.2 Content Standard:
    Students use commercial Web design software (Dreamweaver) to create attractive Web pages.
Chapter Objectives
 


Style Sheets:
series of rules that defines the style for a web page or an entire web site.

Students will:

  • Describe the three different types of Cascading Style Sheets
    (p 331, p 334)
  • Add an (1) inline style sheet to a Web page
    • ...inside the HTML document, style information on a single tag in the code, specified using the style attribute.
  • Change the text style of a single paragraph using an inline style sheet
  • Add an (2) embedded style sheet to a Web page
  • ...blocks of CSS information inside the Head Section of the HTML.
  • Change the margin and link styles using an embedded style sheet
  • Create an (3) external style sheet
    • ...a separate CSS file referenced from the document
  • Change the body margins and background using an external style sheet
  • Change the link decoration and color using an external style sheet
  • Change the font family and size for all paragraphs using an external style sheet
  • Change table styles using an external style sheet
  • Use the <link> tag to insert a link to an external style sheet

  • Understand how to define style classes
1. HTML Project 8A Assignment
Duration: moments
 
  1. Create a folder with WEB2 in all caps and the number 2.
    (i.e. My Documents\WEB2)

  2. Within your WEB2 folder create a NEW folder called "CSS". Save all future CSS files in this folder. Remember, no spaces or extra periods in filenames.
    (i.e. My Documents\WEB2\CSS)
2. Read/Skim Chapter 8 p. 329 - 361
3.

Print, staple, and complete the Chapter 8 Questions.

Chapter 8 Questions

Grading:
1. Questions

 ___ 20 points

Total  
 ___ 20 points

4.

Lecture CH8 /CH8 PowerPoint

  • Intro (330)
  • Creating Style Sheets (334)
  • Working with Classes in Style Sheets (338)
  • Adding an Inline Style Sheet (355)
  • Adding an Embedded Style Sheet (341)
  • Adding an External Style Sheet (348)
 
5. Codecademy / Introduction to CSS
Duration: 2 Periods
 
 
  1. Open Firefox! (Will not work in Explorer)
  2. Go to www.codecademy.com and create an account.
  3. Then Learn, Web Fundamentals, then HTML and CSS.
  4. Choose "CSS: An Overview | Start Course"
    1. What's CSS?
    2. CSS Syntax
      1. Review Check (5 pts)
    3. Details, Details
      1. Free Play Review (10 pts) - See sample and hints below.

        1. Spanning. Can you span?
        2. Font Color is blue.
        3. Comment - See the CSS.
        4. Font Family - See the CSS.
        5. Hex Color is red.
        6. Font Size is 24px.
        7. Backup Value - My backup value is san-serif. It's in the CSS.

          Free Play Review Help:
        8. Go Bananas

          HTML:

          <span class="blue">1 - Span </span><br />

          CSS:

          .blue {
                color: Blue;
                font-family: Arial, san-serif;
          }

    4. <DIV> Lesson from HTML Basics III
    5. Selecting HTML Elements
    6. Section 5 Review

  5. Grading:
    1. CSS Syntax: Review Check 5 pts
    2.

    Details, Details: Free Play Review

    1. Span
    2. Font Color
    3. Comment
    4. Font Family
    5. Hex Color
    6. Font Size
    7. Backup Value
    10 pts
    3. Section 5 Review
    10 pts
    Total  
     ___ 25 points
6.

Codecademy /
Project: Design a Button for Your Website
Duration: 1 Period

 
 
  1. Create the button outlined in Design a Button for Your Website.
  2. Show the instructor the button when completed.
Grading:
1. Completed Button  
Total  
 ___ 10 points
7.

Codecademy / CSS Classes and IDs
Duration: 2 Periods

 
 
  1. Complete the lessons for CSS Selectors.
  2. Show the instructor the final result.
Grading:
1. CSS Selectors  
Total  
 ___ 10 points
8.

Codecademy / Project: Sorting Your Friends
Duration: 2 Periods

 
 
  1. Create the class project outlined in Sorting Your Friends.
  2. Show the instructor the circle chart when completed.
Grading:
1. Circle Chart  
Total  
 ___ 10 points
9.

Codecademy / CSS Element Positioning
Duration: 2 Periods

 
 
  1. Complete the lessons for CSS Positioning.
  2. Show the instructor the final result.
Grading:
1. Positioning Review  
Total  
 ___ 10 points
10.

Codecademy / Project: Build a Resume
Duration: 2 Periods

 
 
  1. Create the class project outlined in Build a Resume.
  2. Show the instructor the resume when completed.
Grading:
1. CSS Resume  
Total  
 ___ 10 points
11. Optional – Complete the Online Practice Test, Study Guide  
12. CSS Quick Quiz  

Additional Resources

A.

Online Textbook Resource

Quiz: www.w3schools.com/quiztest/quiztest.asp?qtest=CSS


top