Videos for this class
There are five videos related to this lesson. Be sure to look at these videos as part of doing this lesson.
The concept of inheritance
CSS rules can be applied to more than one tag through inheritance. This is demonstrated in the video Inheritance and Precedence in Style Sheets.
In the style sheet shown to the left, there are properties for font-size, font-family, and font-color for several rules that are the same. This is not really an error in coding, but where there is no difference (like in the same properties for the body and paragraph tags), the rule is not necessary. A paragraph is a subfeature in the body, and font traits can be inherited, so having the rule for paragraph is not necessary in this case. However, if I wanted to add a property for margins in the paragraph, that particular property would be needed.
Although the above style sheet is not wrong, if I wanted to change the font family for the document, I would have to change the property in several rules. Thus, it is less work for you to only create rules for items that have different properties or when the property cannot be inherited. We will look at an online reference tool called O'Reilly CSS Reference in Part 3 which will tell if you a property can be inherited or not. Font can be. Margin cannot be (as one example).
This style sheet is taking advantage of the inheritance feature. The font color and font family from the body rule will apply to the other rules, unless the browser finds another font color value or font family value in another rule.
It is not a mistake to "ignore" the inheritance feature, but it can result in more work for you if you need to edit the rules later.
The concept of precedence
The concept of precedence is the idea behind the expression Cascading Style Sheet--specifically the concept of cascading. Cascading describes the capability of a local style to override a general style. If you have a single internal or external style sheet that you have created using the Style Definition dialog box, it is doubtful you will have any rules which conflict with each other. Basically, formatting instructions used by browsers when interpreting a page follow this order: browser, external style sheet, internal style sheet, inline styles, and local HTML coding. Or in other words, a formatting instruction (a rule) that is closest to the element (such as text) will be followed by the browser when displaying the page.
If I have an external style sheet that is giving a font family for the body, and I have an internal style sheet that gives a rule for a <li> item (items used in ordered and unordered lists) for a text style of italic, there is no conflict between the external style sheet and the internal style sheet. But if the internal style sheet added a property of Times Roman for the font-family for a <li> item. then (in most cases) the internal style takes precedence over the external.
There is a special property called important that can be added to a rule that tells a browser which property or value is more important, if multiple options appear in the rules. However, since this is not found in the Style Definition dialog box or the regular Dreamweaver menus, we are not covering it here. You may find it in style sheets that are manually created by others, and you can find more information on this on the W3C site at www.w3.org/TR/REC-CSS2/cascade.html#important-rules
The other issue related to precedence has to do with the positioning of conflicting rules, as is shown in the video Inheritance and Precedence in Style Sheets.
In the CSS Styles panel shown to the right, there are two style sheets being used. Listed first is the internal style sheet and then there is an external style sheet. Although the first style sheet has a rule for h2 and h3 tags (including colors for the font), the browser would then find the code for the external style sheet, so it would use the hexidecimal code for the font color of #304020 for the h2 and h3 tags (if found). Although there are two rules for p (paragraph), the properties do not conflict with each other, so both of these would be used for paragraphs in the document.
In the CSS Styles panel to the right, the color of #1d46fa would be used for h2 and h3 tags, since the properties for the last rule would be followed by the browser.
This shows some of the problems of using both an external and internal style sheet in the same document. You can use both as long as you are careful about avoiding conflicting rules.
In the video, I was able to change the order of the rules by opening up the code display, cutting the code referencing the link to the external style sheet, and then pasting that code above (or before) in the internal style sheet coding in the <head> area of the document.
Inline style
The video Inheritance and Precedence in Style Sheets also shows an example of an inline style. As the name implies, the style "coding" is in the line in the document where it is to take effect.
In the screen capture to the left, there is an inline style code for a particular <li> item in the document. The code is making the font smaller and using a style of italic. However, this style only effects THIS OCCURRENCE of the <li> item. As you can see in the document display, the next <li> item goes back to other settings (in this case it is inheriting properties from the <body> tag). So an inline style only affects that particular element.
It is doubtful you will use inline styles very often, because the coding has to be hand-typed in. You cannot create an inline style through the Style Definition dialog box, nor can it be created through the Properties panel. If you select text traits in the Properties panel, Dreamweaver will create an internal class selector for that area, which is not the same.
You will also not want to use inline styles very much, if at all, because changes to them have to be done by searching for the code. Inline styles will not appear in the CSS Styles panel, even though they may be used many times in a document. The CSS Styles panel only shows rules. An inline style follows the syntax of styles set up by the W3C, but it is not a rule.
Categories in the Style Definition dialog box
The Style Definition dialog box makes it much easier to create rules with correct syntax for properties and values that follow the W3C Style guidelines (much easier than hand-coding the rules, that is for sure). The more you work with the Style Definition dialog box and the 8 categories, the more you will see which ones you can use in your own work. However, keep in mind that the grouping into categories is a creation of Macromedia. In the W3C website, you won't see these categories listed.
Some of the properties for categories were demonstrated in the video Things You Might Have Wanted to Do -- Now You Can and more options are shown in the video Some Other Examples of Properties and Values for Selectors. I encourage you to use these videos to give you ideas and to explore various settings on some of your own documents, or the sampletext.html document from the sample files. This document has no styles associated with it.
The Type category
The Type category affects the appearance and layout of the typeface. It is the most widely used and the best supported category--it can be rendered in Internet Explorer 3.0 and above and Navigator 4.0 and above.
Under decoration, don't use blink even though it is listed, since it is only supported in Netscape 4.0 and earlier. And think carefully about using underline since most users still associate underlined text with a link when quickly looking at a page.
| Option | Function |
| Font | Specifies the font style or font family from the Font pull-down list. If your desired font is not listed, you can edit the list of available fonts (through the Properties panel) but be careful about referencing only a SINGLE font, since users may not have that font on their computer. See the video on adding fonts at vas.calsvideo.arizona.edu/camtasia/dreamweaver-ver2004/addingfonts.html.. |
| Size | Specifies a size and unit of measurement for the specified font by using the Size pull-down list or entering a value manually. See comments below about measurements (not only here for text but for other properties). |
| Weight | Specifies the weight, or boldness, of text by either selecting predetermined settings from the Weight pull-down list or entering a value manually. The weight of normal text is 400 and the weight of bold text is generally 700. |
| Style | Specifies text attributes: normal, oblique, or italic. |
| Variant | Applies smallcaps to text, displaying all letters in uppercase with capital letters appearing larger in size. |
| Line height | Specifies the height of the line, or leading, and
its system of measurement. To maintain sufficient whitespace between lines, line height is usually set a couple of points higher than the font size. To have lines of text overlap, you can set the line height a couple of points lower than the font size. |
| Case | Specifies text case: uppercase, lowercase, or capitalized. |
| Color | Specifies text color: by color name, value, or selecting a color swatch from the color palette. |
| Decoration | Specifies text decoration by checking any or all of the available categories: overline, underline, line-through, blink, or none. |
A comment about measurements used in font sizes and elsewhere (like in margins) seems appropriate here. Through the Properties panel, initially, you only have a certain number of font sizes available. Even if you use the Style Definition dialog box, initially the font sizes are shown as pixels. However, from the drop down listing you can pick pixels, point, ems, inches, centimeters, millimeters, and percentage. Pixels and percentage (which is the percentage of the base font in the document, whatever you set that at) are the most common. Ems are based on the size of the current font (base font), as set by the style sheet or the user's browser preferences. If the font is 14-pixels Arial, a measurement of 2 ems equals 2 times 14 pixels, or 28 pixels. Units based on a fixed physical size such as pixels, points, inches, or centimeters are absolute units. These are most useful if you know the exact dimensions of the output devide. Percentages and ems are relative units which adjust to the user's desired preferences, which is useful for users with disabilities. In general relative units are more accessible but absolute units are easier for designers to work with.
The Background category
While the traditional HTML background image is restricted to a single image for the entire document, CSS backgrounds can be specified for a single paragraph or for any relevant CSS selector. The background image is applied to the <body> tag. An important addition through CSS is the ability to stop a background image from repeating, as demonstrated in the video Things You Might Have Wanted to Do. The video Some Other Examples of Properties and Values for Selectors shows how a background image can be repeated only across the page (or down the page).
| Option | Function |
| Background color | Specify the background color by entering the color name or value, or by choosing a color swatch from the color palette. |
| Background image | Specify a background image from the Background image pull-down list or click on the BROWSE button to select one. |
| Repeat |
Specify the tiling options for a background image of repeat, no-repeat, repeat-x (to repeat horizontally across the page), or repeat-y (to repeat vertically down the page). |
| Attachment | Specify whether the background image remains anchored in its original position or scrolls with the page. |
| Horizontal position | Position the background image horizontally in relation to style sheet text or graphics. |
| Vertical position | Position the background image vertically in relation to style sheet text or graphics. |
I have recently taken some classes dealing with style sheets, and wanted to pass along a point made by the instructor. Anytime you change the font's color, in a rule you are creating or modifying, you need to restate the background color for that rule. In some cases, this might be giving the background color as transparent.
The Block category
The options for word spacing and letter spacing might be useful, depending on your audiences and the size of the text you are using, Take the document sampletext.html which has no styles and try using a word spacing of 5 pixels or 1.1 em. Then remove this setting and make letter spacing 2 pixels. You have to view the page through your browser to see the effect.
| Option | Function |
| Word spacing | Specifies the spacing between words by selecting a negative or positive value from the Word spacing pull-down list. |
| Letter spacing | Specifies the spacing between the letters of a word by using positive or negative values to increase or decrease the spacing. |
| Vertical alignment | Specifies the vertical alignment of text within the specific style. As shown in the video Some Other Examples of Properties and Values for Selectors, this is how you could create sub and superscript text. |
| Text align | Specifies text alignment by choosing left, right, center, or justified. |
| Text indent | Specify how far out from the margin you want the text to appear. This is the option used to indent the first line of a paragraph. |
| Whitespace | Specify the appearance of extra spaces and tabs. By default, they are usually collapsed. Select pre to preserve all whitespace and nowrap to wrap text when a <br> tag is present. |
| Display | Specifies how a tag is represented by selecting an option from the Display pull-down list. However, only a few of these are supported by even the latest browsers. |
The Box category
As is shown in some of the videos, including the Some Other Examples video for this lesson, this category can be used to add a box (with a background color) around headers or selected text. A box does not have to have a background color, but when first exploring this category, it can help to add a color just to see what the area looks like.
It is important to understand the differences between padding and margin. Padding is talking about spacing within the element itself, as shown in the videos where I created an .emphasis tag. The margin is talking about the space between the border (whether or not the border is displayed) of an element and other elements on the page. The Box category and then the margin option is used to reduce spacing between paragraphs or to increase spacing between bulleted or numbered lists, as examples. But margins of other elements next to the element being modified can result in unexpected effects. For example, header tags have spacing around the element, so even though you might make the top margin of a paragraph 0, a header above it will still show space between that header and the paragraph, unless the header's bottom margin were also changed.
You might use the Box category for the <img> tag in a document, if you wanted similar padding around all images in your document, or even if all the images had the same width and height. But it can also be applied to tag selectors (such as <li>, <h1>, or <p>) as well as class selectors you might create for parts of your document.
| Option | Function |
| Width | Specifies the element's width. |
| Height | Specifies the element's height. |
| Float | Specifies the element's placement in the right or left margin. Any text that encounters the element wraps around it. |
| Clear | Keeps a layer from appearing on one selected side of an element. (Note: layers are used in documents for placing items on a page, when a table structure is not used.) |
| Padding | Controls the amount of space separating the element and the border or margin by designating padding values for the top, right, bottom, and left or by choosing Same for all. |
| Margin | Controls the amount of space between the borders of the element and other elements on the page by designating values for the top, right, bottom, and left or by choosing Same for all. |
The Border category
You can use this category for borders for text, images, and other elements (like headers). As shown in the videos, you do not have to have a border on all sides of an element, and you can use different colors for different edges.
Explore some of the different styles of borders, such as dotted, dashed, grove, ridge, inset, and outset. Not all border styles are supported by all browsers.
| Option | Function |
|
Style |
Select a border style from the following options: none, dotted, dashed, solid, double, groove, ridge, inset, and outset. |
| Width | Select a thin, medium, or thick border width, or (value) where you enter a specific value in the Width text box. |
| Color | Determine the border color by entering the color name or value or by choosing a color swatch from the color picker. |
The List category
The video Some Other Examples of Properties and Values for Selectors demonstrates using your own graphic for a bullet in numbered or ordered lists. The screen capture to the left shows use of a red-dot image, which you have in the sample files. Obviously, the image used for a bullet would need to be small in terms of its dimensions.
| Option | Function |
| Type | Select the design type for bullets from the following pre-existing options: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, or none. |
|
Bullet image |
Specify a custom bullet image by browsing to select an image |
| Position | Specify whether the list item is positioned inside or outside the margin (for the list) |
The Positioning category
This category lets you control where an element is placed on a page. This category is often applied to div tags to create page layouts without using tables. We will look at this feature some in Part 3..
Depending on what type of element you are trying to modify, you might only want to give a specific width and let the browser adjust the height depending on content, or give a specific height and let the browser adjust the width depending on content.
| Option | Function |
| Type |
Select the element's positioning from the following options:
|
| Visibility | Select whether an element is inherit, visible, or hidden on the web page. |
| Width | Specify the width of an element and unit of measurement. |
| Z-Index | Determine the depth of an element (higher values are closer to the top). |
| Height | Specify the height of an element and unit of measurement. |
| Overflow | Specify how the element is displayed when part of it extends beyond the allotted space. You can make the item visible, hidden, or scroll (viewable with scroll bars). |
| Placement | Specify the placement and dimensions of an element. |
| Clip | Specify the visible portions of an element. |
The Exensions category
Specifications for Cascading Style Sheets are evolving. New standards are being added by the W3C. This category is a grouping from Macromedia of "cutting edge" features and as a group
these options are the least supported.
We will look in Part 3 about how you can find out which features/options are supported or not by different browsers.
The screen capture shown above is a rule that I created for a h3 tag that tells the browser to do a page break when printing the document, when if finds a h3 tag in the document. This would start each "section" of a longer document on a new page, with the h3 tag at the top, if that is important to you.
| Option | Function | Minimum support |
| Page break | Insert before and after points for printers to read a page break. | Internet Explorer 5.0 or above |
| Cursor | Specify the cursor type appearing when the mouse moves over a certain element. | Internet Explorer 4.0 or above Netscape 6 or above |
| Filter | Customize the appearance of an element without using animation or outside graphic programs. | Internet Explorer 4.0 or above |
Descendant selectors
In the video Components of Style Sheets, I indicated there are three broad types of selectors which you could start using, even as a beginner creator of style sheets. Initially tag selectors and class selectors are commonly created, but you might also want to use ID selectors especially for defining parts of a page, like a header, footer, or navigation area. You will see some examples of this in Part 3. There is also a descendant selector which defines selectors based on where a given tag appears within the page. For example, you could have selected traits associated with <li> items and other traits associated with <strong> within a <li> element.
li {
font-size: 90%;
color: #000000;
background-color: #ffffff;
}
li strong {
font-size: 100%;
color: #ff0000;
background-color: #ffffff;
}
Yet another example would be you could have traits associated with links in the main body of your document and have different traits associated with links located in a "navigation" section of the page. Here the navigation area has a ID tag called #navigationarea.
a:link {
text-decoration: underline;
color: #e06951;
background-color: #ffffff;
font-weight: 600;
}
#nagivationarea a:link {
display: block;
padding: 0.66em;
text-decoration: none;
font-weight: 600;
border-top: 2px solid #e06951;
border-right: 2px solid #e06951;
border-bottom: 2px solid #e06951;
border-left: 7px solid #e06951;
margin-bottom: 4px;
color: #e06951;
background-color: #FFA8A8;
}
Looking at pages through a browser
The design mode in the 2004 release of Dreamweaver is pretty good about showing effects of various style properties and values; the design mode in the older MX release was not as good. But for either one you should be looking at your document through your browser, either by posting the page to a site and viewing it there or by using the F12 key to display the active document in your default browser. Letter spacing and word spacing do not seem to show well in the design mode, nor does the vertical alignment option under Block display well in the Design mode in Dreamweaver.
The design mode display is improved with the Dreamweaver 8 release but still requires you to view through a browser to really see what the page will look like..
Using styles in a template
The video Using Styles in a Template shows how you may be using a style sheet already in your templates (thus the documents created from the template), especially if you created the templates in Dreamweaver MX 2004. Since internal styles are created by the 2004 release whenever traits are applied through the Properties panel, you would see these rules in the internal style sheet when you turn on the display of the CSS Styles panel.
Shown below are the rules associated with the generalpages.dwt template that is included in your sample files. Three were created through the Modify, Page properties display, and three were created by using the Properties panel for text traits.
As is shown in the video, if this is your situation, you might want to give more meaningful names to the rules, just to help facilitate their use by others using the template.
As is explained in the video, there are two "practical" reasons for using style sheets: making quick changes in many documents by editing one style sheet, and using features not otherwise available (like borders around paragraphs). Since your documents can be quickly updated by changing the template used to create the documents, the first reason here occurs just because you are using templates. However, you still should think about adding rules to a style sheet used by a template, especially if you have editable regions which can contain a lot of text. For example, you might want to have a rule to reduce spacing between paragraphs, to add spacing between listed items, to add borders to selected paragraphs, as well as various rules for internal headers in a long text area in an editable region.
Adapting an existing site to use style sheets
Because of the precedence feature in style sheets, previously discussed, you will have problems trying to apply style sheets in documents which have been created already, especially documents created with versions of Dreamweaver prior to the 2004 release. To determine if you will have problems, look at the source code for a document from your site. Are font traits created using the <font> tag? Or do you see references to styles?
This is a screen capture that shows a
document created originally using Dreamweaver 4 and then modified
slightly with Dreamweaver MX. You can see the references in the code
to the old style of <font> tag, rather than a reference to
a class selector. And if you look at the top part of the document,
in the head area, you won't see any styles referenced there. As long
as any of these old formatting codes remain in the document,
they will take precedence over a style sheet rule I might try to
apply.
Unfortunately, there is no simple way to get rid of these codes, since they are often expressed with different wording and in different word order. For example, in one place there is just a reference to <FONT face=.------"> but in another place there is a <FONT color, etc.>. As is shown in the video Adapting an Existing Site to Use Style Sheets, you can use the Find and Replace feature (under Edit on the main menu) to look for the initial part of the string <font and finding that in the code. Then you can delete the entire tag. You would also have to search for </font> to delete that tag as well.
Sample style sheets that come with Dreamweaver
There are some canned style sheets included with the installation of Dreamweaver that you can use, if you want. You get to these by clicking on the icon to import an external style sheet, found at the bottom of the CSS Styles panel.
The dialog box used for importing or linking to an external style sheet has a link for sample style sheets.
Clicking on this link brings up a display of various style sheets.You can an example of some of the effects of the rules in the style sheet in the middle of this dialog box. You can also click on the button Preview to actually apply the style sheet to the open document.
Notice that at the bottom of this dialog box for selecting an external sample style sheet, there is a note of the folder area where the style sheet will be copied to, if you select the style sheet by clicking on the OK button.
In general, although you can explore these style sheets and pick up ideas for your own style sheets by examining the rules used in these sample sheets, you might not find these that useful in your own style sheet development. There is a short video about the sample style sheets.
Preference settings
When you have multiple properties for a rule, they are written (probably) so that each property is on its own line, as in:
H1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
line-height: 28px;
font-weight: 800;
}
Under Edit on the main menu, then Preferences, there is a category for CSS
Styles, as shown to the left.
The initial settings show that shortcuts are not being used. But if one or more of these are selected, then the rule is written in a long line, such as below.
This shows a rule written in shortcut format.
H1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
line-height: 28px;
font-weight: 800;
}
Which way you have Dreamweaver write rules is up to you.
Notice that in the above Preferences display, there is a box telling Dreamweaver to open an external style sheet if you make changes to a rule (through editing the rule in the CSS Styles panel). This setting is not found in the MX release, and you have to open the external style sheet in the older MX yourself.
This material was used in a distance class on Templates and Style Sheets given by Linda Ffolliott, ECAT, College of Agriculture and Life Sciences, University of Arizona. To use this material, contact Linda Ffolliott at ffolinda@ag.arizona.edu