Introducing Styles


Style is all about the way something is presented. Whether it's the style used by a runway model strutting down the catwalk or the style used by the latest Hollywood heartthrob in the latest blockbuster film, it's all about presentationand styles in web design are no different. The web would be a pretty drab place if every website was restricted to a white background, black text, and the Courier font. In fact, I dare predict that were the web that boring, it would be significantly less popular than it is today.

Fortunately, developing for the web goes far beyond black and white, and you have a wealth of tools at your disposal to ensure that each website is relatively unique from the others. Whether it's colored text, stylized forms, rollover hyperlinks, or a host of other elements, each and every customization that you make to a site gives it its own style.

Today's browsers operate according to a set of rules that set the guidelines for defining a site's style. For instance, when you create a hyperlink, browsers underline them by default. In addition, the use of the <p></p> HTML tags defines that the text placed between the tags be formatted normally and that the browser should include a blank line after the text. These rules, and a host of others, establish the default framework that defines how a browser renders a web page, but they also provide options for customizations beyond that basic framework.

When you look at stepping beyond that default framework to add some zing to your site, you have a couple of choices. HTML provides tags that enable you to modify the appearance of your page, such as the <font> tag or the <body> tag. These tags, however, are relatively limited and focus more on rendering the site's basic structure than on the presentation aspect. That's where cascading style sheets (CSS) enter the picture.

Because the purpose of CSS is less focused on the layout of a page and more on the presentation, the language contains significantly more options for customizing the look and feel of a single web page or an entire site. In other words, HTML tags take care of the structural rendering of the site while CSS can supplement HTML by making the site more visually appealing.

Individual Styles

The tool used to alter the presentation of the site is called a style. Styles can apply to specific instances of an object such as a single word or an image, or they can be applied to a group of objects. For instance, when you apply a style to a table column, each of the cells in that column is affected by the style.

Styles can be embedded individually into a web page, but more frequently they are grouped together and stored in an external style sheet. This is covered more deeply in a moment. First, it's a good idea to take a look at the structure of an individual style.

The following style is named .bodyblueText. When applied, it modifies the text that is applied to use the Arial font, 12-point size, a bold style, and the color of blue.

.bodyblueText {     font-family: Arial, Helvetica, sans-serif;     font-size:12px;     font-weight:bold;     color: blue; }


The .bodyblueText style consists of a single style rule, which in turn is made up of sets of matched pairs of properties and values that define elements such as the font face, size, weight, and color. Table 25.1 provides a list of the available matched pairs that can be modified when you create styles for text.

Table 25.1. Text Properties Controlled by Styles

Name

What It Does

color

Sets the text's color.

font-family

Sets the font face and the default font family.

font-size

Sets the font size in absolute or relative sizes.

font-style

Sets the text italic or oblique.

font-variant

Sets the text to small capital letters instead of lowercase letters.

font-weight

Sets the text to bold, light, bolder, lighter, or a numeric value.

line-height

Sets the text's line spacing.

text-transforms

Sets the text's case.

text-decoration

Applies effects to the text such as underline or blinking text.


Note

When creating your style, be aware that you don't have to set a value for every attribute. You can pick and choose those attributes that are necessary and set only those.


Although customizing the text within a web page is one of the most common uses of styles, it isn't the only application for this useful tool. In fact, styles can be applied to the page as a whole as well as to tables, images, and just about any object that can be placed within a web page. So does that mean that you have to buy another book on how to write CSS styles? Absolutely not! One of the really nice things about Dreamweaver 8 is that you can build, modify, and apply styles without ever having to write a single line of code. Dreamweaver's CSS panel provides an easy-to-use interface that lets you take care of your CSS needs from within the Dreamweaver environment.

Style Sheets

Individual styles can be either embedded into a web page or grouped together and stored in an external text file called a style sheet. A style sheet can then be referenced by any web page via a link to the file. With the style sheet attached to the page, any of the styles that are part of the style sheet can then be applied to the referencing HTML page. Because the styles are stored in a single file, this makes site-wide updates extremely easy. If you want to change one property of a style, simply open the style sheet, make the adjustment, and save the sheet. When the save is applied, every reference to that style in each HTML page in the site automatically reflects the change.

Note

The cascade in Cascading Style Sheets comes from the fact that multiple styles can be applied to the same element within a page. The browser applies the most specific style to that element. For instance, imagine a piece of text located inside a cell within a table. You can apply one style to the row that contains the cell and yet another to the cell itself. When rendering the text, the browser applies the highest level style first and then replaces it with more specific styles if available. So in this case, the style that would take precedence and be displayed in the browser would be the style applied to the cell.


When working with style sheets, three specific tags control the style sheet functionality. The <link> tag is embedded in the head section of the web page and specifies the location of the external style sheet in relation to this HTML document. This tag essentially creates a connection between the referencing page and the style sheet so that the referencing page can apply the styles to its page objects. The link tag generally looks something like this:

<link href="mystylesheet.css" rel="stylesheet" type="text/css">


Note

If the location or spelling of the link to the style sheet is incorrect, it doesn't break your web page. In that case, the browser just applies the default text styles to the page until the issue is resolved.


The <class> tag is used within a web page to apply a style to an HTML tag. For instance, you can apply the .blueText class to an entire paragraph of text by using the following code:

<p >The rain from Spain falls mainly on the plains</p>


Note

When you define an individual style, be aware that each style must start with a period, such as .blueText. However, when applying the style within the page, the period is not used.


The third tag that is used to apply styles is the <span> tag, which applies style to a subelement of an HTML object. For instance, suppose that you wanted to italicize the word Spain in the previous example. You would do so by applying a span in the following manner:

<p >The rain from <span >Spain</span> falls mainly on the plains</p>


Obviously, you would need to define a style called .bodyitalicText that would set the text to italic.

As you can see, styles and style sheets aren't as complex as they might appear at first glance. And although they are relatively easy to create and manage, Dreamweaver makes the process even easier by providing a graphical interface to adjust the CSS code.



Special Edition Using Macromedia Studio 8
Special Edition Using Macromedia Studio 8
ISBN: 0789733854
EAN: 2147483647
Year: 2003
Pages: 337

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net