Text Formatting With CSS

Highlighting

It's easy to create an effect that makes text look as if it was marked with a highlighting pen, like this (you can choose a color other than yellow). Just create the following classes in your style sheet:

.hilite_yellow { background-color:yellow}

.hilite_aqua { background-color: Aqua}

Then, to highlight a word (or words), use the following HTML on the page:

this

you can choose a color other than yellow

Text Links With Background Color Highlight

This is similar to the text highlighting above, except you highlight a text link on mouseouver, like this:

This is a sample link

Here is the style:

Line Through

There may be occasions when you want to strike out (line through) text, like these this. Just add the following class to your style sheet:

.linethrough { text-decoration: line-through}

Then, to line through a word (or words), use the following HTML on the page:

there is a line through this

Indented Paragraphs

Many people find it easier to read text if the first line of each paragraph is indented instead of having empty lines between paragraphs.

The trick is to indent paragraphs that follow other paragraphs, but not to indent the first paragraph on a page. Here is the CSS class to accomplish that:

p {
margin-bottom: 0 }
p + p {
text-indent: 1.5em;
margin-top: 0 }

Of course, there are times when you don't want a paragraph to be indented, so we created the following class for those situations:

p.noindent {
text-indent: 0;
margin-bottom: 1em;
margin-top: 1em;
}

We also added text-indent: 0 to the p.code class, below.

Code

If you want code (or anything else) displayed in a distinctive manner, create the following class in your style sheet:

p.code {
text-indent: 0;

font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 90%;
color: Navy;
background-color: #f3f3f2;
padding-bottom: 1px;
padding-left: 10px;
padding-right: 10px;
padding-top: 1px;
}

Then, to display something as code (or whatever), use the following HTML on the page:

This is code.

Popup Explanation Box

Here is a class you can use to provide a popup explanation for abbreviations, acronyms, etc. For an example, mouse over the following word: CSS. The cursor should change to a question mark and a popup should contain the definition "Cascading Style Sheet".

Here is the class to add to your style sheet:

.define {
cursor:help;
border-style:dotted;
border-width:1px;
background-color: #FFE4C4;
}

And here is the HTML:

CSS

Here is an example with less formatting: CSS. Here's the class to add to your style sheet:

.popup
{
COLOR: #9F141A;
CURSOR: help;
TEXT-DECORATION: none
}

And here's the HTML:

CSS

Drop Cap

The following paragraph is an example of a drop cap paragraph created using CSS:

The definition of the drop cap appearance is included in your style sheet and referenced in your document. The code below was used to create this paragraph with a drop cap initial letter:

.dropcap {
float:left;
color:#4E544A;
font-size:100px;
line-height:70px;
padding-top:2px;
font-family: times;
}

Here is how you use the class in your HTML code:

The definition of the drop cap appearance is included in your style sheet and referenced in your document. The code below was used to create this paragraph with a drop cap initial letter:

Al Sparber of Project VII developed a couple of drop caps. The one at the beginning of this paragraph he calls Basic Drop Cap. Here is the CSS for Al's Basic Drop Cap:

.dropcapbasic {
font-size: 3em;
width: 1em;
float: left;
border: 1px solid #333333;
text-align: center;
margin: 0 .25em 0 0;

}

Here is another of Al's drop caps. This one he calls Drop Cap Fancy. Below is the CSS for Al's Drop Cap Fancy.

.dropcapfancy {
font-size: 4.2em;
width: 1em;
float: left;
text-align: center;
font-family: "Times New Roman", Times, serif;
line-height: 0.75em;
color: #FFFFFF;
background-color: #333333;
padding: 0.1em;
margin: 0 .2em 0 0;
}