In-Class exercise: CSS

Webstorm & CSS

Webstorm is a JavaScript IDE from JetBrains. Although you can use other editors (for example, Visual Studio, Vim, or Emacs), I am a fan of Webstorm.

Students can get a free one-year educational license by filling out a form using their Claremont Colleges .edu address.

Once you've received the license, download the product for either Mac, Windows, or Linux.

  1. Open Webstorm and create a new empty project.
  2. Download 3-CssStarter.html to your local machine.
  3. Add CssStarter.html to your project.
  4. Add a css file to your project (and make sure that 3-CssStarter.html uses it).
  5. Add appropriate styles to your stylesheet so that when you view 3-CssStarter.html, it looks like the following:

    desired HTML with style.

    Note that you may add class and id attributes to any of the tags in the HTML, but may not make any other changes to the HTML file.

    Make sure you don't have any errors or warnings in your CSS file.

  6. CHALLENGE: Revert the changes to the HTML and update the style sheet so that you don't make any changes to the HTML file at all!