This is a continuation of Basics of CSS 2 (obviously) but it's really just the continuation of common properties and their values that we are able to use! So without further to do...

Text Property

The text property can be easily confused with the font property. Do not get confused! The text property is for the actual characters you see. The text property treats all text as individual characters where as the font property is for font types, font size, font weight, etc.. So let us see these properties already!

Text Color

How do we change text color? In Basics of CSS - Part # 2 there was that fancy area where all the text was a different color (if you didn't see then click here to see).

It was very simple actually. All that was used was some inline CSS and an HTML elements called span that is, by default, an empty element (it does nothing unless you tell it to in CSS).

<span style="color:red">red text</span>
<span style="color:#3333FF">blue text</span>
<span style="color:rgb(51,255,0)">green text</span>

This example would make the text like so: red text, blue text, green text. Cleverly, the colors red, blue, and green were chosen. Like the background property as seen in the Basics of CSS - Part # 2, we have the ability to use color names, hex color codes, and rgb decimal values.

As with all CSS properties, we can narrow where we want the color. Let us say we want one color for all h3 elements and another color for all h2 elements.

h2 {color:blue;}
h3 {color:#470b0b;}

text-align

How do we align text in CSS? We know how you might do it in HTML but you like CSS better and having to add align="center" is a pain... And what if we wanted the text a different color for each alignment?

The solution is very simple! Let us assume we want a dark green color for all text that is aligned to the right, a dark blue color for all text aligned in the center, and a dark red color for all text aligned to the left. Our CSS will be as such:

.right {
     text-align:right;
     color:#006600;
}

.center {
     text-align:center;
     color:#000066;
}

.left {
     text-align:left;
     color:#660000;
}

These are global classes which means they can apply to any HTML element. Consider the following:

<h3 class="center">Dark blue Heading that is aligned center!</h3>
<p class="right">Dark green text that is aligned right!</h3>
<div class="left">
   <ul>
      <li>list</li>
      <li>list</li>
   </ul>
</div>

Using those "global" classes in CSS we are able to use them for any HTML element we want. So if you're intending to use a class for more than one element, this is the approach that is the easiest.

text-decoration

Text decoration isn't as artsy as it may sound. With the text-decoration property you have the ability to underline, overline, strikethrough, and a weird value called blink. Note: the blink value DOES NOT work in IE, Chrome, or Safari; if you have one of these browsers the blink example will look like regular text and will not blink. Using this property is still in the same fashion as using any other CSS property. Example:

.underline {text-decoration:underline;}
p.strikethrough {text-decoration:line-through;}

How about some ketchup for your fries?

<p class="underline"> Underline text</p>
<h3 class="strikethrough">This is a bad heading</h3>

text-transform

The text transform can save you a lot of headaches if you're writing a formal document such as a Terms of Use, Terms of Service, Acceptable Use Policy, or Privacy Policy. Or even if you're simply writing some site rules for your blog or anything else of the like, this property can save you time.

So let us say you're writing your Terms of Service document for your web hosting company and you decide an entire section should be written in capital letters (Yes, I really used the property here). There are three values we can have for this property.

.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
h3.capitalize {text-transform:capitalize;}

Let us test these out! Here are some examples: here is some uppercase writing, HERE IS SOME LOWERCASE WRITING, and here is some capitalized writing, how fancy! You might have a hard time believing that what was used is Inline CSS... look in the source code of this article and you'll see how it was done! Here's what was done:

<span style="text-transform:uppercase;">here is some 
uppercase writing</span>
<span style="text-transform:lowercase;">HERE IS SOME 
LOWERCASE WRITING</span>
<span style="text-transform:capitalize;">here is some 
capitalized writing, how fancy!</span>

And there you have it! Some more general CSS properties that we can use! You can download a review or everything that was done in this tutorial I elaborated on justify inside of the html document, so if you're interested in justify then I recommend you download it.
css_basics3.zip
css_basics3.zip
Size: 1.9 KB

Be Sociable, Share!