XHTML and CSS - Pseudo Elements
Pseudo Elements
In this tutorial we're going to be looking at pseudo elements, pseudo elements are basically just pieces of other elements. A example of a pseudo element could be the first line of that paragraph or if you had a header it could be the first letter of that header. Let's make 3 paragraphs and style the first letter of each paragraph using pseudo elements, first we need to make 3 paragraphs and add some random text.
<html> <head> <title> This is the title. </title> <style type="text/css"> </style> </head> <body> <p>Random Text In paragraph one.</p> <p>Random Text In paragraph two.</p> <p>Random Text In paragraph three.<p> </body> </html>
When you view that in your browser it'll just look like 3 normal paragraphs, now let's change the pseudo element of all of the paragraphs. Pseudo elements have built into CSS, here are the pseudo elements we can choose from.
  • after
  • before
  • first-letter
  • first-line
  • selection
  • backdrop
In this tutorial we'll just be using the first-letter pseudo element, to do that we first need the select the property we want to apply the pseudo element to, then a colon and then the pseudo element we want to use.
<html> <head> <title> This is the title. </title> <style type="text/css"> p:first-letter { } </style> </head> <body> <p>Random Text In paragraph one.</p> <p>Random Text In paragraph two.</p> <p>Random Text In paragraph three.<p> </body> </html>
All I'm going to do is change the font size to 25 pixels and the color to green.
<html> <head> <title> This is the title. </title> <style type="text/css"> p:first-letter { font-size: 25px; color: green; } </style> </head> <body> <p>Random Text In paragraph one.</p> <p>Random Text In paragraph two.</p> <p>Random Text In paragraph three.<p> </body> </html>
You'll now see that the color and the size of the first letters of our paragraphs has changed.

Page generated in 0.0065 seconds.