HOME
          About US
          Contact Us

First Letter CSS Pseudo

14.3 First Letter CSS Pseudo : (Page 4/5)


(Cotinued from previous page)

ii) First Line Pseudo Element: This is used to give special effect to the first line of text. This is used with block level element and most prominently with 'p' element.

Let us say that your paragraph all first line should be of yellow color with size 12px
Command: p:first-line { color:yellow; font-size: 12px; }

In this case the 1st line of paragraph will have the above value and others line will have value defined by 'p' selector.
E.g. Let us say we have defined paragraph and first line in 'style sheet' as follows

p { color:blue; font-size:12px; }
p:first-line { color:brown; font-size: 16px; }
And in html file the command is

Command: (in HTML file):
<p> text 1 2 3 4 5 6 7 8 9 0 <br />
Text a b c d e f g h </p>

Output:
text 1 2 3 4 5 6 7 8 9 0
Text a b c d e f g h



iii) First Letter Pseudo Element: Just line 'first line pseudo element', this is used to give special effect to the first letter of text. This is used with block level element and most prominently with 'p' element.

Let us say that your first letter of text should be of Red color with size 15px
p:first-letter { color:red; font-size: 15px; }

iv) Before Pseudo Element: This is used to insert some content / before the actual content of an element.

If we want that '***' should appear before the all 'h1' tag

Command: h1:before { content:'***'; }
If you write following in HTML
Command: (in HTML file): <h1>Our Heading</h1>

Output: *** Our Heading

(Cont......... to next page (Pg-5))

First Letter CSS Pseudo © funandhobby.com (First Letter CSS Pseudo)