Styling Text With CSS
Lessons Covered


There are different properties that can be used in the formatting/styling of your texts. Text is contained within paragraph tags, heading tags and basically your entire html document. In this lesson we examine the properties that can be applied.



Color Property

The color property is one of the most often used properties in CSS. It is used to set the color of your text and can be used like this: 

p
{
color: red; <------ color property and value set to style paragraphs
}


The color value can be specified a number of ways. The most easiest method to remember is as shown in the example; by specifying the name of the color ( example red ). Other methods include specifying the rgb ( red, green, blue ) value [ example rgb(184,0,0) ] or specifying the hexadecimal value ( example #B80000 ).


Using the hexadecimal value of a shade of red:

style.css

#red-shade
{
color: #B80000;  
}



To specify the same red color by rgb value we could have:

style.css

#red-shade
{
color: rgb(184,0,0);  
}

arrow  Click to see result


The two examples above give the same shade of red. Unlike specifying the color name ( which is a fixed color ), the rgb and hexadecimal values can provide various shades of color. They provide a more precise range ( lighter and darker shades ) to select from. A color code chart can provide you with all the different available colors as well as their hexadecimal and rgb values.


Text-Align Property

The text-align property is used to center text. It can also be used to align the text to the left, right and even to justify the text. 

text-align: center; <------ text-align property with the center value


Applying the property to style level 5 headings in a style sheet:

style.css

h5
{
text-align: center;
}

arrow  Click to see result

The above center aligns any text placed between the level 5 heading tag in any document referencing this style sheet. Try changing the center value to left, right and justify to see the corresponding result.


Text-Indent Property

Whenever you start a new paragraph, it's not uncommon to have the first line of that paragraph begin some distance away from the margin. The text-indent property serves to provide an indent to the first line of text. The value for this property should be specified in pixels.

The format: 

text-indent: 37px; <----- paragraph set to begin 37 pixels from the margin


Applying this property to style paragraphs we get something like:

style.css

p
{
text-indent: 37px;
}

arrow  Click to see result


Text-Transform Property

The text-transform property sets the text to contain all capital letters ( CAPS ), all common ( no caps ) or to have the first letter of every word capitalized (Like This). The values for this property are: uppercase , lowercase and capitalize . The text-transform property is applied like this:

text-transform: uppercase; <----- text-transform property set to display all CAPS


In this example we set everything with the class capit to have the first letter displayed in caps:

style.css

.capit
{
text-transform: capitalize;
}

arrow  Click to see final result


Text-Decoration Property

With the text-decoration property you can underline text. If you have a link, you can use this property to remove the default line that you normally see under it. The values of the text-decoration property are the underline , line-through , overline and none .

The format follows: 

text-decoration: line-through; <----- This will put a line through the text


Applying the line-through value to a level 4 heading in a style sheet we could have: 

h4
{
text-decoration:  line-through; 
}

arrow  Click to see final result

Experiment with the other values for yourself and see the effect it has on the heading.


Previous Lesson Previous Lesson - Div & Span                             Next Lesson - Fonts Next Lesson