Classes not tied to an element - A Smarter Way To Learn HTML & CSS (2015)

A Smarter Way To Learn HTML & CSS(2015)

8
Classes not tied to an element

If you intend to define a particular class for only one type of element—for example, only paragraph text or only h3 headings—write the element name before the dot and class name, as in…

p.special {

...or...

h3.special {

If you want a class to be useable for more than one type of element—for example, both paragraph text and headings—omit the element name. Just write, for example…

.special {

Open your CSS file and add the style below.

.typewriter {
font-family: "Courier New", Courier, monospace;
}

You’ve created a new style named “typewriter” that will style text in a typewriter font. It could be paragraph text. It could be heading text. It could be other kinds of text elements that I’ll introduce you to later.

Notice that there’s no element name, like p or h3, involved here. It’s just a dot with the class name following it. Save the file.

Open your HTML file and add the code below.

<h2 class="typewriter">This heading is in typewriter text.</h2> <p class="typewriter">This paragraph is also in typewriter text.</p>

You’ve assigned the class “code” to a heading and a paragraph. Since your CSS file doesn’t tie the class to any particular element, you can use it for any text element.

Save the HTML file and display it.

Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-8-1.html.

Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-8-2.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/8.html