Home arrow Style Sheets arrow Page 2 - CSS: Pseudo
STYLE SHEETS

CSS: Pseudo


We left off learning about the various positions in CSS. In this tutorial we will cover the pseudo classes and pseudo elements, which allow us to add special effects to our selectors. An example would be roll-over effects on hyperlinks, or making the first letter of a sentence larger and a different color than the rest of the text.

Author Info:
By: James Payne
Rating: 5 stars5 stars5 stars5 stars5 stars / 15
May 19, 2008
TABLE OF CONTENTS:
  1. · CSS: Pseudo
  2. · Dealing with the :first Line Pseudo Element
  3. · Pseudo Classes
  4. · A Preview of Mouse-over Effects

print this article
SEARCH DEVARTICLES

CSS: Pseudo - Dealing with the :first Line Pseudo Element
(Page 2 of 4 )

The :first line pseudo element is very similar to the :first letter pseudo element, as I am sure you nerdy rocket scientists have figured out. The difference is that with :first line, <insert M. Knight Shamalyan surprise ending here> the first well, line is affected. Duh. Here it is in code for you non-believers:


<html>

<head>

<style type="text/css">

p:first-line

{

color: blue;

font-variant: small-caps;

font-family: Impact;

font-size: xx-large

}

</style>

</head>

<body>

<p>

Coming to a theatre near you: JAMES PAYNE'S KNUCKLE SAMMICH!

Just when you thought it was safe to eat a sandwhich...

</html>

You can of course mix the :first letter/:first line like so:


<html>

<head>

<style type="text/css">

p:first-letter

{

color: yellow;

font-size:xx-large;

text-decoration: underline overline

}

p:first-line

{

color: purple;

font-family: impact

}

</style>

</head>

<body>

<p>

Not many people think to combine yellow and purple colors together; that's because they are idiots.</p>

</body>

</html>

The :first line properties that can be used are:

  • font properties

  • color properties

  • background properties

  • word-spacing

  • letter-spacing

  • text-decoration

  • vertical-align

  • text-transform

  • line-height

  • clear


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials