From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript

Chapter 3.3: Setting up Style Sheets

A style sheet is just a description of how things should be displayed. Cascading means that if there are more than one rules that describe the same element, the more precise one will be used. If there are two rules that are equally precise, the rule that was declared later is deemed higher priority. The obvious question then is where does HTML get these style sheets from? There are three locations where you can declare a style sheet: inline, embedded, and external. Let’s look at these.

The inline declaration simply adds a style attribute to the opening tag of the element. You would use this format of declaring a style when this is not a common thing. When you have a rare style change, possibly specific only to one section of one page on your document, then this approach can be very useful. As an example, let’s say that there was a small section of the text that you wanted to make red for some reason. As we want to span a small section of a paragraph and have the text within that span be a different color, we would use the <span> tag to declare the style of that span, with the color attribute being used to change the color of the text. Here is the code that would do this.

Normal CSS notation needs to specify what element to modify, but as this is obviously the element with the style attribute in its tag, no element selection is necessary. The text within the style attribute then only describes the display attributes of the element. We will be covering the more common attributes throughout this chapter, but need to use a style attribute in our example. The color attribute simply describes what color to display. In this example, we are using a named color, but as you will see later in this chapter, there are many other ways of specifying a color.

Clearly, having to change the style within every element is not a good approach. This is why the inline style approach should only be used for special cases. So, the next way of handling style is with an embedded style sheet. This is when we have a section within the document that describes the styles used on the page. This is usually done in the head section of the document, but can be placed elsewhere though many browsers will treat the styles as if they were defined in the head section. An embedded style looks something like the following: <style>
label {
    color:blue;
    font-size:larger;
}
</style> The code between <style> and </style> is CSS code. The label is the element we want to apply a style to. <label> is an element used in forms which will be covered in chapter 5 but is essentially an in-line paragraph. The color and font size are being modified so that we will use a larger font size and color the text blue. Now, whenever the label element is used, it will use the new style.
<label>This text should be blue and large</label>
When you apply a style to an element, that style persists for all uses of that element, though this can be individually changed by using inline styles. A more advanced approach, called classes, will be discussed in a future section.

Use of embedded style sheets is not commonly used but can be useful for pages that have some unique styling properties. More often, we are going to want the same style throughout all the pages on our site. While we could just cut and paste the style section into every page we create, this would mean that if we wanted to make a change to the style, we would have to make the same changes to every page that we have. A better approach is to have an external style sheet that all the pages on our site uses. We can even have more than one external style sheet so we can only load the style sheets containing the things that we need.

The external style sheet is loaded using a link tag that should be included in the head section of the document. The link tag uses a href pointing to the CSS file that we want to include. We use the link tag to associate an external resource with the page, so we need to specify what relationship the file has with our site. In our case we are using a style sheet. A link tag that loads the style sheet for our cheat sheet would look something like this:
<link href="styles/cssBasics.css" rel="stylesheet">

The common rule of thumb is to use external style sheets for most of your styles. Having multiple style sheets is not uncommon, with different categories of styles put into different style sheets. For example, if your site only rarely uses forms, but you have extensive styles for your forms, you may want to have one style sheet for common formatting and a separate style sheet used for the form elements you use. By making the style sheets separate, it is easier to alter more specific styles. Likewise, style sheets need to be loaded, so having several smaller sheets with some not always being loaded is more efficient to load than having one monster style sheet which only has a few elements that are needed.

Embedded style sections then can be used for pages that have unique styling requirements. If you find yourself copying this code for use with other pages you may then want to replace the embedded style sheet with a linked style sheet.

Inline styles should be rarely used, but can be handy. Now that we know how to add style sheets to our document, we now need to learn how to define our styles.