Handy
Tip: When you have problems with styles, use a CSS
validator to check for errors. CSS validators allow you check
the effectiveness of your CSS code on a single page or an entire
website.
|
 Bookmark
This Page
CSS Tutorial #6
Applying Special Effects to Text with CSS
font-style
This is the property you need to make text italic, oblique
or normal.
If you code H1 { font-style: italic } your browser will render
all H1 text as italic. If there is no such italic font,
then the browser will usually make one up. If a font has a version named
Oblique instead of Italic, then use oblique as the value of font-style.
A third value for font-style is normal, which will make the font
appear as normal text.
font-weight
P { font-weight: bold }
A value of bold gives text within a certain tag bold properties. Likewise
a value of normal will make any bold text nonbold.
You can also specify font-weight using numerical values: 100, 200,
etc.
font-variant
H1 { font-variant: small-caps }
You can use font-variant to display normal text as small caps. Is not
supported by all browsers.
text-transform
B { text-transform: uppercase }
This property is related to font-variant and is supported by most browsers.
uppercase -- makes every single character capitalized.
lowercase -- makes all of the characters lowercased.
capitalize -- makes the first character of every word capitalized.
none ------- means that any inherited text-transform value will
be ignored, and the text will display normally.
text-decoration
This is one of the most common used properties for taking off that underline
on a link.
B { text-decoration: underline }
In this example
all <B> text would be underlined.
line -- places a line
through the text as in strike through.
overline -- places a line above
the text.
blink -- makes the text blink.
none -- makes
none of the above happen.
The most common use of text decoration is to
apply the values to the <a> tag of links to bring about no underline on
links, etc. (For full ready made css coding Click Here!)
A:link { text-decoration: none } ----- for normal, unvisited links,
no underline;
A:active { text-decoration: none }--- active is
for link appearance while you're clicking
A:visited { text-decoration:
none }---visited is for previously visited links
You can also
use any other CSS properties on them using A:link, A:active, and A:visited. Here's
some colors and font properties.
A:link { text-decoration: none; color:
red; font-weight: bold; font-family: tahoma, arial, serif }
Not all browsers support this feature.
Next CSS Tutorial:
Spacing and Alignment
|
|
Website
Design
|
