Frontend Engineering, Volume II

CSS: Example 1d—Style with Classes

© 2013, Martin Rinehart


Inside your embedded style sheet, add the highlighted lines here:

	    .blue_text { color: blue; }
		.oversize { font-size: 1.2em; }
	</style>

We always add styles from most- to least-general. Element styles first, then class styles and id styles last. (Id styles come next.)

Add new paragraphs using these styles, as you see here:

	<p>Plain paragraph.</p>
	<p class='oversize'>Larger type here.</p>
	<p class='blue_text'>Blue type here.</p>
	<p class='oversize blue_text'>Larger, blue text!</p>

You should get a result like this:

Web page with all paragraphs bordered in solid blue.

Excepting only that you don't know very many properties (we'll change that soon enough) you now have the basic CSS ideas ready to use in your own work. CSS is not hard.

Feedback: MartinRinehart at gmail dot com

# # #