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.

History

Proposed style sheets—Håkon Wium Lie: http://en.wikipedia.org/wiki/Håkon_Wium_Lie.

Partnered with Lie to create CSS—Bert Bos: http://en.wikipedia.org/wiki/Bert_Bos.

Developed the Arena browser (first to position images and text, magazine-style)—Dave Raggett: http://en.wikipedia.org/wiki/Dave_Raggett.

An excellent CSS history overview from an unexpected source: http://seostyles.net/css/css-history/.

CSS Rules

Basics: http://www.htmlhelp.com/reference/css/structure.html.

Rules and Rule Sets: http://css.maxdesign.com.au/selectutorial/rule.htm.

CSS Selectors

An extensive list: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors.

The latest standard: http://www.w3.org/TR/CSS2/selector.html.

Thorough list, thoroughly tested: http://quirksmode.org/css/selectors/.

CSS Units

What Is an em?: http://en.wikipedia.org/wiki/Em_(typography).


Feedback: MartinRinehart at gmail dot com

# # #