www.RickBull.com > tutorials > Cascading Style Sheets > Basics of Style
Jump to: Contents | Part 1 | Part 2 | Part 3 | Answers | FAQ

Formatting Text & Other Inline Elements

Well, I have shown you the boring stuff now I assume you want to get down to the more interesting stuff - properties. Properties are the things that dictate how your page will actually look, and I am going to show you some common text/inline properties here. But do not worry, there is still more boring stuff to come!

font
[ [ 'font-style' || 'font-variant' || 'font-weight' ]? 'font-size' [ / 'line-height' ]? 'font-family' ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
CSS 1 CSS 2
font-style
Allows you to set the text to a variant of the italic font. Possible values include:
normal
This is sample text of this property
italic
This is sample text of this property
oblique
This is sample text of this property
inherit
This is sample text of this property
CSS 1 CSS 2
font-variant
Allows you to set the text to be in small caps:
normal
This is sample text of this property
small-caps
This is sample text of this property
inherit
This is sample text of this property
CSS 1 CSS 2
font-weight
This property sets boldness of the text. Some fonts may not represent be able to display all levels of boldness, in which case they will simply display the nearest match.
normal
Standard level of bold (i.e. none). This value is the same as 400
This is sample text of this property
bold
Displays the text in a bold appearance
This is sample text of this property
bolder
This value will make the font bolder than its default, or inherited font-weight. So if the font-weight is normal, setting it to bolder will make it appear as though you had set it to bold. If you are on the maximum boldness, it will simply use that weight.
This is sample text of this property
lighter
This is essentially the opposite of above - it will use a lighter weight than its inherited weight.
This is sample text of this property
100 to 900
Values of 100 to 900 represent light to heavy weights:
This is sample text of this property (100)
This is sample text of this property (500)
This is sample text of this property (900)
inherit
Uses the same font-weight as its parent
This is sample text of this property
CSS 1 CSS 2
font-size
Sets the size of the font. There are several values this property can take:
CSS 1 CSS 2
line-height
Specifies the height of the box that surrounds inline elements. If this property is used on a block element (e.g. <div>) it specifies the line-height for all of its inline child elements. Values may either be normal, inherit, length or percentage or any decimal number. When using a number the UA multiplies this by the font size. Using normal should be the same as specifying a number of between 1 and 1.2 (depending of the UA).
This is sample text of this property (normal)
This is sample text of this property (250%)
This is sample text of this property (500%)
CSS 1 CSS 2
font-family
Font-family allows you to specify which font the element should use. You may also specify fall-backs (separated by commas) in case the specified font is not present on the users system. You should always specify a fall-back generic font-family, that if no other font is found, the browser will use whatever font is available in the specified family. For example if we wanted to use the Verdana font, and the Tahoma font should that one not be available, and failing that any sans-serif font that is available, we would write it like this:
p { font-family: Verdana, Tahoma, sans-serif; }
You may also encase font-names (but not generic font-families) in single or double quotes, and you must do this if the font-name contains a space otherwise they will be trimmed. Generic font families include:
Font-Family: Description: Example fonts:
serif Serif fonts have flared edges and tend to be easy to read. Most news-papers tend to use serif fonts. Times New Roman
sans-serif Sans-serif fonts are similar to serif fonts except that they do not have flared edges. They are usually clean/tasteful and rounded looking. Tahoma, Verdana, Arial
cursive Cursive fonts tend to have a hand-writing effect due to their joining strokes. Zapf-Chancery
fantasy Fantasy fonts are highly decorated compared to other font-families. Studz
monospace Monospaced fonts are those that each character/symbol are of equal width. They are usually used for samples of computer programming code or similar. They are useful when you need to space text out evenly, especially over several lines. Courier, Courier New
CSS 1 CSS 2
text-align
This property sets the alignment of text and other inline content. You should not use it to center block elements (such as <div>) as it will only center the text inside the element (except for a bug in Internet Explorer). Instead you should consider using the margin property. Possible property values for text-align include:
left
Aligns text to the left
This is sample text of this property
right
Aligns text to the right
This is sample text of this property
center
Aligns text centre
This is sample text of this property
justify
Justifies the text (spreads it evenly across the width of the element)
This is sample text of this property
CSS 1 CSS 2
text-decoration
This property allows you to decorate the text with different styles. For example you may add an underline to your text with the underline keyword/value. Possible property values include:
none
No text decoration. If you use this value, you may not use any of the other possible values outlined below.
This is sample text of this property
underline
Underlines the text
This is sample text of this property
overline
Adds a line above the text
This is sample text of this property
line-through
Adds a strike-thru effect to the text (same as using the <strike> or <s> tags)
This is sample text of this property
blink
Makes the text repeatedly blink on and off.
This is sample text of this property
CSS 1 CSS 2
text-indent
This property sets the indentation for the first line in an element. A good use for this property is when you want your paragraphs indented as though you had used the tab character. This allows you to remove unnecessary multiple &nbsp; entities, which may not work properly anyway if the browser window is too small. Values may either be units or inherit in which case the value will be the same as the element's parent's property. For example to indent all all paragraphs by 3 ems you could write:
p { text-indent: 3em; }

This is sample text of this property
CSS 1 CSS 2
text-transform
Changes the case of your text. For example the keyword uppercase would make all selected text uppercase, regardless of its original case. Possible property values include:
capitalize
Makes the first letter of each word capitalised
This is sample text of this property
uppercase
Turns all of the text to uppercase
This is sample text of this property
lowercase
Turns all of the text to lowercase
This is sample text of this property
none
No text transformation (i.e. the text is left the same as the case it was typed in).
CSS 1 CSS 2

Exercises

:

View Answers

All tutorials and content written by Rick Bull unless otherwise stated
Page's last update: Friday, 15th January 2010; 12:53:41 GMT +0000
Official CSS Level 1 documentation: http://www.w3.org/TR/REC-CSS1
Official CSS Level 2 documentation: http://www.w3.org/TR/REC-CSS2
Top of the page