Setting an Initial Cap with Decoration (Imagery)

You want to use an image for an initial cap.

Wrap a span element around the first letter of the first sentence of the first paragraph:

<p><span class="initcap">O</span>nline, activity of exchanging

ideas is sped up. The distribution of messages from the selling of

propaganda to the giving away of disinformation takes place at a

blindingly fast pace thanks to the state of technology...</p>

Set the contents inside the span to be hidden:

p.initcap {

display: none;

}

Then set an image to be used as the initial cap in the background of the paragraph.

p {

line-height: 1em;

background-image: url(initcap-o.gif);

background-repeat: no-repeat;

text-indent: 35px;

padding-top: 45px;

}

The first step of this Solution is to create an image for use as the initial cap. Once you have created the image, make a note of its width and height. In this example, the image of the letter measures 55 by 58 pixels

Next, hide the first letter of the HTML text by setting the display property to none. Then put the image in the background of the paragraph, making sure that the image doesn't repeat by setting the value of background-repeat to no-repeat:

background-image: url(initcap-o.gif);

background-repeat: no-repeat;

With the measurements already known, set the width of the image as the value for text-indent and the height of the image as the padding for the top of the paragraph

text-indent: 55px;

padding-top: 58px;

Then change the text-indent and padding-top values so that the initial cap appears to rest on the baseline,

Note that users with images turned off aren't able to see the initial cap, especially since the solution doesn't allow for an alt attribute for the image. If you want to use an image but still have an alt attribute show when a user turns off images, use an image to replace the HTML character:

<p><img src="initcap-o.gif" alt="O" >nline, activity of exchanging

ideas is sped up. The distribution of messages from the selling

of propaganda to the giving away of disinformation takes place at

a blindingly fast pace thanks to the state of technology...</p>

Note that while the alt attribute is displayed in this solution, the ability to kern the space between the initial cap and the HTML text is lost. The HTML text begins exactly at the right side of the image and can't be moved closer to the letter being displayed in the graphic itself.

Setting a Larger, Centered Initial Cap

You want to place a large initial cap in the center of a paragraph.

Wrap a span element with a class attribute around the first letter of the first sentence of the first paragraph:

&alt;p>&alt;span class="initcap">O&alt;/span>nline, activity of exchanging ideas is sped

up. The distribution of messages from the selling of propaganda

to the giving away of disinformation takes place at a blindingly

fast pace thanks to the state of technology...&alt;/p>

In conjunction with styling the initial letter through the span tag with a class selector, create the decoration that sets the text indent for the paragraph.

p {

text-indent: 37%;

line-height: 1em;

}

p .initcap {

font-size: 6em;

line-height: 0.6em;

font-weight: bold;

}

This Solution works due to the interaction of three CSS properties. The first is the text-indent property, which moves the first line toward the middle of the paragraph. The value is set to 37%, which is a little bit more than one-third the distance from the left side of the paragraph

The next property that helps is the font-size property. Setting the size to 6em makes the font six times (or 600%) larger than the default size set for fonts in the browser

Because the font size is six times as large as the rest of the type, the leading on the first line is now deeper than it is on the remaining lines. To help adjust that, set the line height for the span element to 0.6em.

Note that this recipe centering the initial cap works, technically, when the character's width is equal to 26% of the paragraph's width. In other words, if the letter for the initial cap or the width of the paragraph is different for your own work, adjustments to the values in the CSS rules are necessary to move the initial cap to the center.

Setting a Simple Initial Cap

You want a paragraph to begin with an initial cap.

Mark up the paragraph of content with a p element:

&alt;p>Online, activity of exchanging ideas is sped up. The

distribution of messages from the sellin of propaganda to the

giving away of disinformation takes place at a blindingly fast

pace thanks to the state of technology...&alt;/p>

Use the pseudo-element :first-letter to stylize the first letter of the paragraph,

p:first-letter {

font-size: 1.2em;

background-color: black;

color: white;

}

The CSS specification offers an easy way to stylize the first letter in a paragraph as a traditional initial or drop cap: use the :first-letter pseudo-element (:first-letter isn't supported in most browsers, including Internet Explorer 4 and 5 for Windows, Netscape Navigator 4, and Internet Explorer 4.5 for Macintosh).

Wrap a span element with a class attribute around the first letter of the first sentence of the first paragraph:

&alt;p>&alt;span class="initcap">O&alt;/span>nline, activity of exchanging ideas is sped

up. The distribution of messages from the selling of propaganda

to the giving away of disinformation takes place at a blindingly

fast pace thanks to the state of technology...&alt;/p>

Then set the style for the initial cap:

p .initcap {

font-size: 1.2em;

background-color: black;

color: white;

}

Initial caps, also known as versals, traditionally are enlarged in print to anything from a few points to three lines of text.

Enforcing Font Sizes

You want to override control over font sizes.

Use the !important rule to override a user's style sheet rules:

P {

font-size: 12px !important;

}

The !important rule consists of an exclamation mark (!) followed immediately by the word important.

In some browsers, a user can have a style sheet set up for browsing the Web that enables him to set font sizes (and other CSS properties) to his liking. However, as a designer of a web document, you might want to make sure your designs render in the manner you planned. The !important rule gives you a little insurance that your designs remain intact. (However, the nature of the medium means that designs are never precise or "pixel-perfect" from one display to another.)

Although you as the designer write the !important CSS rules, the user also can write these rules in his own style sheet. And in the CSS 2 specification, !important rules the user writes override any !important rules the designer writes.

width and height Media Queries

The width and height media features describe the horizontal and vertical measures for the display a page can be formatted against. They take standard length units, and can be applied to the visual and tactile media types. They can also accept min- and max- prefixes. These properties are designed to specify the viewport of a device (a browser window, for example).

The following code snippet sets the width range for a screen device:

@media screen and (min-width: 600px) and (max-width: 800px)
{@import url(http://www.corecss.com/dummyexample/)}

Note that the height property of the rendering display surface for continuous media is the height of the viewport (the browser window), whereas for static media, like print, it would be the height of the page. The following code snippet provides an example of this:

@media print and (min-height: 8.5in) and (max-height: 11in)
{@import url(http://www.corecss.com/dummyexample/)}

Media Queries

The latest draft CSS3 ushers in the idea of "media queries," which extends the idea of media types (such as "tv" and "print") so that the display properties of a Web page can be more precisely customized for these devices by the Web author. The idea is to better tailor the display of Web pages without having to change anything in terms of content. It also allows room for expansion to media types other than those already mapped out under the CSS2 specification.

Since this has not been finalized, what follows should be considered a "heads up" of what we may soon expect from browsers of the future — there is no guarantee that this is exactly how they will be implemented.

Media queries are expressions that are either true or false; either they are correctly laid out and match an existing setting, or they are rejected by the browser and not used.

Media "query" may not in fact be the best name for this function, as it does not actively seek out a setting and then programmatically return a result that can then be further manipulated. Instead, they are passive settings contained within the header of a Web page or embedded in a separate style sheet. But they will change the display of content given the right values for a given media query. In practice, it is a way of cascading display parameters — if a match is found, it is used, otherwise the next available setting is used instead. If no match is found, a default setting is used. Think of media queries as being akin to a font property with various specific and generic font types listed and you'll get the idea.

Media queries can either be written in HTML, using the link element, or written in CSS, using the @media rule. When taking the HTML path, you use the media attribute to set the media query, which is then linked to an external page containing specific information on formatting for a given display device. When setting things using @media, you name the media types in sequential order, and then link to the defining external formatting style sheet. Both types can also use operational expressions such as "only", "and" and "not".

Whether written in HTML or CSS, the rule format is the same:

media query + media type(s) + media feature + URL

font-family Property

font-family determines how a font should be displayed. Instead of naming a specific font, as the tag does, the font-family CSS property instead sets the display characteristics of that font.

It can take any of the following values: cursive, fantasy, monospace, sans-serif and serif. One of the drawbacks of the tag is that you had to specify a particular font name (such as "Arial", "Times Roman" or "Courier") in order to try and get it to appear on screen. The font-family CSS property tries to get around this by specifying the type or "family" of font to be displayed. Given a particular value, the browser does its best to come up with a match, so if you specify monospace you may get a Courier font to appear on screen, whereas if you specify serif, you may get a Times Roman font instead. This CSS property is still dependent on the user's computer to come up with a matching font family, but the font family categories encompass a broad spectrum of fonts that could only be accomplished with a tag containing multiple values attached to the face attribute.

In other words, you could choose to include the following HTML code in order to get a serif font displayed on a user's screen:

This sentence is displayed in a serif font

Or you could use the following, more concise CSS code instead:

This sentence is displayed in a serif
font

outline Sub-Family of Properties

Under CSS2, it became possible for Web authors to create visual outlines around objects on a Web page, such as buttons, active form fields, imagemaps and other objects, in order to make them stand out to viewers. The sub-family of outline properties is designed to add a border to these types of objects. These outlines do not take up any space on the page (in other words, they do not expand the box within which the element is contained), and they can be non-rectangular in shape (which is typical of most imagemaps). This is simply an extension of what is already present in most operating systems, in signaling to the viewer what is known as "focus" (i.e., that a particular element is currently selected). For example, if you are presented with a Web-based form while using a typical MS-Windows computer, you will notice that a cursor will typically appear in the field in which you can currently type, and if you hit the TAB button on your keyboard a few times, you will notice that the cursor jumps to the next field down. If you keep doing this and a button, checkbox or radio button is selected, you will discover that the selected object is usually surrounded by a thin border. This is exactly the type of border that can be explicitly set using the set of outline properties.

The sub-family consists of four different properties: outline-width, outline-style, outline-color and the shortcut property outline. These properties are meant to be set globally across a Web page, not to a specific element, so these properties should be set within the header of a Web page.

cursor Property

The cursor property is used to define the type of cursor to be displayed over a given Web element. The purpose of this property is to draw the attention of the user to the element. It can be applied to any element on a Web page: text, images or any other objects.

There are plenty of values available for the cursor property, enabling Web authors to choose from just about the whole range of cursor types available. There are several cursor values designed to produce very specific cursor types. For example, the crosshair value is designed to display a symbol that resembles a "+". The pointer value shows a typical "pointing" cursor, which is typically a small, upper-left pointing arrow.

Then there are a number of cursors normally used to indicate that an edge or corner can be moved. These cursor values are e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize and w-resize. The letter at the beginning of each of these values designates the cardinal direction of the type of edge or corner cursor to be displayed ("e" for east, "nw" for northwest and so on).

Several cursor values are more dependent on the type of operating system being used. The move value should display the type of cursor indicating a Web element can be moved (regardless of whether it can be or not). This type of cursor is commonly displayed as a thick double line, which can be either vertically or horizontally aligned. The text value should display the type of cursor that indicates text can be selected. This type of cursor is most typically rendered as an I-bar. The wait value should display the type of cursor commonly associated with a computer's "busy-mode" cursor, indicating that the user should be patient while the operation the computer is working on is completed. A good example of this is the standard hourglass cursor. The help value should display the type of cursor associated with online help, most typically rendered as either a question mark with pointer or in a separate balloon.

If the auto value is used, the browser displays whatever type of cursor would normally be associated with the Web element. Similar to this is the default value, which displays the default "pointing" cursor for the browser (most often some form of arrow).

A URL value can also be used with cursor, which must point to some sort of cursor resource (presumably a bitmap image of the cursor), which is then loaded by the browser and displayed. The URL value can be cascaded, so that if the first cursor image can't be found, a back-up cursor can be. You can see an example of this in the following code snippet:

<h1 style="cursor: url(funkyhand.csr),url(otherhand.cur),
text">
try
scrolling over this header and see what happens!</h1>

It is worth noting that Internet Explorer 6.0 supports this property, but requires that any cursor images be either in a .cur or .ani (animated cursor) file types.

Finally, there is the inherit value, which simply takes on whatever parent value may have already been set for cursor.

This may all seem pretty straightforward, but both Microsoft and Netscape added a number of new cursor values in version 6.0 of their respective browsers. Internet Explorer 6.0 supports these additional cursor styles:

· all-scroll (produces a up/down/left/right arrow with a dot in the middle, used to indicate the content is scrollable in any direction)

· col-resize and row-resize (used to indicate that a column or row can be resized, respectively)

· no-drop (used to indicate that a dragged object cannot be dropped at the current cursor position)

· not-allowed (indicates that the intended action is not allowed)

· progress (shows that a background process is running)

· vertical-text (indicates that the vertical text is editable)

· hand (displays a hand icon; first implemented in version 4).

Netscape Navigator 6.0 also supports a number of custom cursor types, and these are:

· alias (shows that a shortcut or alias to some other object is available)

· cell (indicates that one or more spreadsheet cells are available)

· copy (specifies that the content can be copied)

· grab and grabbing (the first shows that an object can be "grabbed," and the second shows that it has been "grabbed" and is ready to be moved)

· spinning (used to indicate that a process is going on, but, unlike with "wait", the user interface is still available for use)

Netscape Navigator 6.0 is also supposed to support three other custom cursors — count-down, count-up and count-up-down, indicating that the program is counting down, up, or both in succession, respectively — but they do not appear to work, or have perhaps been discarded in subsequent releases of the browser. It is notable also that the Mozilla browser supports all of the Netscape Navigator-style cursor types — though none of the Internet Explorer types — as well.

column-gap Property

In order to set some spacing between columns, use the column-gap property. This takes the same values as column-width (i.e., a standard length value, a percentage value, auto and inherit) as well as one more: normal. This last property is the default, and the specification recommends that it be set to a value of 1 em in width, though individual browsers may differ in how they render this. When the auto value is used, it tells the browser to make the gaps between the columns equal to each other.

If column rules are used, they are placed in the middle of the column gaps. It is worth noting that the width value set to any column rules does not affect the width of any column gaps that are set. The following code snippet adds a 15-pixel-wide column gap to a div element:

div.columns {column-count: 3; column-width: 150px 35% auto;
column-gap: 15px}

The only other thing worth noting is that column-gap values are not allowed to be negative, as this would allow for a situation where the content from one column could overlap that of an adjacent column.

column-width Property

This property allows you to set a specific width for the columns that are displayed. It can take a standard length value, a percentage value, auto and inherit. The default behavior for this property is that if a single value is supplied, it is applied equally across all displayed columns. So if you set a specific length or percentage value, it is applied equally across all of the displayed columns. The auto value apportions the same amount of available space to the number of columns that have been set by the column-count property. If you want to set a width value for successive columns, you can also do that by setting successive values to this property in order. The following code snippet shows how you could use this property to set three columns, the first of which is set to 150 pixels in width, the second being 35% of the browser window, and third filling the rest of the available space.

div.columns {column-count: 3; column-width: 150px 35% auto}

It is easy to go wrong with this sort of property by setting larger widths than are possible to be displayed — like setting more than two 50% width values. In cases like these it is possible that content could be "lost" in the process. In these cases it is recommended that overflow: visible be used in order to ensure that any content that might overflow the columnar layout might be displayed by default.

column-count Property

The first thing you have to do to be able to arrange a column layout is to set the number of columns to display. This is handled using the column-count property. This property takes one of three values: a numeric value, auto and inherit. The numeric value allows you to set a specific number of columns to be displayed. The auto value leaves the browser to determine how many columns are to be displayed, and is used in conjunction with the values present for the column-width and column-gap properties. The inherit value takes on whatever parent value for column-count may already be present. Not surprisingly, the default value for column-count is 1, which equates the width of the browser window to a column.

The following code fragment shows how you could set three columns to a div element:

Visual Filters in Internet Explorer

Beginning with Internet Explorer 4, Microsoft began adding a number of programmable visual filter and transition effects to their browser. In fact these new extensions were to be the first CSS-based extension that Microsoft added to their browser. Depending on the filter, their effects can either be modified programmatically via JavaScript, or can be added using CSS elements on a given Web object.

In practice, filters and transitions have seen relatively little use on the Web, as their display properties are exclusive to Internet Explorer, and their effects can be dramatic enough that a page must be viewed using Internet Explorer in order for its content to be readable — in other words, they don't make for browser-compatible code. Having said that, if you are confident that your audience is composed largely of Internet Explorer users — say, on a corporate intranet — or are willing to customize your code on a browser-by-browser basis, you can use these filters and transitions to good effect.

Visual filters and transitions differ from regular CSS properties in that they require the full program code prior to the name of the filter, so the code specified for the Alpha filter actually looks something like this code snippet:

filter: progid:DXImageTransform.Microsoft.Alpha

A given filter's values are further modified by enclosing its values in parentheses, separated by commas, as you can see from the following code snippet:

(Opacity=100,FinishOpacity=0, Style=1, StartX=0, FinishX=0,
StartY=0, FinishY=100)

At this point you may well be thinking that this is really beginning to stretch the boundaries of CSS, and frankly, you'd be right. In some cases the properties rely upon JavaScript to make them work, so they don't fit the mold of your typical static CSS property used to make some text look nice on a Web page.

Internet Explorer 4.x introduced over a dozen visual filters. All of these original filters were superceded or expanded upon by the release of Internet Explorer 5.5, when Microsoft took the opportunity to rationalize and greatly expand the filtering and transition capabilities within the browser, deprecating several of these earlier filter types in the process.

There are two classes of filters: static filters and transitional filters. The static filters are not always so static, as you will see from some of the examples in this chapter, but their often dynamic effects are rendered on a single selected object. The transition filters are all designed to produce interesting "wipes," slowly revealing new content over the old. This chapter provides an overview of what's available.

Visual Filters in Internet Explorer

Beginning with Internet Explorer 4, Microsoft began adding a number of programmable visual filter and transition effects to their browser. In fact these new extensions were to be the first CSS-based extension that Microsoft added to their browser. Depending on the filter, their effects can either be modified programmatically via JavaScript, or can be added using CSS elements on a given Web object.

In practice, filters and transitions have seen relatively little use on the Web, as their display properties are exclusive to Internet Explorer, and their effects can be dramatic enough that a page must be viewed using Internet Explorer in order for its content to be readable — in other words, they don't make for browser-compatible code. Having said that, if you are confident that your audience is composed largely of Internet Explorer users — say, on a corporate intranet — or are willing to customize your code on a browser-by-browser basis, you can use these filters and transitions to good effect.

Visual filters and transitions differ from regular CSS properties in that they require the full program code prior to the name of the filter, so the code specified for the Alpha filter actually looks something like this code snippet:

filter: progid:DXImageTransform.Microsoft.Alpha

A given filter's values are further modified by enclosing its values in parentheses, separated by commas, as you can see from the following code snippet:

(Opacity=100,FinishOpacity=0, Style=1, StartX=0, FinishX=0,
StartY=0, FinishY=100)

At this point you may well be thinking that this is really beginning to stretch the boundaries of CSS, and frankly, you'd be right. In some cases the properties rely upon JavaScript to make them work, so they don't fit the mold of your typical static CSS property used to make some text look nice on a Web page.

Internet Explorer 4.x introduced over a dozen visual filters. All of these original filters were superceded or expanded upon by the release of Internet Explorer 5.5, when Microsoft took the opportunity to rationalize and greatly expand the filtering and transition capabilities within the browser, deprecating several of these earlier filter types in the process.

There are two classes of filters: static filters and transitional filters. The static filters are not always so static, as you will see from some of the examples in this chapter, but their often dynamic effects are rendered on a single selected object. The transition filters are all designed to produce interesting "wipes," slowly revealing new content over the old. This chapter provides an overview of what's available.

Internet Explorer 4.x

Microsoft greatly extended CSS compatibility within the initial 4.x version of Internet Explorer. This version of Internet Explorer was the first to show that a major browser vendor was serious about implementing CSS.

This version of Internet Explorer was not without its drawbacks, however. While it supported much of the background, border, font, margin, list and padding CSS element families at least partially, it could not support a number of other elements, such as display or clear/float in the Macintosh version at all. There were also some minor variances worth noting in the ways the browser implemented the same CSS elements across different operating systems. Problems implementing the text-align property have been noted, as have more general problems when implementing some basic CSS functions, such as containment, inheritance and dealing with certain length units.

This version of Internet Explorer has subsequently been superceded by versions 5.x and 6.x, and the vast majority of Internet Explorer users now use one of these later releases. However, it is worthwhile keeping its limitations in mind for those few users who may still be using it.

Microsoft's tendency to start adding their own browser-specific CSS properties began with this release of Internet Explorer. The filter property was added to this version, enabling Web authors to add a number of transitioning effects . Compared to later versions of the browser, this was a relatively minor addition, but arguably started a trend towards adding fresh browser-specific properties in future versions of Internet Explorer.

Another interesting development with this version of the browser was that it implemented — at least partially — some positioning properties (like top, left and vertical-align) which were being considered at the time for inclusion for the CSS2 specification, which was in a draft status at the time. Microsoft was truly looking forward with this development, though it would take version 5.5 before CSS2 properties were substantially supported.

Internet Explorer 3.x

Internet Explorer 3.x was the first major browser to implement CSS, although only in a rudimentary fashion. It did not implement many CSS properties, and those that were implemented were rarely implemented fully. Very few people use Internet Explorer 3.x today, so it is probably not worthwhile to try and design pages that would look good in it. This is just as well, since designing Web pages that use the few CSS properties implemented in Internet Explorer 3.x is pretty much an exercise in frustration, anyway. In short, don't plan on designing a CSS-oriented Web site that has to be "safe" for whatever Internet Explorer 3.x users are still out there.

For this reason, in the summary listing of "safe" and "unsafe" elements provided at the end of this book, Internet Explorer 3.x is not included, as it would render too many CSS elements as "unsafe."

The <style> Element

As we saw in the initial CSS example, it is possible to add CSS code within the header of a Web page. This is done by using the <style> element, which is used to set CSS properties to a Web element that is applied to the whole of a Web document.

The <style> element is always contained within the header of a Web page, and unless overridden elsewhere in the Web page, its effects are applied globally to the selected HTML elements contained within it.

The <style> element has several attributes: accesskey, dir, disabled, lang, language, media, tabindex, title, and type, all of which are optional — and frankly, only a few of which are used routinely in practice. It is important to know the values of the attributes in those cases where it may be useful, however.

The accesskey attribute enables Web authors to assign a keyboard key to the <style> element. This keyboard "shortcut" enables the user to hit ALT plus the designated key which then selects the element.

The dir attribute is a standard HTML attribute that sets the text direction, and can take the values ltr and rtl (for "left-to-right" and "right-to-left," respectively). This does not necessarily switch the direction for displayed text, but instead is there to tell the browser which way it is meant to be read.

The disabled attribute — which is an unofficial attribute for <style> and is only supported within Internet Explorer version 4.0 and higher — indicates that the particular CSS function should not be "enabled" (in other words, that its effects should not be displayed). This is for use in circumstances where you may wish to disable the CSS formatting display in a particular place on the Web page. If you use this particular attribute, the content associated with the selected element is still displayed, but is not formatted in the CSS style indicated.

lang is another standard HTML attribute, and is used to set the language code (i.e., "english" or "french"). Internet Explorer 4.0 and up add an additional language attribute, which associates the element with a scripting language (like JavaScript or VBScript).

The media attribute is used to specify the type of medium for which the CSS formatting is to be used. There are nine distinct values: all, aural, braille, handheld, print, projection, screen, tv and tty, each reflecting the different types of media the Web page can be "viewed" in. The default value is screen (i.e., a computer screen). If a device exists to translate the Web page into a different medium (such as a digital video projector for the projection value, or a Palm device for the handheld value), the device will use the CSS elements associated with the particular style used for it. Actual support for most of these attributes has always been spotty, and on the whole you are probably better off trying to tailor your code for specific devices if you expect heavy use in these other media displays. (Also, as we will see, there are a number of media types called by the @media "at-rule" which accomplishes much the same thing, and is much more flexible.

tabindex is another accessibility attribute (like accesskey), and in this case it sets the tab order for the element. This relates to the order in which selectable elements on a page can be accessed when you hit the tab key repeatedly. Normally, when you do this, elements are selected in order from the top of the page to the bottom. But when you set an integer value to tabindex, you can interrupt this flow and make the element it is associated with either a priority tab-able item or not.

The type attribute simply specifies the MIME type contained by the <style> element. There are two possible values for this at the moment: "text/css", which applies to CSS, and "text/javascript", which applies to JavaScript code. For the most part, the text/css value is simply assumed, and the two major browsers do not have any problems interpreting CSS code when this value is not present. This attribute is widely recognized in all major browsers.

There used to be a common recommendation to surround the style element with comment elements (i.e., "<!--" and "-->") in case older browsers which do not recognize the element display the content contained within them. This concern is pretty much a thing of the past these days, and if you are truly concerned about your CSS code being displayed in an older browser, it's old enough so that you wouldn't seriously be coding CSS for it anyway.

<style> and CSS3

The CSS3 specification has introduced some interesting variations for the <style> element. These variations greatly extend the uses to which this element can be used for adding CSS code to a page. When adopted by browser manufacturers, they will enable Web authors to add code directly to the style attribute that otherwise would have had to have been added to the header of a Web page — greatly increasing coding flexibility. Say, for example, you are working with a standard template file for a Web site that contains the HTML header, and you either don't have ready access to changing it, or don't want to add code to the header of a page when you only intend to implement a single formatting instance limited to a single page. This would be a situation where the CSS3 extensions to the <style> element would help you out of a potential jam.

The first variant allows Web authors to add pseudo-elements to a particular Web element. Curly braces are wrapped around the "standard" CSS properties for a given element, and then the pseudo-element code is added, and the CSS properties associated with the pseudo-element are similarly wrapped in curly braces. The following code snippet makes this clear:

<p style="{background-color: black; color: white} 

::first-letter 

{color: red}">Some sample text</p>

(Note that in CSS3 double colons are recommended over single colons for pseudo-elements, hence "::first-letter" instead of ":first-letter"). Pseudo-elements are covered in detail in Chapter 7, "Pseudo-Elements, Pseudo-Classes and Selectors."

The second variation allows you to set the display properties on a link — something that hitherto would have had to have been set either in the header of a page or in an external style sheet. Like the first variant, the CSS properties are wrapped in curly braces, as the following line of code shows:

Visit <a href="http://www.captmondo.com" 

style={color: navy}

:link {background: aqua}

:visited {background: red}

:hover {background: yellow}

:active {background: green}">captmondo.com</a>.

The third variation allows you to reference an external style sheet directly within an element. Again, this allows you to easily supercede any CSS code that may already be contained in the document, providing the flexibility of creating style sheets on an element-by-element basis if need be. The following line of code shows how this could be done:

<span style="@import url(funky.css)">

Funky-looking text</span> set 

against decidedly un-funky text.

Re-emergence of the Browser Wars?

One can justifiably ask about the relevancy of a "browser war" now that the major battles seem to have been handily won by Internet Explorer, which currently commands somewhere in the region of 90% of all browsers used. For many Web authors, it's no longer a matter of ensuring a Web site is compatible with all of the major browsers, but instead making sure that it is workable when used by the most recent versions of Internet Explorer. Knowing how to tailor pages to work best with this browser is knowledge most Web authors want to know.

Despite Internet Explorer's preponderance on the browser scene, it would be foolish to dismiss the existence of other browsers out there. In fact, it may be fair to say that the browser wars have simply entered a new phase, and CSS has become one of the battlegrounds as browser manufacturers add their own extensions to it. On the good side, it seems as though browser manufacturers have been converted to the potential of implementing as many of the officially sanctioned CSS properties as possible in order to win mind share amongst Web authors.

Starting with Internet Explorer 4.0 Microsoft has been adding their own extensions to CSS. Some of these CSS properties have later become recommendations under developing CSS specifications — such as Ruby — while others are wholly new properties that as yet have no parallel under the official W3C specifications, like the scrollbar formatting properties and transition filters. In all, over 40 cumulative CSS properties have been added to various versions of Internet Explorer, and these are all covered in detail in this book.

While the user base for such browsers as Netscape Navigator has been greatly diminished since the start of the browser wars, it is far from dead. In fact, with the deep pockets of AOL behind it as well as the collected efforts of the open source development community behind the Mozilla browser (whose code base has been going into versions of Netscape Navigator since version 6.0) it certainly should not be written off. It is interesting to note that Mozilla/Netscape have been adding their own CSS extensions within the releases of these twinned browsers — in fact a staggering 160+ CSS extensions have been added to various versions of these browsers. But for the most part these extensions are anticipations of developments of the CSS specification by the W3C, and they are also "unofficial" extensions, none of them officially documented (the extensions to Internet Explorer are well covered by Microsoft for aspiring developers). These extensions are not included in this book due to their ever-changing nature, and because for the most part they parallel developments in upcoming CSS specifications.

While its command of the browser market is relatively small, Opera is another browser that should not be ignored. While it has long been at the forefront of CSS compatibility, it has also introduced its own small subset of CSS extensions — so far, three in total (again, they are covered in this book). Though Opera has a small user base when compared to Internet Explorer, the company that produces it has been aggressively pushing it for use in forthcoming portable hardware browsers, and it is also available under a wide variety of operating systems.

Though versions of Internet Explorer are available for various releases of Microsoft Windows as well as the Macintosh OS, there is no version of it available for the increasingly popular Linux operating system — nor is there likely to be in the foreseeable future. There are a number of different browsers available for this operating system, including Opera and Netscape Navigator, as well as Linux-only browsers such as Galleon, Emacspeak and Konqueror. Many of these browsers have good-to-excellent support for CSS, though thankfully none of them seem to have added their own CSS extensions. Taken together, they may represent a small portion of the browsers used to visit your Web site, but they too are worth noting, if only for the ways they implement CSS — sometimes, like Emacspeak, they are well in advance of other leading browsers.

It is probably too early to say whether or not the browser wars are over, since it seems likely that they are entering a new phase — one in which the operating system or hardware platform is likely to prove as important for Web authors to consider as browser-specific extensions belonging to any one browser. No matter how you look at it, CSS compatibility has become a real factor in garnering mind share amongst the user base and with Web authors. Greater adoption of CSS properties within the major browsers means that today's Webmasters can no longer afford to overlook using CSS as an integral part of their Web site designs.

One thing is clear: CSS is here to stay. The more you know about how to use it effectively, the more professional you and your Web site designs will be.

The World Wide Web Consortium Introduces Cascading Style Sheets

Tim Berners-Lee created the Web at CERN, and the initial standards for HTML 1.0 and HTML 2.0 were governed by them. But CERN's main focus is particle physics research, not the Web, and so in 1994 CERN abdicated its role as the standards-setting body for HTML. It passed the torch to a newly created body called the World Wide Web Consortium, better known simply as "W3C." The W3C has convinced major software companies, including Netscape Communications, Microsoft, IBM, Novell, Sun Microsystems and many more, to become members of this standards body. This arrangement provides the software firms with lines of communication to other member firms and to a body recognized as authoritative in the devising and setting of a workable standard for HTML.

The W3C is designed to be a neutral meeting ground, where competing companies can come together to contribute to and comply with future Web standards. The W3C recognized the need to bring some stability to HTML, as the multiple tags introduced during the "browser wars" threatened to introduce widespread incompatibilities into working HTML. The W3C tried to consolidate existing HTML standards, first with the official HTML 3.2 specification, later with the HTML 4.0, and most recently the XHTML 1.0 specification and the XHTML 1.1 recommendation. These specifications adopted many of the HTML tags made popular in both Internet Explorer and Netscape Navigator, even though these tags often failed to conform to one of HTML's main guiding principles: that markup should reflect the structure of a document rather than its physical layout.

HTML was originally designed with the intention of displaying the logical structure of a document, as opposed to dealing with the finer issues of formatting text and image layout. This was done because there are many different varieties of computers out there, and they could not be expected to display content in exactly the same way. By defining logical constants as the basis for Web documents, it was left up to the Web browser programmer to create software that could adequately represent these structures in a way that would look best under a particular computer or a specific operating system. In this way, HTML was designed to be as widely compatible with as many computer platforms as possible.

But much of the drive by the browser manufacturers to provide Webmasters with proprietary tags was spurred by Webmasters' demand for better control over the layout of elements on a Web page, similar to what already exists in desktop publishing programs. Over time, however, these extra tags have increased the overall complexity of Web pages, in addition to producing many Web sites along the way that could not be viewed properly when viewed under the "wrong" browser. The HTML 4.0 specification in particular tried to consolidate the existing state of HTML at that point in time, but it was felt that action had to be taken in order to curb the development of further HTML tags by the browser manufacturers.

Thus the idea of Cascading Style Sheets (CSS) was born.

CSS is an effort by the W3C to minimize the need for the introduction of new physical formatting tags (such as the font or table tags) by browser manufacturers — chiefly Microsoft and Netscape — by making such tags unnecessary. CSS is a compromise, providing the page layout features that Webmasters want by adding CSS formatting elements to existing HTML tags.

CSS retains much of the logical structure of a Web page while delivering many of the page layout features in a way that is easy to understand and powerful in the effects it produces. Under currently implemented CSS, it is possible to do the following on a Web page:

• specify the exact point size of text

• add indentations to text

• set margins within a Web page

• add new formatting elements to a Web page, such as borders around text

• use such measurement units as inches and centimeters to set precise sizes for text or images displayed on a Web page

• create a distinctive style for individual Web pages or sets of Web pages

• change the fundamental way a tag is supposed to be displayed onscreen

• precisely lay out text, images and other objects using absolute screen references

• set precisely where a background image is displayed, and whether it should be repeated across or down a Web page

• alter the spacing between letters, between words or lines of text, and much more

CSS's long list of features provides many of the page layout and typographical functions Webmasters have been looking for, although it still provides less layout or typographic control than desktop publishing programs. CSS is really a mechanism for modifying how content is displayed on a Web page, and is not designed as a comprehensive layout tool. Despite this, CSS provides Webmasters much finer control over where and how things appear on a Web page than can be achieved using regular HTML.