CSS Text Properties - Templates Lesson
So what's the difference between
text properties and
font
properties?
CSS identifies font properties as styles which control the size, style and
appearance of text.
Text properties control how text is aligned and presented on the page.
Text properties:
- line-height
- text-align
- text-indent
- text-decoration
- letter-spacing
- text-shadow
- vertical-align
- word-spacing
- text-transform
I will present the first 4 properties
line-height property
Use this property to control the vertical spacing between lines of text. Think of
it as a way to double space text on a web page. The CSS controls, allow you to fine tune the amount of space
between lines of text so the spacing can be 1.5, double, triple, etc. This space is referred to as "leading"
in the desktop publishing industry.
I access the mystyles document and add the P selector, the property
"line-height", and assign a value of "18px".
P {line-height:18px;}
Since my font-size for the BODY tag was 12px
a value of 18px will produce a slight separation (1 and 1/2 spaces) between each
line of text. It is not a double spaced presentation, however
it does make the text slightly more readable. If I want the double spaced look I
can increase the line height to 24px.
You can specify then line-height value with a number, unit or %. The 18px value is an example of a unit value
Here is how I use a value which is a number. By entering a value of "2" the browser will
automatically multiply the font-size value by 2. So 12 pixels with a line-height of "2" will produce a
24 pixel leading.
Finally a percentage setting of 250% will produce spacing which is equivalent to
2 and one half the line height (30 pixels).
text-align property
Using the text-align property allows you to control the horizontal alignment of
paragraphs.
Please Note this property only works with the <P>, <H1-H6>, <blockquote>, and <UL> tags
I open the "mystyles.css" document and locate the P selector. I insert the
"text-align" property and a value of "center".
P {text-align:center; line-height:18px.;}
I return to Netscape to view the
results. All of the text is aligning center which is a rather "icky" look, but when you are
experimenting with code its OK to make a mess.
As I change the value to "right" I see the text aligning along the right hand edge.
Still icky, but this alignment property will come in handy later on.
The most exciting aspect of the text-align property is assigning a value of
"justify". If I enter justify as the value text-align, I see that the text is justified
along the left and right hand margins.
Please note older versions of the Web browser do not support the justify
alignment and will default instead to left align.
text-indent property
Word processors make it easy to indent the first line of a paragraph, but this
has been a nightmare for Web designers. Developers either used non breaking
spaces, the invisible gif, or the list tag to create the illusion of a first
line indent. Most folks just stopped using this formatting style. Well first line
indent is back...
I return to the "mystyles.css" file and modify the P style by adding the property "text-indent" and a value
of "30px".
P {text-indent:30px; text-align:center; line-height:18px.;}
I save the file and then view my paragraphs in the browser.
I notice that the first line is indented on all paragraphs. I also notice
the browser indents each of the jokes and punch lines. Remember the power of CSS. Well
don't despair, I plan on removing this property once you have seen how it works.
text-decoration
Text decoration produces "well you guessed it" techniques for decorating text.
Values include underline, overline, line-through and blink (oh no blink is back).
In the H4 selector I add the text-decoration property and a value of
line-through
H4 {text-decoration:line-through; font-style:italic;}
Let's take a look. I wanted to achieve a look of crossing out the "move over pet rock" text, and that worked.
How do I want to remove the line-through from the phrase "there's a new pet in
town"?
I return to the "mystyles.css" file and locate the contextual selector of h4 and b
I enter the "line-through" property and assign a value of "none". This will remove the "line-through"
style from the second part of the phrase.
H4 B {text-decoration:none; font-weight:bold; font-style:normal; font-size:150%;}
Speaking of none lets use this setting to produce a trick my students have been
asking about for years. Many designers do not like the look of underlined links
and have been asking me how to turn off this feature.
In the mystyles document I have added the selectors for the link tag (A:link).
Next I include the declaration which includes the property "text-decoration" with
a value of "none".
A:link (text-decoration:none;}
Let's see if that works, well it does and it doesn't. I have inconsistent results,
the links are not underlined in Internet Explorer, however in Netscape 4.7 once I click on a
link the underlining returns. If this happens to you, here is how you fix it.
Add the selectors for active and visited links remembering to separate these
selectors with a comma.
A:link, A:visited, A:active (text-decoration:none;}
By adding this code all of my links will appear without the underlining.
Bye bye underline.
Please note that just because I am demonstrating this property does not imply I
recommend it. Folks who are real beginners or color blind may rely on the
underline feature to help them locate your links.
Well that concludes the text and font properties. You might want to take a
break, and try out these properties. There is so much code in this lesson, it's
hard to digest in one sitting.
Huma + text properties
The first line indent looks pretty funky, but I wanted you to see it in action.
Here is the "mystyles.css" file with text properties added, the text properties are underlined for clarity.
BODY{ font-family:Arial, Helvetica, sans-serif; font-size: 12px; }
P {text-indent:30px; text-align:justify; line-height:18px;}
H4 {text-decoration:line-through; font-style:italic;}
H4 B {text-decoration:none; font-weight:bold; font-style:normal; font-size:150%;}
TD { font-family:Arial, Helvetica, sans-serif; }
A:link, A:visited, A:active (text-decoration:none;}