Chapter 7: Using Styles to Gussy Up Your Content

Overview

In earlier chapters in this book, we introduce you to some of the ways Expression Web uses styles to format elements on your page. In this chapter, we cover styles in depth-how to work with the styles that Expression Web writes into your site's code and how to build your own styles. We also guide you through the basics of using Cascading Style Sheets and introduce you to the Expression Web style tools. Understanding how CSS works requires grappling with a bit of code, but after you get comfortable with the CSS big picture, you find out just how powerful and handy the Expression Web CSS tools really are.

Tip 

The first several sections of this chapter cover the fundamentals of CSS: style sheets and how they cascade and style rules and how they work. If you're already CSS savvy and want to get right to using styles in Expression Web, you may want to skim the first part of this chapter and read the parts that aren't familiar. If you're a CSS newbie, however, we suggest that you read the entire chapter. And, if you're new to HTML, be sure to read through the first section in Chapter 14, in which we cover the basic HTML concepts you need to know to combine CSS with HTML.

Don't be surprised if you don't "get" CSS right away. This intermediate-level stuff takes time and practice to master. CSS is central to good Web design, which is why we encourage you, when you're ready, to take a deep breath and dive right in.

Miles of styles

Last time we checked our local technical bookstore, no fewer than five bookshelves were devoted to Cascading Styles Sheets. And Web sites abound that explain particular techniques for elegantly styling page elements with CSS-not to mention entire conferences dedicated to the meeting and brain melding of CSS masterminds. In this chapter, we introduce you to the basic concepts of CSS and show you how to work with styles in Expression Web, but we can't begin to do justice to this huge topic. Fortunately, you can find oodles of resources for getting the most from CSS, ranging from beginning-level tutorials to the nitpicky details of positioning page elements by using some of the more baffling CSS properties. Here are a few suggestions to get you started:

• CSS Web Design For Dummies, by Richard Mansfield (Wiley): Covers the basics and not-so-basics with Dummies-style wit and illumination.

• HTML 4 For Dummies, 5th Edition, by Ed Tittel and Mary Burmeister (Wiley): Explains HTML, XHTML, and CSS and how they work together.

• Several CSS reference books explain every single CSS property, such as CSS Pocket Reference, 2nd Edition (O'Reilly Media, Inc.). Do some browsing and pick the one you like the most. Be sure to choose a book with a recent publication date, to ensure that it includes the latest changes to CSS.

If you prefer to let your computer do the walking, check out these online CSS tutorials:

• W3 Schools at http://www.w3schools.com/css offers basic CSS tutorials with online tests that introduce CSS concepts little by little.

• An excellent in-depth CSS tutorial that goes beyond the basics is at http://www.westciv.com/style_master/house/tutorials/index.html.

• Max Design at http://www.css.maxdesign.com.au/ offers tutorials on particular topics, such as Selectutorial, Floatutorial, and Listamatic. Their site contains a plethora of useful and informative articles by leading CSS experts.

• The Web Design Group's quick tutorials cover a wide range of CSS topics in short, accessible chunks at http://www.htmlhelp.com/reference/css.