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>
 
Search WWH ::




Custom Search