Lesson 4. Developing Style Sheets

Cascading Style Sheets (CSS) enable you to define how a variety of elements, such as text and images, display on your Web pages. The term cascading refers to the ordered sequence and precedence of styles. A style is a group of formatting attributes, identified by a single name, which tells the browser how to display an element. CSS styles in HTML documents give you a great deal of control over formatting, appearance, and layout. The advantage of using styles is that when you make a change to an attribute of the

In this lesson, you will use CSS to apply a variety of format options to text using the three types of styles provided in Dreamweaver: class styles, tag styles, and advanced custom styles.

style, all the elements controlled by that style are automatically updatedin a single document or site-wide, depending on how you created the style. Adjustments can be made on a wide variety of settings, ranging from standard attributessuch as font, size, and color of textto advanced attributes available only through CSSsuch as the space between lines of text (leading, also known as line height).

Using style sheets, you can, for example, create a paragraph with a half-inch margin, 20 points between the lines, and the text displayed in a 12-point font. This would not be possible without the use of CSS, which is supported by 4.0 or later browsers. Earlier browsers ignored CSS, although Internet Explorer 3.0 recognized some style attributes. The best results are achieved with 5.0 and higher browsers, which support a wider range of features.

You can use an internal styleone that is stored inside the documentwhen you need to format a single page. You can use an external style sheetone that is stored outside of the Web page and linked by the current pagewhen you need to control the appearance of several documents at once to keep the same style of text formatting on multiple pages. In such cases, it is ideal to keep the treatments of text and page layout consistent throughout your site because drastic changes in appearance might give viewers the impression that they have landed on another site.

Another advantage to using style sheets is the ability to keep the content of your Web pages separate from the formatting. Ultimately, this means that you have more precise control over the appearance of your content. Inserting content into your Website will become a quicker and less-complicated process as a result. Isolating the content in this manner makes the process of updating and maintaining the site far simpler. Controlling the formatting of Web pages through style sheets allows you to create pages that are more compatible across different platforms and browsers.

In this lesson, you'll learn to create basic style sheets with styles that affect the appearance of text. In the process, you'll learn about the properties of CSS and gain an understanding of how it works. You'll then apply this understanding by creating a basic CSS-based layout. Throughout the rest of the lessons in this book, you'll continue to build on these skills by learning additional CSS techniques, applying styles to elements other than text, such as graphics in Lesson 5.

To see examples of the finished pages for this lesson, open index.html and sangha.css from the Lesson_04_CSS/Completed folder and index.html from the Lesson_04_CSS/Completed/about folder.