This is an overview of HTML and CSS, mostly the latter.

Using HTML

We’ll generally assume that HTML is easy to pick up as needed. For an introductory tutorial on HTML, review the HTML materials linked from the Prerequisites page. For an HTML reference, refer to the HTML materials linked from Guide 4.

Using CSS

This CSS tutorial includes HTML throughout. We’ll be assuming HTML5 and CSS3.

Exercise 4.1

Complete this CSS tutorial*, doing the “Action” and “Challenge” exercises specified in each section. Attend to the following details for the specified step of the tutorial. Your solution should look something like the image on the right, so you’ll be able to skip some of the action sections in the later exercises. Also, feel free to experiment.

  1. What is CSS? — View the files using a local browser. Consider whether you need to run your own server or if you can simply load them directly.
  2. Why use CSS? — See the motivation for using CSS.
  3. How CSS works — Note that you can inspect the DOM using Chrome’s DevTools (rather than the Mozilla DOM Inspector or X-Ray Goggles).
  4. Cascading & Inheritance — See the cascading vs. inheritance distinction.
  5. Selectors — Compare and contrast and id vs. class selectors and selectors vs. pseudo-selectors. Note that you can skip the homepage link as I’ve done in the image to the right.
  6. Readable CSS — See the comments on CSS coding style. You can choose any appropriate style.
  7. Text Styles — Is Comic-Sans loaded on your system? If so, what do you think of it? For alternatives, consider these Font Recommendations (for some entertaining font bashing, see the section on “Bad Fonts”). The example to the right uses helvetica, arial, sans-serif (because I liked Helvetica, the movie).
  8. Color — as written...
  9. Content — See the part on adding background images.
  10. Lists — as written...
  11. Boxes — as written...
  12. Layout — To save space, the image to the right uses float layouts to put the CSS text and the lists side-by-side. You can skip this and produce a simpler, top-to-bottom layout. We’ll look more at layout in the next unit.
  13. Tables — Do this as written, which means that the title of the table will be formatted as a caption, not as a (proper) title (see the sample to the right).
  14. Media — skip this section...

Save the final versions of your HTML and CSS files to submit for this lab.

Enforcing Standards

Given the variety of browsers in use, it’s generally a good idea to produce standard HTML5/CSS3.

Exercise 4.2

Validate your code using the following webtools. Validate the last HTML and CSS code examples you created above as follows.

Do you agree with the standards enforced by the validation tools? Are there any reported errors that work fine in the browser? If so, how could that be?

Save your answers to these questions in a lab04.txt file in the root of your lab repo.

Checking in

We will grade your work according to the following criteria:

*MDN replaced their original tutorial (archived here by the Wayback Machine) with this new version. The new and old versions are largely similar in content.