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