Formatting Web Pages Using Cascading Style Sheets
This chapter is from the book
This chapter is from the book
This chapter is from the book
What You'll Learn in This Hour
- How to create each of the three style types: classes, redefined HTML tags, and advanced styles
- How to apply styles to elements in a web page
- How to create an external style sheet for an entire website
- How styles deal with conflicting and inherited properties
The Cascading Style Sheets (CSS) standard enables you to apply a property or group of properties to an object by applying a style to that object. You define and apply styles in Dreamweaver's CSS Styles panel or in the Page Properties dialog box, as you did in Hour 4, "Dealing with Words: Adding Text and Lists." When thinking about styles, you usually think of creating and applying styles to text, which certainly is possible. However, you can use styles for positioning objects, creating borders, and lots more.
Modern Web standards require the separation of the presentation of a web page (the way the page is displayed visually) from the content (the words and images that make up the page). Dreamweaver creates CSS styles to control the presentation of the HTML content. Separating the content from the presentation paves the way to supporting various operating systems, browsers, and devices; this also enables screen readers to easily navigate through web pages for people who are visually impaired.
One of the benefits of using styles is the ability to simultaneously update multiple objects that have the style applied to them. If you create a style for all the paragraph text on the page, say a style defined as Arial 14-pixel text, you can later change the style's font to Times Roman, and all the paragraph text will instantly appear in the new font. You don't have to search through your entire page for updates but can simply make a change in one spot.
CSS is defined by the World Wide Web Consortium's (W3C) CSS specification (get more information at www.w3.org/Style/CSS). Your viewers must have a modern browser version to view styles and, luckily, most users of the Web do. Current browser statistics say that almost 98% of browsers are modern versions; that is, versions later than 4.0 (check out www.w3schools.com/browsers/browsers_stats.asp).
Dreamweaver displays a preview of how most styles will look in the browser. There are three types of CSS rules, also called CSS styles, and during this hour you will learn how to create styles that use all three. This hour covers the basics of CSS styles, how to use the CSS Styles panel, and how to create styles that apply to text. A subset of CSS deals with creating web page layouts, called CSS-Positioning or CSS-P. Hour 13, "Using CSS for Positioning," will show you how to lay out your web pages. Then Hour 14, "Creating CSS for Mobile Devices and Printing," goes into more detail about using CSS to deliver content in various formats.
Styling Text with CSS
In Hour 4, we explored modifying text and introduced you to CSS styles, the CSS that are created automatically by Dreamweaver when you modify text attributes in Dreamweaver's Property inspector. The best way to create text styles for a website is to actually plan and think about what types of presentation will commonly be used in the website. After planning these styles, you can implement them and apply them to the web pages in your site. Using the Property inspector isn't the best or most professional way to style text.
The CSS Styles panel lists styles that have been defined and are ready to be applied to objects on your web page. You'll use this panel extensively when creating new styles in Dreamweaver. This is where you'll find the buttons used to create new styles and where the style attributes of the styles will display.
Figure 6.1 shows the CSS Styles panel in its two different modes. When you click the All button, the CSS Styles panel displays a list of all the styles available. Selecting one of the styles in the list at the top of the panel displays that style's attributes in the bottom of the panel.
)
Figure 6.1 The CSS Styles panel is the command center for creating and viewing the attributes of styles.
When the Current button is clicked, as shown in Figure 6.2, the CSS Styles panel displays the attributes applied to whatever might be currently selected in Dreamweaver's Document window. This view of the CSS Styles panel lists properties specific to one element instead of listing all the styles available in the web page.
)
Figure 6.2 The CSS Styles panel displays the properties applied to the currently selected object on the screen when the Current button is selected.
Dreamweaver creates the CSS for you and displays it in the CSS Styles panel (and, of course, writes it in the code but we'll get to more of that in Hour 7, "Looking Under the Hood: Exploring HTML"). It's helpful to know a little bit about how the code behind CSS works. You saw a list of attributes in Figure 6.1, but what do they mean? A few definitions and an example should help you understand.
CSS styles are made up of rules. A rule contains two parts: a selector and a declaration. Here is an example:
h1 {font-size: 200%;}
In this sample CSS rule, the selector is h1. This rule modifies the h1 (heading 1) tag and is a type of selector called an element selector that you'll explore in more depth later in this hour. The declaration is the part of the rule contained in curly brackets ({ }). The declaration in this rule sets the font-size property to 200%. This is the way all of the attributes that you saw displayed in the CSS Styles panel are defined.
There are three basic types of selectors used to define CSS styles:
- class—A type of selector that begins with a period (.) and can be applied to any element in a web page via the class attribute. For instance, the class named .green would modify these elements: <p class="green"> and <hr class="green">.
- element—In CSS, this is a redefined HTML tag.
- id—A type of selector that begins with a pound sign (#) and is applied by giving an element an id attribute with the same name as the id selector. For instance, the id selector named #mushroom would modify this element: <div id="mushroom">. An id selector can be applied only once per web page.
You can create each of the three different types of selectors with Dreamweaver. When you click the New CSS Rule button (shown in Figure 6.2) in the CSS Styles panel, it opens the New CSS Rule dialog box, shown in Figure 6.3. Prior to defining the properties of a new style, you have to assign it one of these types.
)
Figure 6.3 You select which of the three types of styles you are defining in the New CSS Rule dialog box.
In the New CSS Rule dialog box, you use the following radio button choices for the three basic selector types listed earlier:
- class—This one is easy! You use the Class (can apply to any tag) selector type choice.
- element—To create an element selector, use the Tag (redefines the look of a specific tag) selector type choice.
- id—To create an id selector, use the Advanced (IDs, pseudo-class selectors) selector type choice.
The rest of this hour introduces you to creating class and element selectors. You'll explore creating id selectors in Hour 13 when you learn about using CSS for page layout.