Font and Text Styles with CSS

For more on css (measurement) units check out: http://www.elated.com/tutorials/authoring/css/units/


Simple Font coloring

SpongeBob is cool in color #330099 (color: #330099;)


Examples of Font Tags

SpongeBob is cool (No CSS)

SpongeBob is cool in a generic font family (font-family: serif;)

SpongeBob is cool in a generic font family (font-family: sans-serif;)

SpongeBob is cool in a declared font that's a single word (font-family: arial;)

SpongeBob is cool in a declared font that's two words (font-family: 'century gothic';)

SpongeBob is cool with a properly declared font with generic font backup (font-family: 'century gothic', sans serif;)

SpongeBob is cool in a font-weight of bold (font-weight: bold;)

SpongeBob is cool in a font-weight of bolder (font-weight: bolder;)

SpongeBob is cool in a font-weight of 100 (font-weight: 100;)

SpongeBob is cool in a font-weight of 700 (font-weight: 700;)

SpongeBob is cool with the font-style italic (font-style: italic;)

spongeBob is cool with the font-variant small caps (font-variant: small-caps;)

SpongeBob is cool with a font-size in absolute unit pt sizing (absolute not recommended for screen, but good for print) (font-size: 11pt;)

SpongeBob is cool with a font-size in absolute unit px sizing (font-size: 14px;)

SpongeBob is cool with a font-size in relative unit font-size em (font-size: 1.25em;)

SpongeBob is cool with a font-size in a percentage unit font-size % (font-size: 125%;)

SpongeBob is cool with a font shorthand declaration (in this case size and family) (font: 125% impact, sans-serif;)

SpongeBob is cool with a font shorthand declaration (in this case weight size and family) (font: bold 110% arial, sans-serif;)


Examples of Text Tags

Patrick, he may be a star, but he's not too bright aligned to the right (text-align: right;)

Patrick, he may be a star, but he's not too bright aligned to the center (text-align: center;)

Patrick, he may be a star, but he's not too bright with a text-indent. Patrick, he may be a star, but he's not too bright. Patrick, he may be a star, but he's not too bright (text-indent: 25px;)

Patrick, he may be a star, but he's not too bright with first letters capitalized (text-transform: capitalize;)

Patrick, he may be a star, but he's not too bright with letter-spacing (letter-spacing: 1em;)

Patrick, he may be a star, but he's not too bright with word spacing (word-spacing: 1.2em;)

Patrick, he may be a star, but he's not too bright with line-height applied and a border to show the effect. Patrick, he may be a star, but he's not too bright. Patrick, he may be a star, but he's not too bright. Patrick, he may be a star, but he's not too bright (line-height: 100%)

Patrick, he may be a star, but he's not too bright with line-height applied and a border to show the effect. Patrick, he may be a star, but he's not too bright. Patrick, he may be a star, but he's not too bright. Patrick, he may be a star, but he's not too bright (line-height: 1.5, line-height is the only property where you can leave off unit of measure)

Patrick, he may be a star, but he's not too bright with line-height applied and a span using vertical-align. Patrick, he may be a star, but he's not too bright. Patrick, he may be a star, but he's not too bright. Patrick, he may be a star, but he's not too bright (spans using a style of vertical-align: super; and vertical-align: sub)

More on vertical-align at http://meyerweb.com/eric/css/tests/css2/sec10-08b.htm

Patrick, he may be a star, but he's not too bright with font-size/line-height declared as a shorthand. Patrick, he may be a star, but he's not too bright. Patrick, he may be a star, but he's not too bright. Patrick, he may be a star, but he's not too bright. Patrick, he may be a star, but he's not too bright. (font-size: 14px/line-height: 2, line-height is the only property where you can leave off unit of measure, font-family included to finish shorthand)


Example of Margin set to Paragraph

Patrick, he may be a star, but he's not too bright with left and right margins set. Patrick, he may be a star, but he's not too bright. Patrick, he may be a star, but he's not too bright. Patrick, he may be a star, but he's not too bright. (margin-right: 50px; margin-left: 50px;)