Overview

The webpages you have made so far have been pretty barebones, since you’ve only been using HTML and focusing on the structure of your page. To improve the style of your page, you’ll need a new language: Cascading Style Sheets or CSS. Today’s readings are a quickstart to using CSS.

Basic Learning Objectives

Before class, you should be able to:

  • Explain the fundamental difference between and main purposes of HTML and CSS
  • Define what an HTML tag and HTML attribute are
  • Explain the difference between a CSS class and a CSS identifier
  • Define the purpose of a div tag
  • Explain the order in which CSS elements are prioritized, for example if two CSS elements within a style file contradict, which element style is applied?

Advanced Learning Objectives

After class, you should be able to:

  • Use basic HTML and CSS to make a cleanly styled website
  • Explain why we separate out content (HTML) from presentation (CSS) and what advantages that gives us as developers

Readings

To achieve the basic learning objectives, you should read the following:

  • Lesson 1: Building Your First Web Page. (Note: At the end of this page, the author talks about “resetting” browser styles. You do not have to worry about doing this, but do read the CSS as it is a good example of CSS structure.) If you’ve already done some HTML and CSS, you may find that you can skim this page.

  • Lesson 2: Getting to Know HTML - there is some repetition from the previous HTML reading, so feel free to skip the parts you are already familiar with

  • Lesson 3: Getting to Know CSS Feel free to poke around the rest of the site as well, particularly if you’ve already done some HTML and CSS and know the basics.

  • Optional: Making columns Many groups in the past have wanted to make columns on their website, so here is a guide for that

  • Optional: CSS learning games If you want to challenge yourself and get better at CSS, try out some of these!

You may also find the HTML and CSS tutorials on W3Schools useful. Bonus: you can try out code right in the browser!

Checks

Write down a list of CSS attributes that you want to use for your website and bring it to class to use as a reference.