Although HTML doesn't say much about how a page looks when it's viewed, Cascading Style Sheets (CSS) enable you to apply advanced formatting to HTML tags. Many changes in HTML favor the use of CSS tags while XHTML eliminates almost all related tags in favor of CSS.
After completing this lesson, you should be able to:
Describe the flexibility and advantages CSS allow when developing
Explain the significance of attributes, specifically the STYLE attribute
Styles are a way to control how the browser renders HTML tags (or elements, as they're called in standards documents). Cascading Style Sheets (CSS) provide a good deal of flexibility in how you can alter the appearance of any type of element, and can be used in a number of different ways.
The advantage of CSS is that it can be used at varying levels of specificity. For example, you can put all your styles into a separate file, and link to that file from your Web page. Should you want to change the site's appearance you can simply edit your CSS file.
Or, if you prefer, you can include styles at the top of your page so that they apply only to that page. You can include styles inside the tags themselves using the style attribute.
You can also control the specificity of the styles you create based on how you define them. For example, you can write rules that apply to all tags of a specific type, such as all
elements. Or you can specify classes for your elements and then write rules that apply only to members of that class.
For example, you could create a class called headline and then make all
elements in the headline class red.
You can also write rules that apply to specific elements by assigning them a particular identifier and writing rules that apply to that identifier.
CSS can serve as a replacement for many common tags. Generally, the flexibility of CSS makes it preferable to using regular HTML tags for just about anything. CSS can be used to manage the entire layout of the page, or even the entire layout of a site.
Including Styles in Tags
An attribute is an additional bit of information that somehow affects the behavior of a tag. Attributes are included inside the opening tag in a pair. Here's an example:
Some attributes can be used with nearly any tag; others are highly specific.
One attribute that can be used with nearly any tag is style. By including the style attribute in a tag, you can include one or more style declarations within a tag itself. Here's an example using the
tag:
There are many, many properties that can be used in style declarations. Putting a declaration into a style attribute is just one of several ways that you can apply styles to your document.
The style attribute of the
tag contains a style declaration. All style declarations follow this same basic pattern, with the property on the left and the value associated with that property on the right.
In the preceding example, the property is font-family, and the value is Verdana, sans-serif. This attribute modifies the Standard
tag by changing the font to Verdana, and if the user doesn't have that font installed on his system, whichever sans-serif font the browser selects.
Programs to Help You Write HTML
Many freeware and shareware programs are available for editing HTML files. Most of these programs are essentially text editors with extra menu items or buttons that insert the appropriate HTML tags into your text.
HTML-based text editors are particularly nice for two reasons: You don't have to remember all the tags, and you don't have to take the time to type them all. Many general-purpose text editors also include special features to make it easier to deal with HTML files these days.
Many editors on the market purport to be WYSIWYG (What You See Is What You Get). There's really no such thing as WYSIWYG when you're dealing with HTML. "What You Get" can vary wildly based on the browser. As long as you're aware that the result of working in those editors can vary, using WYSIWYG editors can be a quick way to create simple HTML pages.
For professional Web development and for using many of the very advanced features, however, WYSIWYG editors usually fall short, and you'll need to go "under the hood" to play with the HTML code anyhow.
No comments:
Post a Comment