More CSS Decorations – CSS Tutorial 4

Let’s continue with our cascading style sheets properties and values.

word-spacing
<p style=”word-spacing:20px”>
<p style=”word-spacing:-0.4px”>

This sets the distance between words. I can hear you saying, “Nooooo”, haha, Yes, it is! Choose between normal, which is default or set a length. It is possible to use a negative number here to crunch the words together or overlap.


letter-spacing

<p style=”letter-spacing:10px”>
<p style=”letter-spacing:-0.4px”>

I know, I know. Obvious huh? As with the word-spacing, you can also use a negative number to crunch the letters together, while leaving the distance between words the same, unless you specified that to be different.

text-decoration
<p style=”text-decoration:line-through”>

Guess what this one does. Bingo! It decorates the text. Choose from any of the options below, which I think are pretty self explanatory. If you were working in a section of underlined text, you could use the “none” tag to flip out of it for a bit.

none
Default decoration. Text has no special decorations like below.

underline
Creates a line underneath the text, like hyperlinked text.

overline
The opposite of underlined. One of our evil programmers had dyslexia and nobody had the heart to tell him so they just left this one in.

line-through
Creates a line through the middle of the text. This is a mandatory decoration for internet marketing because product prices, days left and copies available fluctuate on a minute to minute basis. This allows you to quickly cross out the $29.99 and list it for $19.99, but only for 8 hours, 4 hours, 2 more hours but you better hurry ’cause there’s only 12, 8, 5, 2, 1 copies left!

blink
Doesn’t work in IE or Opera, so why even use it??

subliminal
Creates an unconscious reaction to the text on your page, forcing the surfer to follow your instructions without question. Ok, I made that one up, there’s no such value! Don’t we wish!!

text-transform
<p style=”text-transform:capitalize”>

Finally, one that is not so obvious! Here you can set all characters to all caps, 1st letter of each word caps, no caps, etc..

none
Default, will appear as it is typed. If you were working in an all caps section you could flip out of it for the specified text and it would resume when this tag was closed.

capitalize
Use this to capitalize the first letter of each word

uppercase
Set all letters to caps

lowercase
All letters are lowercase, no caps

text-align
<p style=”text-align:center”>

Determine how the text is to be aligned. You can select from left, right, center and justify. Left is the default and will be how it is displayed if this property is not set, depending on the surfers browser or any other specifications set in your internal or external style sheets.

text-indent
<p style=”text-indent:15px”>
<p style=”text-indent:-15px”>

Set either the length or percent. You can use a negative number here. If you have other text, table or pictures to the side, this can place the text on top of it.

Now, let’s take another break, shall we?
In the next issue, we’ll discover some more font properties and more CSS power.




Share this post using these icons:
Facebooktwittergoogle_pluslinkedinmail

Related Posts

 

One thought on “More CSS Decorations – CSS Tutorial 4

  1. Hi Stephen,
    You’re absolutely correct.
    Didn’t change that one during copy and paste process.
    Thanks for the heads up.

Comments are closed.