(traditional way)
1.Mark the paragraph of content with p element.
Online, activity of exchanging ideas is sped up.
2.Use the pseudo-element : first-letter
p:first-letter{
font-size:1.2em;
background-color:black;
color:white;
}
(result:increased font size with black background)
OR
1.wrap a span element with a class attribute around the first element.
Online, activity of exchanging ideas is sped up.
2.Set the style
p.initcap
{
font-size:1.2em;
background-color:black;
color:white;
}
2.Setting a Larger, Centered Initial Cap
To place a large initial cap at the center of the paragraph.
1.wrap a span element with a class attribute around the first element.
Online, activity of exchanging ideas is sped up.
2.set style
p{
text-indent:37%; //moves fist line toward the middle of the paragraph. 37% is little more than 1/3
line-height:1em;
}
p.initcap
{
font-size:6em; //makes font 6 times(600%) larger than default size.
line-height:0.6em;/*since font -size is 6 times larger as the rest of the type, the leading on the first line is now deeper than it is on the remaining lines. So adjust it*/
font-weight:bold;
}
Adjust values based on letter of initcap and width of paragraph.
3.Setting Initial cap with decoration( imagery)
1.wrap a span element with a class attribute around the first element.
Online, activity of exchanging ideas is sped up.
2.set style
p.initcap
{
display:none;//hide first letter of html
}
create image and make a note of width n height say 35px by 45px
set the image
p
{
line-height:1em;
background-image:url(initcap-o.gif);//put image
background-repeat:no-repeat;//no repeatition.
text-indent:45px; //width of image
padding-top:35px; //height of image.
}
Adjust value of text-indent and padding -top values so that the initial cap appears to rest on the baseline.
No comments:
Post a Comment