Frontend Engineering, Volume II

CSS: Chapter 1 Companion—Write Your First CSS

© 2013, Martin Rinehart

Credits Page, Sample Project, HTML and CSS

Sample project credits page, pure HTML.

Just above you see a div (dashed border) with a heading ("Credits Page, ...") and a screenshot in an <img>. The <img> has a white background around the .jpg. The .jpg shows the menu and title areas of our sample project in a bit of their page's background. Remember what they looked like in pure HTML? Go back to HTML I > Project > Credits on the menus above to take a look. Then try the CSS II > Project > Credits choice for the same site with CSS styling. We think the improvement is amazing.

The "amazing" part is not how good it looks, though we do think it's a big improvement. The "amazing" part is how simple it is. You'll be able to create a menu like the one in the screenshot before you're done with this chapter. That's amazing.

As long as you're here, you can get a jump on the text by continuing to Companion 1a to get your template ready for the Chapter 1 coding.


Proposed style sheets—Håkon Wium Lie:åkon_Wium_Lie.

Partnered with Lie to create CSS—Bert Bos:

Developed the Arena browser (first to position images and text, magazine-style)—Dave Raggett:

An excellent CSS history overview from an unexpected source:

CSS Rules


Rules and Rule Sets:

CSS Selectors

An extensive list:

The latest standard:

Thorough list, thoroughly tested:

CSS Units

What Is an em?:

Feedback: MartinRinehart at gmail dot com

# # #