How To Style Your Text With CSS Keyword Discovery
Get our FREE SEO Guide
Subscribe to our newsletter to receive useful SEO tips, tricks, strategies, free ebooks that are available only to our subscribers and get this amazing SEO guide for free!

Your email is safe and will NEVER be shared with any other parties. And of course, you can unsubscribe at any time.

Name:
Email:
SEO Elite - #1 SEO Software

Who Else Wants To Finally Get A #1 Google Ranking In As Little As 7 Days... And Drive A Minimum Of 789 Unique Visitors To Your Websites Per Day?

Super Affiliate Wizard - 100 magical ways to increase your affiliate comissions

A must for every affiliate marketer - top 100 ways to increase your affiliate commissions

Only $9.95
Coming soon ...


Self SEO Store  
SEO forum
Website templates
Flash templates
Best hosting reviews.
Free Internet & IT Magazines.
Articles archive

Submit your article

Register
Login

Search
XML news feeds
Free RSS news reader
Contact


AddThis Feed Button

How To Style Your Text With CSS

Posted by Hilco van der Meer on: 2006-05-09 21:45:39

Self SEO > Web Development Articles


Styling text with CSS is really simple. We can define colors, underline it, make it bold, define the font etc etc.


We will start with some basics.

First we define the html where we will be working with.

This is the text



1. Colorize your text

We can select the P tag and add some styles to it.
p {
color:red;
}

Now our text will turn red. You can define any color code your want or choose one of the 16 standard color names. The color names are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow.

2. Define the size of your text
p {
font-size:12px;
}

You can define any font-size you want, 145 pixels is not a problem. That is, technically speaking.

3. Make the text bold or Italic
You can use the font-style property to create these effects.

Bold:
p {
font-weight:bold;
}

Italic
p {
font-style:italic;
}

4. Overline, Underline, strike-through and none

The text-decoration property is useful to create the underline and the other effects we need.
p {
text-decoration:underline;
text-decoration:line-through;
text-decoration verline;
text-decoration:none;
}

On default, the text doesn’t have any lines at all. Except for the link. You can remove the underline by using the text-decoration:none; setting.

You see, it’s quite easy to style your text using CSS. And you can do it all in a separate stylesheet!
Hilco van der Meer is known as the author of the How To Master CSS Course and is a web developer for over 5 years now. His blog can be found at http://www.DutchDesign.org. The course contains a Real-Time CSS Editor to practice in real-time with the CSS codes, a complete step-by-step guide and the informative Training Videos. For more information you can visit: http://www.HowToMasterCSS.com




Print this article    Tell a friend
Related Articles

Post New Comment

This site does not allow anonymous comments. Registered members can login to participate. Registration is free and takes only a few seconds