With the release of Internet Explorer 4.0, Microsoft is making good on its commitments to fully support Cascading Style Sheets (CSS), which were introduced in Internet Explorer 3.0. The extended control that CSS gives over web page presentation and layout in this latest browser is sure to entrall even the jaded HTML designer.
CSS, for the uninitiated, is a standard for formatting Web pages that goes well beyond the limitations of HTML. Promulgated by the World Wide Web Consortium (W3C), the Internet's standards body, CSS extends HTML with more than 70 style properties that can be applied to HTML tags. With CSS, Web developers have at their disposal a wealth of additional formatting options for color, spacing, positioning, borders, margins, cursors and much, much more.
HTML gives you the developer a certain level of control over the formatting of a document. You can set headings <h1>, <h2>...etc), make text bold <b> or italic <i>, define lists (<ul>, <ol>), and so forth. However, this level of control is fairly limited. For example, developers have no control over the absolute positioning of items on the page, and are limited int heir ability to control size, spacing, and color of page elements. Seeking to surpass these limites, developers have resorted to workarounds such as converting text to graphics, creating complicated table layouts, using images for white space control, and using proprietary HTML extension and add-ons.
CSS shatters the HTML barrier by putting at the developer's disposal a set of standard properties specifically geared towards page formatting and layout. These properties are applied to the document without modifying the underlying HTML. Browsers that are not CSS-compliant will still see the page in its unaltered HTML state, while browsers that support CSS will see the page in all its CSS-enhanced glory.
From the designer's perspective, there are two steps to adding CSS styles to an HTML document: declaring the styles and applying the styles to HTML elements. For example, "I want some blue, bold, italic text" would be a simple delaration, while "I want all my document subleading to be blue, bold, and italic" would be an application of the style.
Unfortunately, we have to do a bit more than silply utter a few statements in front of hte monitor -- at least until voice recognition and HTML editing technologies get more sophisticated. We need to understand the syntax of declaring CSS styles and the different ways in which we can apply these styles to our HTML documents.
You can add CSS properties to your documents in four ways:
To use an inline style, you add a <STYLE> attribute to a specific instance of an HTML element,
using the following syntax: <b style="color: #xxxxxx">Color Me Blue</b>. Which would rended like this: Color Me Blue.
An inline style may be applied to any HTML element, from <a> to <xmp&362;, and modifies only the specific instance (occurrence in the document) of the element to which you apply it. In the example above, only that instance of <b> would be BLUE -- the rest of the <b> tags in the document would be unaffected.
Using lots of inline styles to format a document allows for great precision, but can bypretty tedious to code. If you have a lot of styles, the inline style method can also result in a fair amount of unnecessary coding. Inline styles are also somewhat difficult to maintain, because the CSS properties are scratted around many pages in your web site.
To use an embedded style sheet, you define a style block (delimited by the <style type="text/css"> and &360;/style> tags), which should be placed in the HEAD section of the document. This block consists of a set of style rules, where each rule defines a style for an HTML element or group of elements. A style rule has two parts:
The generic syntax for a style rule is as follows: selector {property: value; property: value;} When using embedded style sheets it is best to surround the selections and properties with the comment tags. This keeps older browsers from reading them and displaying your style sheet coding.
You can keep your style sheets in a separate file and link to ir from a document or set of documents, using a <link> tag in the HEAD section of the linking document, as follows: <LINK REL="stylesheet" TYPE="text/css" HREF="stylesheets.css">.
The linked style sheet(stylesheet.css) consists of a set of style rules, exactly like an embedded style sheet, except that the style rules are not enclosed in <style type="text/css"></style> and comment <!-- --> tags. Linking to an external sheet allows the developer to apply a set of rules across a group of HTML documents, thus extending the benefits of embedded style sheets to a set of pages.
An external style sheet may also be imported into a document by using the @import property in a style sheet: @import: url(stylesheets.css).
The @import tag should appear at the beginning of a style block or on a linked sheet, before any declarations. Rules in imported style sheets are applied before other rules defined for the containing style sheet, putting them at the bottom of the "pecking order' of the imported sheet.
If you expect to have formatting variations for different instances of a single element, or you would like to have different elements share the same format, using a class name as a selector is a good approach. This is often referred to as "sub-classing" an element. CLASS is an HTML attribute that has no display characteristics and that you can apply to any element, like this: <b class="clsRed">Classy, red, and bold</b>.
The style rule for clsRed could be declared as follows:
<style type="text/css">
<!--
.clsRed {color:red;}
-->
</style>
|
Note that the selector begins with a period (.), which is the required syntax for class names as selectors. If we add the above rule to the style sheet, every element to which we assign a class name of clsRed will have red text. If an element doesn't have this class name, even it it is of the same type as another element that does, it will not have this style applied result - Classy, red and bold.
OK, now that you have learned how to apply cascading style sheet elements, lets only use the embedded style sheets in this lesson. That means you will use CSS for each page of your site. Later on you may want to take all those embedded tags and turn them into one complete LINKED style sheet for better control of your site.
The list below are some of the more commonly used CSS tags. For a complete listing of all the tags that are available, go to Web Workshop - Cascading Style Sheets In Internet Explorer 4 at http://msdn.microsoft.com/workshop/author/css/css-ie4.asp
Here is how a paragraph using all of the CSS tags that are listed above would look. This embedded style coding would be placed in the HEAD section of the page that you are embedding this style.
<style type="text/css">
<!--
p.neat {font-family: verdana, arial, helvetica; font-style: normal;
font-weight: normal; color: #000000; font-weight: bold;
letter-spacing: 5px; text-decoration: line-through;
text-align: justify; text-indent: 25px; line-height: 25px;
margin-right: 65px; margin-left: 65px}
-->
</style>
|
OK, here is that paragraph that we talked about. The quick brown fox jumped over the big so very lazy black dog, while that lazy cur was sleeping so soundly. Now is the time for all good men to come to the aid of their country. A pretty young lady will save the day. Behind every good man is a very exhausted lady. A penny saved is a penny earned, or so they say, except when the government finds that you have found that penny and taxes you two pennies for every one that you found.
OK, here is the same paragraph but just a little different style. The quick brown fox jumped over the big so very lazy black dog, while that lazy cur was sleeping so soundly. Now is the time for all good men to come to the aid of their country. A pretty young lady will save the day. Behind every good man is a very exhausted lady. A penny saved is a penny earned, or so they say, except when the government finds that you have found that penny and taxes you two pennies for every one that you found.
See the style coding for this paragraph below. Now that you have seen what CSS can do, go forth and have fun.
<style type="text/css">
<!--
p.diff {font-family: times new roman, arial, helvetica; font-style: normal;
font-weight: normal; color: #0000FF; font-weight: normal; font-size: 12pt;
letter-spacing: 10px; text-decoration: underline; text-align: left; text-indent: 65px;
line-height: 35px; margin-right: 75px; margin-left: 85px}
-->
</style>
|