Unit 4 Content - Cascading Style Sheets or CSS

Unit 4 - Cascading Style Sheets or CSS

CSS is where we can really take off and do some cool things with our websites.  HTML will define the content of our site, and CSS will define our fonts, colors and even layout of our site.  There are several ways to do CSS for our web pages. One way is to do inline styles, where they simply appear inside of the HTML page along with our HTML tags.  Another way is to create a separate file with our CSS styles in them (External) and then link that file (using some simple code) to our HTML file.  This unit will provide you with some basic building blocks and examples for getting started with CSS.  There is a lot to learn in this section.  Make sure you get it down.  

  Objectives

• Be able to Describe the difference between internal and external style sheets.
• Create a CSS style or setting the background and font colors of a web page.
• Be able to Describe the difference between an "ID" and "Class"  selectors.
• Be able to Describe appropriate contexts for using an "ID" and "Class" selector for styles.
• Demonstrate your ability to create an external style sheet from an internal one, and link it successfully.
• Know how to use the W3C CSS evaluator tool.

    Readings & Activities

• Chapter 5 from text book
• See for yourself how css can be changed on the same website cssZenGarden Links to an external site.
• Work through the focus on Web Design on page 121. 

   Assignment

• Read Chapter 5 in the textbook.  Follow along and complete the hands on exercises as you go. 
• Complete the Pacific Trails Resort Case Study starting on page 122.  Complete instructions are at the Assignment for Unit 4 page. (10 pts)
• Click Here for the assignment
• Unit 4 assignment
• W3C CSS evaluator page

    Resources

• CSS Cheat Sheet Download CSS Cheat Sheet
• CSS Validator Links to an external site.
• HTML Validator Links to an external site.

   Tutorials

Play media comment.How to use Firebug with your HTML and CSS pages

Play media comment.Introduction to CSS - some inline styles

Play media comment.CSS - External Style Sheets - how to set them up

Play media comment.
CSS - ID and Class, whats the difference and how to use them
 

Play media comment.

Using the CSS Validator
 

http://youtu.be/CJH5jizlLwE

 Link Links to an external site.

Link Links to an external site.