HTML and CSS Reference
In-Depth Information
Functionalities similar to Firebug are available on Chrome through the Chrome
Developer Tools that come built in to the browser. You can bring up the DevTools window
with the shortcut Ctrl+Shift+I on Windows or Cmd+Opt+I on Mac. Alternatively, you can
right-click on an element on the page and select Inspect Element to bring up the same
window in element inspection mode.
Validation
It is a good idea to check that your CSS complies with the W3C standard. Improper code
may cause unexpected results in how your site appears in different browsers. Moreover,
having error-free code is a sign of a quality web site.
The W3C provides its own online tool for validating CSS.
3
It checks a submitted page
and returns any errors and warnings found on the page for you to fix. It also has a similar
tool for validating HTML documents,
4
which is just as important to do. To make validation
even more convenient, you can download a browser plug-in that checks the page's code
for you, such as the Web Developer plug-in available on Chrome, Firefox, and Opera.
5
Single style sheet
For performance reasons, it is best to include a site's style rules in a single external style
sheet. Doing so minimizes the number of HTTP requests necessary to load the web site,
while allowing the CSS file to be cached so that the visitor's browser has to download it
only once.
During development of a large site, it is often preferable to separate style rules into
several more-manageable CSS files. To have the best of both worlds, these development
files can be combined into a single file as part of the site's build process. One useful tool
for this purpose is Bundle.
6
When your site design has become stable, this tool can also be
used to minify your CSS.
Minification
Minification is the process of removing unnecessary characters from code to reduce its
size. When a CSS file is minified, whitespace characters are removed, and the rules are
optimized and restructured to load more quickly. This compression can greatly reduce
the size of the file, which improves site performance at the cost of code readability.
3
4
5
6
