Script, Tutorial, Free, CSS, Design: Setting a Simple Initial Cap

Script, Tutorial, Free, CSS, Design

Script, Tutorial, Free, CSS, Design

Monday, April 16, 2007

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.

AddThis Social Bookmark Button

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]


<< Home