• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Creating a CSS Style

Those blue hyperlinks were a bit of an eyesore before, but now that you have whole paragraphs underlined in a color outside of the site's color palette, it is getting seriously ugly. As you develop sites, you often have to add styles as you discover new needs. The good news is that since you have only one style sheet referenced by all your pages, you can add a style just to that one sheet, and it will be available to all of the pages linked to it.

Open the CSS Styles panel (Window > CSS Styles) and click the New CSS Style button.

You can use the CSS Styles panel to manage CSS styles as well as to apply CSS styles to HTML tags. The buttons across the bottom of the panel are used for style management.

In the New CSS Style dialog, set the Type option to Make Custom Style (class). Make sure the Define In option is set to dante.css.

Chances are, both of these options are already set correctly by default. The first option, Type, enables you to specify what kind of CSS style to create.

Make Custom Style (class) creates the kind of CSS style you have used so far: bodytext, heading1, and heading2 are all custom styles.

Redefine HTML Tag provides explicit formatting directions for standard HTML tags, such as the <h1> and <p> tags. Using this method, you would merely enclose text inside a standard tag (for example, <p> instead of <p.bodytext>) and the browser would render it properly. I tend not to use this approach, because by using custom styles I can use the same tag (<p>) for all of my text, and let the custom style define each paragraph's appearance.

Use CSS Selector brings up the more advanced topic of pseudoclasses. You'll learn about these in the next task.

The Define In option lets you decide whether you want to add the new style to an external style sheet in the site or the active document only. As I've said before, it's better to link to external style sheets rather than include style information in every page, because if you make a change you modify the style sheet in only one place and the change ripples throughout the site.

In the Name field, enter .bodytextlink and click OK.

This is what will appear in the CSS styles panel when you are finished. In the HTML code, if applied to a <p> tag, the result would be <p.bodytextlink>. In fact, you will never apply this style to <p> tags, since it is for links only. Instead, it will be applied to <a> tags. The <a> tag is used in HTML code to create hyperlinks.


You must type the period (.) before the style name for all custom styles.

In the Type category of the Style Definition dialog, set the font to Verdana, Arial, Helvetica, sans-serif; set the size to 12; set the color to hexadecimal #CC0000; and select none in the Decoration category. Click OK to save the style.

Most of this is self-explanatory: You are creating a style that is compatible with the rest of your site in font, size, and color. All of the options that you left blank, such as weight and variant, will be left at their defaults.

You might wonder, though, why you checked none in the Decoration section, as opposed to leaving it blank, which is its default. The reason is that by default, hyperlinks are underlined. The hyperlinked paragraphs (each of the three options) are hard to read when underlined, so it is best to suppress them. CSS considers underlining to be a text decoration, so by specifying none as the text decoration, you are telling the browser not to underline the hyperlink.

How, then, will the hyperlink stand out? First, it is still bright red, quite a contrast to the black body text. In addition, in the next task you will add a special effect where the hyperlink is underlined only when the user rolls over the link.

Before you close out of this dialog and save the new style, take a moment to check out some of the other categories to get an idea of the many options available to you with cascading style sheets.

One at a time, click each of the three answers that you just added hyperlinks to, click the <a> in the tag selector, and apply the bodytextlink style.

The text should now appear fiery red. In the tag selector, you should see <a.bodytextlink>.

Take a look at the tag selector. Just before the <a.bodytextlink> tag is an <li> tag. This <li> tag is HTML's list item designate. This is a numbered list, and each item is enclosed with the <li> tag. The whole list is identified by the <ol> tag, which stands for ordered list. What's interesting here is that the <ol> tag has a custom style attached to it; it reads <ol.bodytext> in the tag selector. So what does the browser do when a given piece of text has more than one custom style attached to it, as in this case, where the same text is enclosed by both the bodytext style (in the <ol> tag) and the bodytextlink style (in the <a> tag)?

When there is a direct conflict of style attributes (here, there are conflicts of color and text decoration, but not font or size), whichever tag is closer to the text gains precedence. In this case, the text is enclosed in the <a> tag and the <a> tag is inside the <li> tag, which is, in turn, in the <ol> tag. Therefore, any style attached to the <a> tag will take precedence over a style attached to the <ol> tag. In other words, the <a> tag is closer to the text and thus, its styles are applied.

Did you notice that all of the other links on the page also suddenly turned red? The reason is that I had already added the bodytextlink class (that is, custom style) to their <a> tags. Since the style didn't exist until you completed this step, the link appeared in its default color. But the moment you created the style, it was automatically applied. As you have seen throughout this and the previous two lessons, CSS styles take little (very little) work up front, but they pay off over and over again.

Press F12 to preview the site in a browser.

The link works and it is red. But without that underline, perhaps the hyperlink is too subtle.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint