ONLINEPDFPROOFING.COM

proofing tools 2008 - www.onlinepdfproofing.com

Menu


Dorknozzle site consists of three hundred pages and you need to change the font from Arial to Verdana and from a black color to gray throughout


the site. You can imagine how frustrating it would be to open every single one of those three hundred files and manually change every place you had applied a font to a section of text. At its foundation, CSS solves this dilemma. With CSS, you can create one file (styles.css) and apply the style rules in that CSS file to dictate how the text in your website should look. If the time ever comes to change the font properties, you do it in that one CSS file, and your changes appear throughout the entire site. But how does this work? Style sheets are usually contained in an external CSS file (but they don't have to be) and are linked in to every web page you are working with using the <link> tag within the <head> tag of your document. Therefore, any and all styles from that CSS file can be applied to the web pages you are working with, ultimately providing you with the flexibility to quickly and easily modify one CSS file that propagates changes to all the web pages that share the CSS file. I've mentioned one way of creating style sheets (external CSS file), but there are, in fact, three different ways of creating them: External file: Arguably the most popular and time-efficient way to create style sheets is using an external CSS file. By creating an external style sheet file, you can link this file to any and all your web pages using the <link> tag and placing it within the <head> tag of your web pages. Later, when the time comes to make changes, you make modifications to the one CSS file, and all the pages of your website change accordingly. Document wide: Another efficient way to create styles is by simply adding them straight to your web page using the <style> tag and placing it within the <head> tag of your page. Using a document-wide style sheet doesn't afford a global repository for styles in your site, but it does allow you to create styles that can be used throughout the page. Inline: Inline styles allow for quick and dirty additions of styles within a tag. An example of an inline style could look similar to this: <input type="text" style="border-style:groove" />   This code effectively adds a border to a form element on your web page. An excellent example of inline styles in use in Dreamweaver is layers. When Dreamweaver adds a layer to the page, it simply adds a <div> tag, with an ID and an inline style to control the positioning aspects of the <div> tag. You'll see this with more detail in Chapter 11, "Working with Layers in Dreamweaver." Now that you have an idea about how style sheets can be created, let's take a look at how styles are defined in style sheets. A Cascading Style Sheet, or a CSS, file consists of numerous parts working together to form rules that enhance the look of your web pages. These rules can consist of font properties, positioning properties, border properties, and more. Figure 7.1 shows what a typical CSS file can look like. Figure 7.1. A typical CSS file.   A typical CSS file contains selectors, declaration blocks, properties, and values, all organized to form rules. These rules are typically structured in an external file or document-wide <style> tag to form a style sheet. NOTE Throughout this book, I use the terms CSS, Cascading Style Sheets, style sheets, and styles. Don't be confused by the different terms because they are all synonymous.   In detail, there are four ways of defining styles in Dreamweaver: Classes: Arguably the most popular way of defining styles in a style sheet, classes allow you to set up a custom style and use the class name as an