Cascading Style Sheets
Note: This tutorial originally written for an earlier version of Dreamweaver. Although some palette names have changed, the information is still valid.
In this section you will learn:
- Cascading Style Sheets basics
- Defining and inserting styles
- Clearing underlines in links
- Style sheet attributes
- Using external style sheets
About building Style Sheet Web Pages
The Cascading Style Sheets system significantly increases the design capabilities you have for your Web site. Here's how it works: the instructions you give on how you want your Web page(s) to look are a set of rules for that page. You are telling Dreamweaver that for this particular site, you want all your text to be green (for instance), but whenever you insert a H1 tag, you want the text to be blue (again, for instance.) You might even specify that you like a particular background color on all your pages (for uniformity sake) and maybe a logo in the background. These rules you establish become your style sheet - which is a collection of the rules you set forth. You make these rules using HTML tags like the Heading <H1> or the Body <BODY> tags, or by using custom tags called selectors. You have defined the selector's properties and these are called a declaration. Dreamweaver will write the code for your instructions. For example, the H1 tag to appear in blue would be written in the Header <HEAD> tag and would look like this:
h1 (color:blue)
Instead of selecting the heading format and changing the color to blue from the Properties Palette each time, you can specify that all of your H1's (the largest heading) will be blue in color. Dreamweaver offers you the ability to make three different kinds of style sheets that allow you to control different aspects of creating a Web page: Internal, Inline and External.
So if CSS are so great, why didn't we learn them earlier?
The biggest problem with using CSS to create your web pages is the ongoing dynamics and competing commercial visions of Netscape and Internet Explorer. Some of the wonderful advantages that CSS and Dynamic HTML (DHTML) gives to the Web page designer will be unintelligible to the viewer using a less than 4.0 browser version. CSS are at the core of DHTML, as it makes traditional HTML more malleable. CSS allow you to specify attributes for HTML tags, and make that change throughout a website. Many Web developers think highly of Style Sheets, yet do not use them as often as you might think. Until there is more consistent support for CSS, you will have to choose your audience carefully. Or, as Dreamweaver allows, create two versions of your Web page - one for those viewing on older browsers, and a second one that will allow you to use the full capabilities of both Cascading Style Sheets and DHTML. CSS begins to control elements on your Web page in a more systematic fashion. The term cascading refers to the capability of a local style to override a general style, as well as the ability to create an external style sheet that can be used to provide an overall look and feel.
The
fourth generation browsers and above support many of the attributes from
the first draft of the Cascading Style Sheets standard. Neither Netscape
Navigator 4.0 nor Microsoft Internet Explore 4.0 full supports CSS Level
1, however. Of the earlier browsers, only IE3 supports a limited set of
the CSS Level 1 features: font attributes, indents, and color. However,
this support is rendered differently in IE3 and IE4. Netscape Navigator
3.0 does not support any of the features. On the bright side, trials of
Netscape Navigator 6.0 appears in almost complete compliance. IE5 is not
as complete, but is better than the 4.x versions.
How styles are applied
CSS applies style formatting to your Web page in one of three ways:
- Via an internal style sheet
- Via an external, linked style sheet
- Via embedded style rules
Internal Style Sheets is a list of all the CSS styles for a page. Although you can place the code for this anywhere on a page, traditionally the commands for a <STYLE> tag are inserted in the <HEAD> tag at the top of the page. If you wanted to create a particular look for your Web page and you didn't want to use the Properties Palette all the time, you would use the CSS Styles window to create and insert coding like this into your <HEAD> tag:
<HTML>
<HEAD>
<TITLE>Dreamweaver I Tutorial</TITLE>
<style type="text/css">
<!--
p { font-family: "Arial, Helvetica, sans-serif"; color: #000000}
.cnote { font:8pt "Arial, Helvetica, sans-serif"; text-transform: uppercase}
h1 { font: bold 18pt Arial, Helvetica, sans-serif; color: #FF0000}
-->
</style>
</HEAD>
Note that the instructions to change the paragraph and h1 tags, as well as the custom tag .cnote all are surrounded by the <style> tags. The HTML comment tags (<!-- and -->) are put around the instructions to prevent older browsers that can't read style sheets from displaying the CSS rules.
External style sheets is a file containing the CSS rules. It links one or more Web pages and changes in the appearance of several web pages can be made on this one document. Two different methods exist for working with an external style sheet, either by the link method or by the import method. Between the link and the import methods, the link method is better supported among browsers.
Embedded rules inserts the style within HTML tags using the style attribute. This method is the most "local" of all the techniques. What this means is that it is closest to the tag it is affecting and therefore has the ultimate control - because of the cascading nature of style sheets.
When you created a layer within Dreamweaver and hit F10 to view the HTML source, you might have noticed that the positioning attribute is a Cascading Style Sheet embedded within a <div> tag.
Creating and Applying a Style Sheet in Dreamweaver
Dreamweaver uses three primary tools to implement CSS: the CSS Styles palette, the Edit Style Sheet dialog box, and the Style definition dialog box. Specifically, you use the CSS Styles palette to apply the styles you created in the Edit Style Sheet dialog box and specified with the Style Definition dialog box. It can get confusing initially in using all of Dreamweaver's controls for creating CSS, let's try a simple exercise to give us an overall understanding of how all the pieces fit together. In last class, Yiyu asked how he could remove the underline from appearing in his links. Using basic HTML and Dreamweaver, the only way would be to create a jpeg or gif of the text and use that instead of the traditional text. He would then have to set his borders to "0" so that no line would appear. However, by using CSS in Dreamweaver, we can easily remove the underline.
Eliminating underlines from links
- Open the CSS Styles palette Windows > CSS Styles or selecting the Show CSS Styles button from either Launcher
- In the CSS Styles palette, select the New Style button. This opens the New Styles dialog box.
- In the New Styles dialog box, select Redefine HTML Tag and choose the anchor tag, a, from the drop-down list. Click OK, and the Style Definition window opens.
- In the Style Definition window, make sure that the correct pane is displayed by selecting Type from the list of categories.
- In the Decoration section of the Type pane, select the none option. You can also make other modifications to the anchor tag style, such as color or font size. Click OK when you are done.
The Style definition window closes, and any style changes instantly take effect on your page. You must hit F12 to preview your page in a browser to see the underline disappear. Any other changes, however, such as color or font size will be seen instantly.
You
can also do this by selecting the Use CSS Selector option and choose a:link
from the dropdown menu. You can even use the a:hover style, which allows
text to change color or style on a rollover. However, you must define
the four CSS Selector styles in a particular order for them to work correctly.
Start by defining the a:link class, and then a:visited, a:active, and
a:hover, in that order. Many designers like to make the link apparent
by styling it bold and in a different color.
About the CSS Styles Palette
The CSS Styles palette has very straightforward command buttons listing all available style items. You can open it in several ways:
- Choose Windows > CSS Styles
- Select the New Style button from either Launcher
- Press F7
In the CSS Styles palette, the Apply To dropdown list shows the current tags available for you to change, as well as Selection, which attaches any defined style to any selected portion of your HTML page. The main window on the CSS Styles palette shows you all the defined custom styles or classes you created, listed in alphabetical order. At the bottom of the palette are three buttons. The first button (that looks like a blank page) is the New Style button and begins the process of defining a new CSS style. The second box, Open Style Sheet, opens an existing style sheet so that you can apply or edit it, as well as opens the multifaceted Edit Style Sheet dialog box that allows you to create a new style, link a style sheet, edit or remove an existing style, or duplicate a style that you can then alter. The final button, the trash can, deletes styles once they are defined.
Defining new styles
Selecting the new button in the Edit Style Sheet dialog box brings up a new dialog box called New Style. In this dialog box, you specify the type of style you're defining, along with its name. Your choices are:
- Make Custom Style (class)
- Redefine HTML tag
- Use CSS Selector
Your first choice in the New Style window, Make Custom Style (class), is the most flexible way to define a style on a page. The first step in creating your custom style will be to name it. Put this under the Name section. The name for your class must start with a period and must be alphanumeric without punctuation or special characters. Use small letters and keep it short and sweet, but descriptive. For example, you might create a style that changes selected text blue. You may name this class, .blue.
The second radio button choice in the New Style window is Redefine HTML tags. This type of style is useful for making quick, global changes to existing Web pages. Essentially, you modify the features of your existing HTML tags. When you select this option, the dropdown list displays over 40 HTML tags in alphabetical order. You select a tag you wish to modify from the dropdown menu and click OK.
The third style type, Use CSS Selector, defines what are known as pseudo-classes and pseudo-elements. A pseudo-class represents dynamic states of a tag that may change under user action, or over time. When you choose the Use CSS Selector, the dropdown menu contains four customization options, which can be categorized as pseudo-classes:
- a:active customizes the style of a link when it is selected by the user
- a:hover customizes the style of a link while the user's mouse is over it
- a:link customizes the style of a link that has not been visited recently
- a:visited customizes the style of a link to a page that has been recently visited.
Note: The a:hover pseudo-class is a CSS Level 2 specification and is currently supported only by Internet Explorer 4.0 and above. Dreamweaver does not preview pseudo-class styles, although they can be previewed through a supported browser.
Styles and Their Attributes
After you've selected a type and name for a new style, or chosen to edit an existing style, the Style Definition dialog box will open. A Category list from which you select a style category is located on the left side of this dialog box. Dreamweaver offers you eight categories of CSS Level 1 styles to help you define your style sheet: Type, Background, Block, Box, Border, List, Positioning and Extensions. You can apply styles from one or all categories. Dreamweaver doesn't preview all the possible CSS attributes. Those attributes are marked with an asterisk in the dialog box. You can, however, preview them in a browser.
| CSS Type Attributes | |
|---|---|
| Type Setting | Description |
| Font | Specify font family, edit the font list |
| Size | Select font size. Use pixels instead of points for greater control in either MAC's or PC's |
| Style | Normal, oblique, or italic |
| Line Height | Known as leading to give distance between text lines |
| Decoration | Options include underline, overline, line-through, blink, and none (which turns off the link underline) |
| Weight | Sets the boldness of the text |
| Variant | Switches between normal and small caps, which is a font style that displays text as uppercase, but the capital letter is slightly larger. The Variant option is not universally supported. |
| Case | Forces a browser to render the text as uppercase, lowercase, or capitalized |
| Color | Sets a color for the selected font |
| CSS Background Attributes | |
|---|---|
| Background Setting | Description |
| Background Color | Sets the background color for a particular style. You can also set background colors for individual paragraphs or other elements. |
| Background Image | Specify a background image |
| Repeat | Determines the tiling options for a graphic: |
| no repeat displays the image in the upper-left corner of the applied style | |
| repeat tiles the background image horizontally and vertically across the applied style | |
| repeat-x tiles the background image horizontally across the applied style | |
| repeat-y tiles the background image vertically down the applied style | |
| Attachment | Determines whether the background image remains fixed or scrolls with the page |
| Horizontal Position | Controls the positioning of the background image in relation to the style sheet elements (text or graphics) along the horizontal axis |
| Vertical Position | Controls the positioning of the background image in relation to the style sheet elements (text or graphics) along the vertical axis |
We will review the other style attributes briefly in class, but the above two tables illustrate the attributes of the two most frequently used style options.
Linking to an External Style Sheet
The external style sheet is an essential tool in the Web designer's toolbox. An external style sheet can assist you in making changes throughout a web site very quickly. To link to a separate style sheet, follow these steps:
- Open the CSS Styles palette
- Select the New Style button
- In the Edit Style dialog box, select the Link option
- The Link External Style Sheet dialog box appears. Here you can access all your style sheets previously created by either browsing or typing the File/URL path.
- If you have not previously created a style sheet, you can locate the place you want the style sheet and then creating a name for it.
- Choose either the Link or the Import radio button. The Link method is more fully supported in browsers.
When you go back to the Edit Style Sheet dialog box, you see a link file referenced in the listing above all the styles. You can double-click the linked file to open a new Edit Style Sheet dialog box for your linked style sheet file. The defined styles with the linked style sheet then appears in the CSS Styles palette.
If you've already defined styles in the current document and you want to convert them to an external style sheet, choose File > Export > Export CSS Styles and enter a filename in the Export Styles as CSS File dialog box. You can also export internal styles to an external style sheet by pressing Ctrl or Command while clicking the Done button in the Edit Style Sheet dialog box.
~ peace, polka and piwo