Quite easily. The syntax for classes in the stylesheet is
.class_name or
element.class_name.
Here are two ways to do it.
First, just using class names:
Code:
.chapnum {
/* put your own styles here */
font-size: 1.125em;
font-weight: bold;
margin-bottom: 2em;
margin-left: 0;
margin-right: 5%;
margin-top: 10%;
text-align: center;
text-indent: 0;
}
.VerseNumberHeading {
margin-bottom: 0;
margin-top: 0;
text-align: left;
text-indent: 1em;
}
By using class name this way, you can reuse the class in different element. You could do
<h1 class="chapnum "> for example and the style would apply.
Second examples:
Code:
p.chapnum {
/* put your own styles here */
font-size: 1.125em;
font-weight: bold;
margin-bottom: 2em;
margin-left: 0;
margin-right: 5%;
margin-top: 10%;
text-align: center;
text-indent: 0;
}
p.VerseNumberHeading {
margin-bottom: 0;
margin-top: 0;
text-align: left;
text-indent: 1em;
}
Here, the styles will be applied only to the
<p class="chapnum "> and not to say
<h1 class="chapnum ">.
Here's a reference to
style sheet selector syntax if you want to know the whole story ;-).
Note 1: make sure you have a link to your stylesheet in the
<head> section of your html page.
Note 2: the example you are giving would benefit from a header tag I think. When I see things like
<p class="chapnum">CHAPTER TEN</p>, I'm thinking that it should have been
<h1>CHAPTER TEN</h1> instead.
Hope that helps.