HTML and CSS Reference
In-Depth Information
A Note on Using and Naming Classes
The purpose of a class is modularity. When writing styles, you should ask yourself: “Could I use this style else-
where?” If elements are to share similar styles, rather than write out two similar rule sets, you can use a class and
apply that class to both elements.
When creating classes, also put some thought into their names. Although you're free to call a class whatever you
like, consider whether the name of a class represents its purpose. If you come back to work on your web page in
six months (or somebody else does), will your class names make sense then?
These are best practice approaches that you learn to use throughout
CSS3 Foundations
.
The hash or pound symbol (
#
) represents an ID. An ID should be used only once per page. Consequently, it allows
you to be very specific when applying styles.
Similar to the ID is the less specific
class selector.
When elements on a page (or across a website) need to share the
same styles, you should use a class selector. Unlike IDs, classes can be used on a page as many times as you want.
You will eventually apply quite a few styles to the call to action button described in Chapter 2 (remember its purpose
is to attract the user's eye) and will use it multiple times on the same page. Because of this, it makes sense to use the
button
class for elements representing a button.
Style any element with the
button
class like so:
1.
In styles.css, add the following:
.button {
background-color: hotpink;
color: white;
}
2.
Save styles.css.
The full-stop, period, or dot represents a class. Here, you make the background color hot pink and make the text of
the button white. You take a closer look at these property values, known as
color keywords,
in the next chapter.
Grouping Selectors
Sometimes you may want to apply a style to more than one element. You recently made the text of the
<h1>
ele-
ment bold but what if you want the subtitle elements such as
<h2>
,
<h3>
, and
<h4>
to be bold too? You could
write a rule set that selects each element individually, but a quicker way is to group those selectors instead.
Cross Browser Compatibility for Advanced Selectors
Up to now, the selectors demonstrated are supported in all browsers in use today. However, the more advanced
selectors have a varying level of support, which will be stated in the description of each selector.
