Week8 8: Intro to CSS

In this lesson you'll start to learn CSS (Cascading Stylesheets), which are used to define the appearance (colour theme, borders, spacing, etc) and layout of your page. We'll start off by learning the syntax of CSS before we begin learning the specific properties and their values.

Intro to CSS

Materials

All links open in the "notes" tab.

• Introduction to CSS
• CSS Syntax
• Validating CSS
• Basic Selectors:
  • Class Selectors
  • ID Selectors
  • Grouping Selectors for Maintainability
  • OPTIONAL: Attribute Selectors
• Using CSS (just the section on Using CSS)

Resources

All links open in the "ref" tab.

• References:
  • CSS Values
  • CSS Reference Card
• Tools:
  • HTML Validator - always validate all of your HTML.
  • CSS Validator - always validate your CSS.
  • CanIUse.com - if you want to see which browsers support a certain CSS property, this tool will tell you! Just type your property into the search box.
• Tutorials, Articles:
  • MDN: CSS Basics
  • MDN: CSS Basics Tutorial
  • W3Schools CSS Tutorial

Homework

Practice/Study Questions

• Complete this week's worksheet. Note that worksheets can be completed during class or after class. They can be completed using your own lecture notes or from the provided materials. Worksheets are not directly graded, but the questions might appear on exams and other evaluations. Ask the professor if you would like feedback on your worksheet (you must make an attempt on the worksheet in order to receive feedback).
• Answer the following questions where you take your class notes (form your answers using YOUR OWN WORDS; you might have to search for answers in the resources above):
  1. Why is it better to put your styling in a separate document?
  2. What is CSS? What does CSS stand for? What does CSS do? How is CSS different from HTML?
  3. What is a rule? What is a selector? What's inside a declaration block? What makes up a declaration?
  4. What are the different types of selectors you learned and why would you use each?
  5. How and why do you combine type and class selectors? What are some techniques you can use with selectors to make your CSS more efficient?
  6. What are three ways in which you can implement CSS into your web document(s)? What are the advantages/disadvantages of each?
  7. How does CSS development fit into development with PE?

Practice Exercises

For each exercise, validate the HTML using the HTML Validator, and validate your CSS using the CSS Validator. Fix all problems until you get no errors.

1. If you haven't already done so, create a sub-directory in your local workspace and in your server workspace (off /syst10049) called "week8". Feel free to add an extra level for all of your practice exercises (e.g. /exercises).
   • For each practice exercise in each lesson, you'll usually be asked to create an exercise directory for that project, such as "/exercise1".
   • It is assumed that you will create the exercise project directory in both your local workspace and in your server workspace using the appropriate and standard directory structure discussed in class.
2. Follow the instructions in the CSS tab of the following CodePen: Exercise 1 Codepen (opens in the pen tab).
3. Follow the instructions in the CSS tab of the following CodePen: Exercise 2 Codepen (opens in the pen tab)