0% found this document useful (0 votes)
3 views

How_To_Style_Your_Text_With_CSS

ok
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
3 views

How_To_Style_Your_Text_With_CSS

ok
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

Title:

How To Style Your Text With CSS

Word Count:
231

Summary:
There used to be the font tags. Today, things have changed. Find out how CSS can
help you style your fonts at ease.

Keywords:
CSS, Cascading Stylesheets, Stylesheets, Create CSS layout, CSS help, stylesheet,
style sheets

Article Body:
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.


<p> This is the text </p>

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:overline;
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!

You might also like