CSS “first-letter” and “first-line” Example

Perm url with updates: http://xahlee.org/js/ex_css_match_tag_content.html

CSS “first-letter” and “first-line” Example

Xah Lee, 2005-11, 2010-08-10

This page is a tutorial of using CSS “first-letter” and “first-line”, to make the first letter of a paragraph stand out.

Here's a example:

O toiler through the glooms of night in peril and in pain,
Thy toiling stint for daily bread comes not by might and main!
Seest thou not the fisher seek afloat upon the sea
His bread, while glimmer stars of night as set in tangled skein?
Anon he plungeth in despite the buffet of the waves,
The while to sight the bellying net his eager glances strain,
Till joying at the night's success, a fish he bringeth home
Whose gullet by the hook of Fate was caught and cut in twain.
When buys that fish of him a man who spent the hours of night
Reckless of cold and wet and gloom in ease and comfort fain,
Laud to the Lord who gives to this, to that denies, his wishes
And dooms one toil and catch the prey and other eat the fishes.

From: The Fisherman And The Jinni.

Here's the HTML markup:

<div class="xx">
<p>O toiler through the glooms of night in peril and in pain,<br>
Thy toiling stint for daily bread comes not by might and main!<br>
...
</p>
</div>

Here's the CSS markup:

div.xx > p:first-letter {color:red;font-size:xx-large}
div.xx > p:first-line {color:blue}

In the CSS, the “div.xx > p” means all “p” tags under the “div” tag of class “xx”.

Popular posts from this blog

11 Years of Writing About Emacs

does md5 creates more randomness?

Google Code shutting down, future of ErgoEmacs