Script, Tutorial, Free, CSS, Design

Setting an Initial Cap with Decoration (Imagery)

2007-04-16T03:17:00.000-07:00

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:

Online, 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...

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:

<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...

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

2007-04-16T03:15:00.002-07:00

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

2007-04-16T03:15:00.001-07:00

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

2007-04-16T03:07:00.000-07:00

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

2007-04-14T10:11:00.003-07:00

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

2007-04-14T10:11:00.001-07:00

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

2007-04-14T10:10:00.000-07:00

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

2007-04-14T09:34:00.001-07:00

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

2007-04-14T09:31:00.000-07:00

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

2007-04-14T09:30:00.001-07:00

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

2007-04-14T09:15:00.001-07:00

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

2007-04-14T09:14:00.000-07:00

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

2007-04-14T09:13:00.000-07:00

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

2007-04-14T09:04:00.000-07:00

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)

Internet Explorer 4.x

2007-04-14T09:03:00.001-07:00

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

2007-04-14T09:02:00.000-07:00

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."