HTML and CSS Reference
In-Depth Information
CSS stylesheet
In the document header, we created a
link
to a CSS stylesheet. Now, let's look at that file. The style
definitions for this topic are intentionally minimal; only the background color of the document
body
and
canvas
element has been declared. By default, the canvas background color is transparent, which might
be the color you want, but has been changed to white so you can see exactly where the element is
positioned in the document. Here's the stylesheet for the
style.css
file:
body {
background-color: #bbb;
}
#canvas {
background-color: #fff;
}
This assumes the document contains an element with an
id
of
'canvas'
. As a document gets more
complicated, so does its stylesheet. The HTML file defines the structure of the document, whereas the
CSS stylesheet defines the style or look of the elements. In general, it's best to organize your content,
style, and scripts in separate files.
Additional scripts
As the examples get more complicated and you need to reuse portions of code, it becomes convenient, if
not necessary, to move these pieces into separate files for clarity. This is done when declaring new
classes that are used across multiple exercises and for functions whose verbosity would distract from the
point at hand.
Throughout this topic, we'll maintain a file of these utility functions; it's named
utils.js
. This script
contains functions that set up boilerplate code for the examples, so that you can concentrate on the
underlying animation principles. Each function is explained as they are introduced, so you don't have to
think of this file as a black box.
In this file, many of the utility functions will be added as properties to a global JavaScript object named
utils
. This way, you can avoid cluttering up the global namespace with a bunch of functions. Be sure that
at the top of the
utils.js
file you've declared an empty object like the following:
var utils = {};
To import this file and other scripts into your document, create a
script
element and set its
src
attribute
to the location of the file. Include these immediately before the example code to be certain that everything
has loaded properly before attempting to use it:
<script src="utils.js"></script>
<script>
window.onload = function () {
//Our code here...
};
</script>