Beginning CSS Web Development: From Novice to Professional [Paperback]

How many of us get interested in a subject and end up buying loads of books on that subject because there is usually not one definitive source to get it from. In my search for the Hallowed CSS grail I have bought to date 5 books (excluding this one). I found only some of the answers I was after from all of them. Out of roughly 10ish chapters per book, I probably learned from only 3-4. If you buy a book as an alternative to searching google for the answers you expect that you wont have to use google to find out what some things mean in the book!

I spent much money and confused days & nights, wondering why someone could just not write a book, that takes you from your basic knowledge of HTML, guide you at a decent pace through the basics of CSS & on to a level where you have the confidence, understanding & proper technique, to design a decent looking website with clear explanations, a thorough discussion of the do's & donts and also when and why to use certain selectors, tags, block elements etc.

Well its apparent someone 'was' listening. Im not sure if Simon Collison has a 6th sense but this book truly does what it says it will'.

The author states that this was the book he wished he had when he was learning CSS & fortunately for people like myself & you its come at just the right time. I anticipated this book so much that I couldnt wait for it on mail-order I went to buy it from a big bookstore on Charing X road in London. I've just finished chapter 6 and so far I have been impressed by the style of writing, humour & clarity with which the author opens up your understanding of CSS. So many things started to 'click' & make sense. Ever had that eureka moment where you just sit there and say 'aaahh so thats how that works' or 'so thats why you do that..etc'.

Well here are a few snippets I have picked up so far...

<u>Divs v Classes</u>

Ever wanted to know when to use a 'class' and not a 'div'. Those of us that have suffered from divitus, will find your cure in this book. Simon makes a clear and concise distinction between the two which will clean up the code on your pages & make sure you go for the div only when you need it. I can now cancel membership to 'Div's Anonymous' yippee!

<u>Banners</u>

For ages I always used an image-editing package like Fireworks to make a title banner for all my pages. So all my banners were gif files which added kb's to my files. Already by chapter 3, I understood how to make a banner simply by using the h1 property & increasing the font & padding around it. I was then able to make site navigation list seamslessly blend into the banner as if it were one div. For ages I wondered how this was done thinking the z-index property was used but also wondering how to add a link to text on a gif, (only possible using dreamweaver but too much code bloat!).

check my test website to see what I mean about the banner, a clear improvement can be seen as the divs gel together for one seamless design (although its no work of art)....

http://www.tasbih.homechoice.co.uk/liquid/

<u>Fonts</u>

There are millions of websites in the world, but how many have we seen that simply look terrible due to the wrong font being used, or dont scale well if you need to make the text larger say for users with impaired vision? If you really want to get serious about web design especially to meet the standards of the <strong>W3C</strong> i.e. designing sites for companies, then Simon advises on the most ideal fonts for all types of web-sites from corporates to blogs! Remember your visitors may be put off by the font you use and not browse any further on your domain. I know I certainly have. And believe it or not, in America you can be sued for not making your website accessible using these techniques. Its worth thinking about and maybe that legislation may apply over here before long.

<u>Backgrounds</u>

Choosing the right images or colors as backgrounds for a web-page can really make or break your design. We've all seen some hideous ones along the way. But there are other considerations that Simon makes you aware of. Using a nice jpeg as the background may have a huge file size and take ages to download, and even though broadband can be had for the price of dial-up, we seldom have the patience to wait for pages to download. Important questions to ask also is do you really need it when a simple background will suffice? Pro CSS then explains all the pros and cons, and you can have your cake and eat it. By choosing web-safe colours, you give your site a better chance of rendering the same on most computer screens. However if you want to be more adventurous the pitfalls are pointed out. More importantly if you <strong>really</strong> do need to use a jpeg/gif as a background, the book explains how to keep those file sizes to a minimum using your favorite image-editing software such as Adobe Illustrator or Fireworks.

<u>Lists & Navigation</u>

I finished this chapter prior to writing this review & and all the mystery and bedazzlement that I got from trying to understand navigation has gone. Techniques such [inline] to style your list horizontaly, styling an [ol] or an [ul] and then adding styles and classes to those [li]'s and [ul]'s within them are explained clearly. The author also has a download available from the apress website to accompany all chapters including all gifs used in all the examples as well as the final site you'll build towards the end of the book! It also includes all the code and markup so you can copy and paste saving time. What more do you need!

One thing that annoyed me about the other books, is telling you what the css code is for a certain technique but failing to show you how to implement it in the html mark-up. So another brownie point that this book has going for it. The author also has a blog at http://www.collylogic.com - its well worth a read.

So to finalise, this book is 6* because every chapter has proven to be extremely useful and I've 'not' skipped a page, its 400pgs+, and is competitively priced. Im looking forward to learning hacks, forms & liquid/elastic designs in later chapters.

So if you want that smug grin effect when you apply some CSS to HTML markup that works every time, then this book is it. More importantly, You get the feel good factor because you know you're learning, you know why what you've done works and you know it wont be long before you'll have some pretty nifty looking sites up on the world wide web!

So does it deliver? A definite and resounding YES!!.

...goes to Andy Clarke for getting Logan's Run and Battlestar Galactica into a book on Cascading Style Sheets.

The book is divided into two parts with Colly first introducing the reader to the basics of CSS before moving on to an in-depth look at layouts, usability and accessibility enhancements, tips and troubleshooting and the obligatory (great looking) case study. Chapter 1 -- Getting Started soon enters a reasonably meaty discussion on maintaining and organising style sheets that intermediate and even advanced practitioners might also find of interest. We all have our little ways of organising our files and Colly introduces the beginner to multiple directories under that one css folder we normally only ever have (come on admit it!), modular CSS, CSS syntax, commenting and indenting as well as reusing style sheets for other devices. From a teaching perspective it was good to see some best practices being introduced right from the start -- page 9 to be precise. The next chapter looks at IDs and classes, how to use the cascade (or not), grouping, inheritence, contextual selectors and CSS measurements (pixels, percent and ems). Again, a good foundation chapter for beginners here -- too often we see font-family defined for every heading or a class put on every list item when an id on the ul was all that was required. The reader is also informed about grouping similar styles into one rule to achieve nice, compact code. I'm not sure if CSS measurements belonged in chapter 2 but by the end of it a novice would be well-informed on how to organise their style sheets and get the most out of them in as few lines as possible.

After attending Dave Shea's "Typography for the Web" presentation at @media2006 I enjoyed the recap (as it was for me) concerning text offered in chapter 4. Chapters 5 and 6 cover images and lists respectively, chapter 7 covers links -- always, always style a:active and a:focus for keyboard accessibility please - and chapter 8 introduces "HTML Element of the Year 2006": The Definition List. How many times have I used this on projects this year? I've found it to be quite versatile but keep a semantic eye on it also.

The very last chapter of part 1 deals with forms. Lovely, lovely forms. When you've had to apply accessibility retrospectively to about 10 large forms you'll understand my pain. Colly dedicates 30-odd pages to teaching novices how to mark them up and style them. I would have preferred to see things like selected="selected" mentioned for select elements and was disappointed by the accesskeys entry under "Accessibility Aids". Unless user-assigned, accesskeys are a no-no.

Part two is where you really start to roll up your sleeves and have fun. Colly offers some great discussion on floats, clearing and different types of layout before building some basic two and three-column layouts (if you're pushed for time, you can download the code snippets by the way). Chapter 12 covers contextual selectors e.g. using an ID on the body tag to really gain control of your styles on a per-page basis and reveals the secret behind equal height columns (i.e. faux columns). Some further tips and tricks are offered in chapter 15 and then it's on to the finale of the case study.

It's been a great year for people wanting to learn CSS with some really strong titles out there. Add this book to your essential list.

I've just finished this book having read it cover to cover, and will now be going back to work through the examples page by page. I have to say I was extremely impressed - the examples and explanations are well-written and easy to follow. The book assumes a basic knowledge (though provides handy refreshers on basic XTHML for people like myself who are a bit shaky) but takes you step by step up to the stage where you can create and lay out a full web page with CSS, which was exactly what I wanted.

There were one or two occasions where typos in the example descriptions left me a bit confused for a minute or two, and I personally would have liked a section on pop-up menus, but overall this is an excellent book which told me what I needed to know and was enjoyable to read - highly recommended.