Untitled | WebReference

Untitled

When the Content is Fine by Itself

Next we will look at how to stylize the text of just the paragraph. In this particular set of examples, we will hide the text using property display set to the value of none.

h2 {	display: none;}

Example #1

Headline Example 1

For the first example, we will stylize the first letter of the paragraph. The initial capital of the paragraph will be blown to gigantic proportions and moved towards the center of the text.

p{	margin: 0;	padding: 0;	text-indent: 35%;	}p:first-letter{	font-size: 600%;	font-weight: bold;	line-height: 0.8em;}

Now let's see how this works: take a look at Headline 1.

The browsers Netscape Navigator 4, Windows Internet Exlorer 3-5 and Macintosh internet Explorer 4, however, don't render the pseudo-element, p:first-letter. To then make this effect work for those browsers you will need to replace the pseudo-element with a new class we will call .initialcap and modify the markup a bit like so:

p{	margin: 0;	padding: 0;	text-indent: 35%;}.initialcap{	font-size: 600%;	font-weight: bold;	line-height: 0.8em;}

And the markup for the paragraph would be this:

<p><span class="initialcap">L</span>orem  ipsum dolor sit amet, consetetur  sadipscing elitr, sed diam nonumy eirmod tempor  invidunt ut labore et dolore magna aliquyam erat,  sed diam voluptua. At vero eos et accusam et justo  duo dolores et ea rebum. Stet clita kasd gubergren,  no sea takimata sanctus est Lorem ipsum dolor sit  amet. Lorem ipsum dolor sit amet, consetetur  sadipscing elitr, sed diam nonumy eirmod tempor  invidunt ut labore et dolore magna aliquyam erat,  sed diam voluptua. At vero eos et accusam et justo  duo dolores et ea rebum. Stet clita kasd gubergren,  no sea takimata sanctus est Lorem ipsum dolor sit  amet. Lorem ipsum dolor sit amet, consetetur  sadipscing elitr, sed diam nonumy eirmod tempor  invidunt ut labore et dolore magna aliquyam erat,  sed diam voluptua. At vero eos et accusam et  justo duo dolores et ea rebum. Stet clita kasd  gubergren, no sea takimata sanctus est Lorem  ipsum dolor sit amet.</p>

Example #2

Headline Example 2

For this example, we will keep the initial capital but now enlarge, bold and capitalize all the letters of the first word. To achieve this effect we will need to agin modify the markup for the paragraph.

<p><span class="initialcap">L</span><span class="firstword">orem</span>  ipsum dolor sit amet, consetetur  sadipscing elitr, sed diam nonumy eirmod tempor  invidunt ut labore et dolore magna aliquyam erat,  sed diam voluptua. At vero eos et accusam et justo  duo dolores et ea rebum. Stet clita kasd gubergren,  no sea takimata sanctus est Lorem ipsum dolor sit  amet. Lorem ipsum dolor sit amet, consetetur  sadipscing elitr, sed diam nonumy eirmod tempor  invidunt ut labore et dolore magna aliquyam erat,  sed diam voluptua. At vero eos et accusam et justo  duo dolores et ea rebum. Stet clita kasd gubergren,  no sea takimata sanctus est Lorem ipsum dolor sit  amet. Lorem ipsum dolor sit amet, consetetur  sadipscing elitr, sed diam nonumy eirmod tempor  invidunt ut labore et dolore magna aliquyam erat,  sed diam voluptua. At vero eos et accusam et  justo duo dolores et ea rebum. Stet clita kasd  gubergren, no sea takimata sanctus est Lorem  ipsum dolor sit amet.</p>

Now that the paragraph is set, we need to set up the CSS like so:

p{	padding: 0;	margin: 0;	text-indent: 35%;}p:first-letter	{	font-size: 666%;	font-weight: bold;	line-height: 0.8em;}	.firstword	{	font-size: 1.5em; 	font-weight: bold;	line-height: 0.8em; 	text-transform: capitalize;}

Again, this example uses p:first-letter. So, if you want to make it work in most of the browsers you will need to switch out the psuedo-element for a new class like the method described in Example 1.

For a live example, take a look at Headline 2.