Section 80. Using CSS in GoLive


#80. Using CSS in GoLive

Much like character, paragraph, and object styles in InDesign make it effortless to change formatting of elements across an entire document, cascading stylesheets (CSS) allow you to make sweeping changes to text formatting and other properties across an entire site. But as with element styles in InDesign, it takes a little bit of foresight and discipline to realize the flexibility and nimbleness that using CSS affords.

Descendant Selectors

You can specify a style for a particular element on a page just by referring to its relative tags above it in the HTML hierarchy. These are referred to as descendant selectors. For example, it's possible to create a style that pertains only to P tags that exist in a DIV tag with the ID of "sidebar" by creating a descendant selector like: #sidebar p {color: #333}. Once you get a handle on descendant selectors, you'll realize that you can further minimize the amount of additional classes and IDs in your CSS. Visit the W3C (www.w3c.org) to learn more about descendant selectors.


For the ultimately flexibility within your site, every significant element should have some way to specify it in a style. This doesn't necessarily mean you need to create a slew of classes for each type of element found in your site. It just means you should have a way to style the element via the different kinds of selectors. Heavily peppering your site with inline styles not only makes it difficult to maintain a level of consistency but also makes it next to impossible to change these styles.

Here are a few pointers when using CSS to allow for the most flexibility for changes down the line and minimize the amount of additional code:

  • Create markup styles (HTML selectors) before resorting to classes and IDs. Build your Web pages using semantically correct HTML tags (<p> tags for paragraphs, etc.) and style them however you want (see #55). Then use class (.) and ID (#) selectors for special formatting needed within the markup styles.

  • Move your internal styles to an external stylesheet when appropriate. This prevents you from leaving inconsistent formatting in pages that you can't affect globally. You can export an internal stylesheet to an external stylesheet using the CSS Editor pop-up menu (Figure 80).

    Figure 80. You can effortlessly export an internal stylesheet to an external one by using the Export Internal CSS command in the CSS Editor pop-up menu.

  • Take advantage of external stylesheets. Not only do external stylesheets provide a means to centralize and manage all your styles in one location for quick editing, but they're beneficial to visitors of your sites as well. Browsers typically cache an external stylesheet, so they don't have to load the styles again when other pages are visited within your site.

  • Use CSS layouts and layers. GoLive's CSS layout objects and CSS-based layers make it easy to design visually with CSS (see #53). CSS usually results in leaner code than older table-based techniques and offers you greater flexibility and options in terms of formatting and positioning.




Adobe Creative Suite 2 How-Tos(c) 100 Essential Techniques
Adobe Creative Suite 2 How-Tos: 100 Essential Techniques
ISBN: 0321356748
EAN: 2147483647
Year: 2005
Pages: 143

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net