ISTA 230 Introduction to Web Design (Fall 2017)

The Periodic Table

Dmitri Mendeleev has been working on a web page describing the various chemical elements. While he has applied some color theory to his page, he isn't sure how to get the elements to display exactly the way he wants. He's hired you to help him make his website look like the following image:

Periodic Table

Using your understanding of the box model, you are to provide him with the following:

All necessary files can be downloaded here. Note that there are two CSS files used on the web page. The first contains the styles provided by Dmitri. You do not need to modify this file or the HTML itself. The second CSS file (named 'layout.css') is where you should add your CSS rules.

When finished, you'll want to validate your CSS to ensure that it is valid. Use the W3C CSS Validator (found at to validate the contents of your CSS file. Remember, we're using CSS 2.1, NOT CSS 3! You'll need to be sure and select the 'More Options' tab for the CSS validator to ensure that you're not using the CSS 3 profile when you validate!


Solution can be downloaded here.