Formatting Text

Text generally makes up the bulk of "content" on a page, so we'll go over formatting text first. With CSS, one can control a number of different attributes. Some of the more obvious ones are color and size, but CSS also lets you control the alignment, spacing and whether or not things should be capitalized. Below are some examples, afterward, try making your own page and trying different values!


dd	{
	color: yellow;			/* any hex or color code */
	}

Results in:
This text


p {
	color: red;
	text-align: center;		/* possible values: left, right, center */
	}
Results in:

This text


dd {
	color: blue;
	text-transform: uppercase 	/* possible values: none, capitalize, uppercase, lowercase */
	}
Results in:
This text


dd {
	color: purple;
	letter-spacing: 20px;	/* possible values: any positive or negative pixel amount*/
	}
Results in:
This text


dd {
	color: green;
	font-variant:small-caps;	/* possible values: normal, small-caps*/
	}
Results in:
This text


dd {
	color: orange;
	font-size: 20px;	/* possible values: any pixel amount*/
	}
Results in:
This text


dd {
	color: brown;
	font-family: arial, "Times New Roman";	/* possible values: a list of font names, in order of preference */
	}					/* If the first on the list isn't available, it tries the next and so on */
Results in:
This text


dd {
	color: grey;
	font-style: italic;	/* possible values: normal, italics, oblique*/
	}
Results in:
This text


One easy way of formatting different headers is by taking advantage of html's h1, h2... h6 tags and redefining how they should display. For example, we can redefine h1 so that it is no longer huge, as such:
h1 {
	color: pink;
	font-style: oblique;
	font-size: 12px;
	}

And now an h1 appears like this!



Next Page >>