Cascading Style Sheets Overview

By using CSS to control your fonts, you can ensure greater consistency in the appearance and layout of your pages in multiple browsers. Some of the many text properties that CSS lets you control include font family and size, text and background color, text formatting, and link color.

Using CSS, you can also position, add color to, float text around, and set margins and borders for block-level elements. A block-level element is a standalone piece of content that's visually formatted as a block. For example, content blocks (which are equivalent to p tags) and panels (which are the same as div tags) are both block-level elements.

Site.com supports CSS3, which is the latest specification for CSS.

About Inline Styles Versus Style Sheets

In Site.com Studio, you can:

• Apply styles directly to a selected page or page element using the Inline option in the Style pane (). Inline styles apply only to the selected item.
• Add style items such as CSS classes or IDs to a style sheet, and apply the style items to the selected page or page element. This approach separates the content (your web pages) from the presentation (the style sheet).

If you're not familiar with CSS, the inline option is probably the easiest to use and understand. However, inline styles lose many of the advantages of style sheets because they mix content with presentation—the inline style is only applied to that individual element. If you need to update the style of your site, you have to update the style properties of every affected page and page element.

By contrast, although style sheets can be more difficult to understand at first, they enable you to make site-wide changes from one convenient location. When you update a style item in your style sheet, it immediately updates the style of every page or page element that uses it.

It's worth taking the time to become familiar with CSS because it:

• Saves you time and effort when building and designing your site
• Produces cleaner, more consistent site designs
• Simplifies navigation for people with accessibility issues (such as site visitors using screen readers)

For more information about using CSS and creating style sheets, go to the World Wide Web Consortium (W3C) at www.w3.org/Style/CSS. There are also many tutorials available on the Internet that provide in-depth CSS training.

About CSS Classes and IDs

When you use style sheets to style your site, you can redefine the formatting of HTML tags such as body or h1. You can also create CSS classes and IDs to define the style of particular elements, such as headers or repeating content. A CSS class lets you define and apply style properties to many elements on a page, whereas a CSS ID is ideal for targeting a single item on a page. For example, in a page's structure, IDs are often used to define the header and footer areas, as each page has only one header or footer, but classes are used to define repeating page elements, such as a blog post.

Best Practices

• Include a CSS reset in your style sheet to reset all style items to a baseline value. A CSS reset helps avoid cross-browser differences due to their built-in default style settings.
• Use CSS classes and IDs instead of inline styles wherever possible. CSS classes and IDs promote the separation of presentation and content, and makes it easier to update the site's styles.
• Use IDs when there is only one occurrence per page. When you've used the ID, you can't use it again on that page. Use classes when there are one or more occurrences per page.
• Use groups to organize your CSS logically and make it easier to maintain your style sheet.
• If you're using CSS3, ensure you preview and test your site in each browser that you want it to support, because some browsers haven't yet fully implemented CSS3 features.