Snack's 1967

p _ x
Bookmark Weezywap
JarApkBmkOpera
(GMT+1)
Friday March 29th 2024
+
Always Post weezywap.xtgem.com on your facebook, twitter, 2go, whatsapp and instagram status! If you love WEEZYWAP and enjoy unlimited services here!
»Css Basics
You are viewing Chapter 18 of 18 Chapters for Css Basics/Tutorials. View all Chapters
Chapter 1: Introduction to CSS
Chapter 2: CSS Syntax
Chapter 3: CSS Classes
Chapter 4: CSS IDs
Chapter 5: CSS Divisions
Chapter 6: CSS Spans
Chapter 7: CSS Margins
Chapter 8: CSS Padding
Chapter 9: CSS Text Properties
Chapter 10: CSS Font Properties
Chapter 11: CSS Anchors, Links and Pseudo Classes
Chapter 12: CSS Backgrounds
Chapter 13: CSS Borders
Chapter 14: CSS Ordered & Unordered Lists
Chapter 15: CSS Width and Height Properties
Chapter 16: CSS Classification
Chapter 17: CSS Positioning
Chapter 18: CSS Pseudo Elements
Chapter 18: CSS Pseudo Elements

The Syntax
The syntax for pseudo elements is a bit different than that of regular CSS, but it's real close. If you have already read chapter 11 then you are slightly ahead of the game.

selector:pseudo-element {property: value}

As you can see the only difference is that you place the pseudo element after the selector, and divide the 2 with a (:) colon.
Or you can assign a class to a pseudo element as follows

selector.p:pseudo-element {property: value}

Using the above code would style all paragraphs within the declared selector with the pseudo element.



The elements:
first-line
first-letter



First Line
The first-line pseudo element styles the first line of text in a block level element.

p{font-size: small;}
p:first-line {font-size: medium; color: #ff0000;}


As you can see in the above example paragraphs are set to be a small font size, but the p:first-line is set to be a medium size and a red color. The result is that the first line of all paragraphs will be red in color and a bit larger than the rest of the paragraph.
Though lets say you only want to style a certain paragraph of text with the first-line element. Thats where declaring a class to the pseudo element comes into play.

first -line with class

p.special:first-line {font-size: medium; color: #ff0000;}

I have declared a class of special within my css file.

First-Line Example

This is a special sentence I wrote to demonstrate the use and look of the first-line pseudo element. As you can see the first line of this paragraph is styled differently than the rest of the text within it. All of this was done by simply adding class="special" to the opening <p> tag for this paragraph.



<p class="special">the content</p>

Where the first-line ends depends on the width of the browser window or containing element, you can resize this page and see that it adjusts as you change the size of the browser window.
The following properties can be assigned to the first-line pseudo element:

background
clear
color
font
letter-spacing
line-height
text-decoration
text-transform
vertical-align
word-spacing



First Letter
The first-letter pseudo element styles the first letter of text in a block level element.

p{font-size: small;}
p:first-letter {font-size: medium; color: #ff0000;}


As you can see in the above example paragraphs are set to be a small font size, but the p:first-letter is set to be a medium size and a red color. The result is that the first letter of all paragraphs will be red in color and a bit larger than the rest of the paragraph.
Though lets say you only want to style a certain paragraph of text with the first-letter element. Thats where declaring a class to the pseudo element comes into play.

first -letter with class

p.special_letter:first-letter {font-size: x-large; font-weight:
bold; color: #ff0000;}


I have declared a class of special_letter within my css file.

First-Letter Example

This is a special sentence I wrote to demonstrate the use and look of the first-letter pseudo element. As you can see the first letter of this paragraph is styled differently than the rest of the characters within it. All of this was done by simply adding class="special_letter" to the opening <p> tag for this paragraph.

<p class="special_letter">the content</p>

The following properties can be assigned to the first-letter pseudo element:

background
border
clear
color
float
font
line-height
margin
padding
text-decoration
text-transform
word-spacing

CONTENT © 2016 WEEZYWAP™
« Previous

Translate
Pages
Copyright © 2024 WEEZYWAP
facebook twitter whatsapp google plus
Home | About Us | Advertise | Frequently Asked Question | Contact Us | Partners | Disclaimer | Terms of Services | Invite Friends | Credits



Online: 1 , Today: 3, Hits: 32684
Last modified: 19-01-2017 9:11:03 pm