Frontend Engineering, Volume II

Pro CSS

All Standards: CSS 1, CSS 2.1, CSS 3

© 13-February, 2014, Martin Rinehart

Cannot view 3D cube in any version, MSIE.

Viewing device, this page: minimum width, 660px.

The cube, happily floating in space above this paragraph, uses very simple HTML and very advanced CSS. You'll make your own in Chapter 9 and animate it in Chapter 10. But let's start at the beginning.

The two screenshots that follow (the dashed border separates the screenshots from the other content) show our sample project site in pure HTML and then in HTML with some gentle CSS styling. What do you think? Worth a few minutes to develop a stylesheet?

The screenshots are not retouched. (View the originals, Credits page, HTML I/Project and Credits page, CSS II/Project.) The page contents are unchanged except that the CSS example links to the stylesheet.

Note that the background of the nav and heading boxes is lighter in the CSS version. The effect is subtle. You feel it more than see it.

Note that the space devoted to border, padding and margin, CSS version, affects the width available for content.

The boxes around the menu items are obvious. The way the menu items turn white as the cursor passes over them is lost in a screenshot (try it online). That lets us lose the "text-decoration" (underscore) of the original links.

Less obvious: the corners, top-right of the nav div and bottom-left of the title div. (Repeated at the bottom of the page), the slight shadow on the page heading and the very dark brown (not black) text color.

As you browse the sample site online you'll see that this magic is applied to every page (courtesy the single stylesheet). It took exactly one Notepad++ "Find in Files" command to add the stylesheet link to every page.

# # #

Feedback: MartinRinehart at gmail dot com