CSS Basic 104c:Text Properties Summary
Home Tutorials Reviews Weblog

Review: CSS focuses on Text/Print above all other media
Feature: Here we summarize some important Text properties and effects

CSS is really well tuned for providing properties and effects to help format and control text on your Web page. I have used most of these CSS text rules and stylings on this page. Unfortunately, IE as a browser still does not implement rules that are in the Core CSS book from 2000. For example, the web page will spill out over the 800 pixel width if the text-overflow tag is not properly implemented as in IE6. If youhave this and other CSS text problems, you may want to do a quick download of Firefox or Opera which my tests show do support almost all of the following properties and effects:

CSS Text Properties and Effects
before: pseudo element
allows adding content before every tag that uses it
div.befored:before{ content: "***VIPRule***"; background-color:#FF0000;}
after: pseudo element
allows adding content after every tag that uses it

div.afters:after{ content: url(images/csslogo.gif) " says Thats All Folks!"; background-color:#99FF00;}
first-letter: pseudo element allows creating a drop capital first letter in a text block, used on this page:
p :first-letter {font-size:36px; float:left; color:#990000;
- it should look like this:
first-line: pseudo element allows styling of the first line of a <p>, <blockquote>, <cite> or other text block demarking HTML tag, used on this page and in the example above:
p.initial:first-line {color: navy; font-weight:bolder;}
font-family Allows setting a priority list of fonts to be used in a text block
Serif fonts like Garamond, Georgia, Times New Roman etc.
Sans-serif fonts like Arial, Helvetica , Franklin etc.
Monospace fonts like Courier, New Courier etc.
Cursive fonts like Script, Mistral, Staccato etc.
Fantasy fonts like Castellar, Smudger, Whimsy etc.

Allows setting the font size in several ways:
larger | smaller. - relative to current inherited font size
xx-large - approximately 24points
x-large - approximately 17points
large - approximately13.5 points
medium - approximately 12points
small - approximately 10.5points
x-small - approximately 7.5points
xx-small - approximately 7points
0.50in - size in inches, 1 inch = 72pts
10mm - size in mms, 1 inch = 25.4mms
0.70cm - size in cms, 1 inch = 2.54cms
10pt - size in points, 1 inch = 72pts
2pc - size in picas, 1pc = 1/6th of an inch, = 12pts
1.25em - size in ems, 1em = 14pts
1.25ex - size in ex'es, 1ex =~ 7pts
10px - size in pixels, 1opx =~ 7pts

font-style allows styling for italic or oblique
This line has italic styling
This line has oblique styling, which seems to be italic again
font-variant allows for use of small-caps
This line is using , from here, Small-Caps
font-weight allows for use of various bolding styles
This line, from here is using bold
This line, from here is using bolder
This line, from here is using font-weight=300
This line, from here is using font-weight=600
This line, from here is using font-weight=900
text-align allows alignment (left | center | justify | right) of a text block, used in table:
.raligner {text-align:right; font-weight:bold;}
text-align-last allows alignment (left | center | justify | right) of the last line of a text block
text-decoration allows decorating text with underline, overline, line-through or none
.tdu {text-decoration: underline;}
.tdo {text-decoration: overline;}
.tdl {text-decoration: line-through;}

allows text indenting which only applies to the first line of a text block
.tindent {text-indent: 20px;}
allows indicating text overflow in a block. We are testing it here to see if this div block will be properly text overflowed. You should not see this 2nd line.
.toverflow {overflow:hidden; white-space:nowrap; text-overflow:ellipsis}


.tshadow {text-shadow:#000000 9 9 3; text-transform:uppercase;}
text-transform allows changing capitalization anywhere in the text (used here and in the dropshadow example above)
style="text-transform:uppercase; color:orange;"
Note that I was unable to get any browser to display the font-stretch (ultra-condensed to extra-expanded) property so it was not listed. Neither could I properly display either the first-letter pseudo element or the text-shadow property. Fortunately I was able to devise a workaround for the first-letter pseudo element. It involves using some of the positioning characteristics of CSS which I shall be covering next. Here is that workaround:
.firstletters {font-size:36px; float:left; color:#990000; font-weight:bolder; margin-top: -5px;}
The key to this workaround is the the float:left property which controls where the letter is placed in the text block and the margin-top correction for where the letter is placed in the text block. Note we have to use a <span> tag applied to a single letter to get this workaround to work like so:
<span class="firstletters">F</span>inally ....


This tutorial has summarized the properties and effects available in CSS to manage the styling of text on your web pages. As one would expect, managing the font properties from size, weight and family among others is a big part of the CSS implementation. Fortunately we found most of the browsers implemented these directives uniformly. In the case of other text properties the browsers diverged and IE fell short most often. There have been whisperings that IE8 in 2008 will finally render CSS through version 3 correctly. Rumors only. Meanwhile, readers are encouraged to View Source to see the CSS used here. All the styles are either style= or .class stylings contained in the page's <style>..</style> section.

Finally there are several ways to specify font-families and font-sizes. Use the ones your client is most comfortable with. I have seen so much unnecessary changes based on not getting font-size or family specified properly. Avoid the confusion and check with your client on any styling standards that you can incorporate in your style sheet.CSS in Easy Steps by Mike McGrath covers fonts on pages 58-68 and text properties on pages 148-149. Likewise, Beginning CSS by Richard York, covers the topics in several sections but the basics on fonts are on pages 206-232 and text effects are on 163-194 (plus check the index).

Top of Page  Home  Tutorials 

Developers Weblog  Graphics Reviews and Tips