HTML and CSS Reference
In-Depth Information
for example, you can search for the class name using the search function when viewing
the page source in a web browser.
.small-top-margin { margin-top: 1em; }
In addition to conveying intended use, the class name can also show its relationships
to other classes. For example, if a container class is called
.post
, the title for that
container can be named
.post-title
to show that the class should be used only within
an element applying the
.post
class.
.post {
margin: 1em 0;
}
.post-title {
font-size: 1.2em;
}
The title class could also have been written as
.post.title
to ensure that the
.title
class can be used only within a container using the
.post
class. However, the
.post-title
name helps avoid naming conflicts and does not increase specificity, so that naming
convention is often preferable. Notice that the relationship between the rules is further
emphasized using indentation, which can significantly improve the code's readability.
Normalization
Different browsers render some elements slightly differently, mainly because of variations
in their default style sheets. To get a shared baseline, it is common to include a group of
rules that normalize these browser inconsistencies and set reasonable defaults. The most
popular choice for this is the GitHub
Normalize.css
project.
1
By including these rules
at the top of your style sheet (or a subset of them per your site's requirements), you
have a consistent starting point across all browsers from which you can build. The
Normalize.css
style sheet includes ample comments that explain each browser
inconsistency that it resolves.
Debugging
There are many useful debugging tools available that can significantly simplify your work as
a web developer. The Firebug extension for Firefox is one of the most powerful of these tools.
It allows you to edit and debug CSS, HTML, and JavaScript live on any web page for testing
purposes. You can also toggle styles on and off, as well as discover exactly which styles apply
to a selected element. To learn more about Firebug, visit the official Firebug web site.
2
1
2
