Recently, I picked up this book because I’ve wanted to learn CSS but haven’t found any online tutorials to my liking. It bills itself as being for a beginner to intermediate level and is geared for people who want a simple guide for quickly learning CSS. Going into this experience, I would say I knew enough HTML to consider myself an intermediate user. I decided to work my way through the book in sequential order and build my own pages from scratch rather than use the examples provided on the web. After finishing, these are my impressions of the book:
- I had a rocky time getting started, partially because the “Hello World” of setting up CSS wasn’t until lesson 4 and only occurred after discussing the eight or so ways to select an element for styling. In my mind, any “Hello World” introduction should only be superseded by a high level overview.
- Examples in the lessons that focus on individual elements are not always consistent and do not always work toward a single end point. Having a solid understanding of HTML definitely helped me fill in the gaps here. I think this contributed to the book feeling unpolished.
- The later lessons could have been set up to build on one another without having to start from scratch each time. (aka, make a Nav bar, add image to make a site header, add 2 columns plus footer, add a third column, …). I spent a lot of time recreating something similar to what I built in previous chapters, and I couldn’t reuse it to build upon.
- After implementing rounded borders with images, I think I can better appreciate the support in CCS3. I stumbled upon this demonstration page that I found helpful.
In general, I think the aspect of CSS that will take getting used to, coming from a pure coding background, is the padding and margins. On a lighter note, I wanted to share, in all its hideous glory, the final result of trying to implement as many possible selector hierarchies as I could:
Finally, this is a list of differences I found between IE8 and Firefox 5 through casual observation during my pursuits:
- IE does not respect direct decedent selectors.
- IE handles several border style colorings different from Firefox.
- Firefox does not respect a background image for the
- IE renders the
clear:attribute differently than Firefox, at least in the example I was able to construct.
- IE does not render the
margin:attribute of the table’s caption element, but it will render the
- IE does not respect table caption margins.
- Firefox does not render the <div> element. From what I found, the
border:property does not render nor do properties appear to apply to children elements, or at least FF respects them differently than IE.
- Firefox does not render/respect the
I’ll have to do a few follow up posts as I experiment more with CSS. I’ve also placed the examples I created in a github repository here.
Additional CSS resources and reading:
- CSS3 border-radius demo
- CSS Shorthand Guide
- Bootstrap, from Twitter
- Hyphenation in CSS3
- A proposal for rethinking CSS grids