Formatting_Text_with_CSS

So how do you format text with a CSS stylesheet? In this page we will be using an embedded stylesheet to demonstrate how to do this.

One note before we begin: most browsers are very picky about CSS - if you have lots of typos or missing semicolons, things will go downhill fast. So make sure to just do a little bit at a time and check your work often.

In this example we will presume that the section of our page says the following: code format="html4strict" Here is a large headline! This is a subtitle This is the subject of the page. code ... and we wish to modify the appearance of these lines. The general syntax of the stylesheet is the following:

tag_to_modify { attribute1: new_value1; attribute2: new_value2; etc...}

... but we will typically put a line break after the semicolons.

For example, to set the font and point size of the tag, we would say: code format="css"  h1 { font-family: "Helvetica"; font-size: 48pt; }

code This says to change the h1 tag to Helvetica 48 point text. We can set styles for several tags in the same section: code format="css"  h1 { font-family: "Helvetica"; font-size: 48pt; }

h3 { font-family: "Palatino","Times New Roman","Times","Serif"; font-size: 36pt; color: #000088; } code This way we can affect both h1 and h3 tags. You should notice that in the h3 definition, we listed several fonts. This is usually a good idea, since not all computers have the same fonts. The browser will try to find the Palatino font, but if it can't, it will then try for Times New Roman, and so forth. The last item on the list, "Serif" is a special font name - it corresponds to whatever font the computer does have that has serifs on it. This is special for the font-family attribute. (Oh, and spelling and capitalization count!) Here are some common attributes for text that you can edit. Values in {curly brackets} refer to special keywords. While we're at it, we can also apply a few attributes to the "body" tag:
 * ~ Attribute name ||~ Possible values ||
 * font-family || list of (name of fonts) and/or one or more of {serif, sans-serif, monospace}. Each font is in quotes, separated by commas. ||
 * font-style || {normal, italic} ||
 * font-variant || {normal, small-caps} ||
 * font-weight || {normal, bold, bolder, lighter} ||
 * font-size || number followed by "pt", number followed by "em", number followed by "%", or one of {smaller, larger, xx-small, x-small, small, medium, large, x-large, xx-large} ||
 * word-spacing || {normal} or numeric value, followed by "pt" ||
 * letter-spacing || {normal} or numeric value, followed by "pt" ||
 * vertical-align || {normal, sub, super} ||
 * line-height || {normal} or number, followed by "pt" ||
 * text-decoration || {none, underline, line-through} ||
 * text-transform || {none, capitalize, uppercase, lowercase} ||
 * text-align || {left, right, center, justify} ... but justify doesn't often work well. ||
 * text-indent || numeric value, followed by "pt" or "%" ||
 * color || color name or #rrggbb ||
 * background-color || {transparent} or color name or #rrggbb ||
 * Attribute name || Possible values ||
 * background-color || color name or #rrggbb ||
 * background-image || {none} or {url(//insert_URL_here//)} ||
 * background-repeat || {repeat, repeat-x, repeat-y, no-repeat} ||
 * background-attachment || {scroll, fixed} ||