The Wonders of CSS!


Fun With Text!

This text is red.

This text is blue.

This text is green.

This text is BIG!

This text is tiny...

~~This text is centered~~

If we have something important to say, we can make it bold!

We can even change our font-family if we are feeling creative!

Try combining multiple attributes to make big, orange, bold text!


We can also apply the same style to multiple HTML elements.

Each one of these lines is within a different <p> tag, yet they all have the same styling.

That's because they are all a part of the same CSS class!

CSS classes let us define a style once and let us then apply it to multiple elements!

In your external CSS file, create a style for the class styledFont.

Notice how every time you change the class styledFont, all of the text changes.


Just as classes can be used to style multiple elements, id's are used to style single, unique elements. Give the following image a border by adding style attributes to your external CSS file. (Hint: Remember to include a border width, style, and color.)

Picture of the CSS Icon