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

Chapter 3.4: Blocks, Spans, and Selectors

As was mentioned in the previous chapter, elements can be blocks in which they take up the entire available width of area in which they reside. There are also inline blocks which they only take up the space that they occupy. For working with styles, you may want to apply a style to a block or an inline block, so to make that easier, HTML has special tags for this purpose. The <div> tag, short for division, is for creating a block inside another block. For dealing with inline text, we have the <span> tag.

The <span> and <div> tags tend to use classes, which we will discuss in a later section, but are useful in the rare case that you need a unique style and want to use inline styles. The image above can be created with the following code:

By default, elements tend to be one of these two types, but CSS does allow this to be changed by changing the style of that element. As was hinted at in the previous section, we can change the style of any element on a page. This is done by writing a CSS declaration which has the following format:
Selector {
  Attribute: value;
}

Selectors are simply a pattern to determine which elements are affected by the style. More specific styles take precedence over less specific styles with classes and ids being the most specific. In the case where there are two styles with the same specificity, then the style that was specified later takes precedence.

You can set styles for multiple tags at the same time by using , between the different elements. So if you wanted both bold and italic text to be blue, you would use the following: b, i {
  color: blue;
}
So the code:
<b>bold</b> or <i>Italic</i> text.
would result in bold or italic text.

It is also possible to select every element using the * selector, but this is considered very bad practice and should only be used for resetting the style.

It is also possible to control the style of an element contained within another element. This is done by having the container element followed by a space then the element you want the style to change. For instance, assuming we had bold and italic being blue, but any bold within a span should be red, we would use the following declaration:
span b {
  color: red;
}
And to test this use the code:
Testing <b>bold</b> and <i>italic</i> as well as inside a span <span><b>bold</b> and <i>italic</i>.</span>
Would result in: Testing bold and italic as well as inside a span bold and italic.

We will touch upon even more specific ways of selecting an element when we discuss the relevant uses, such as classes in the next section.

The style attributes are what parts of the style we are going to change. There are numerous attributes, with more being added as the standard evolves. We will discuss the more commonly used attributes throughout this book and should cover most things you would want to know about, but for a complete list of the currently supported attributes, check out https://developer.mozilla.org/en-US/docs/Web/CSS/Reference.

The value applied to the attribute is dependent on what the attribute is setting. We will go into more details of the values when we cover the different attributes. There is, however, size related attributes, which are common among many attributes. These are used by having a number followed by the size type to use with the most common being:

• px - pixels the dots that make up your display
• pt - point, typesetting standard, 1/72 of an inch
• % - percentage of the block item is in
• rem - Root Element M, relative to how wide an M is on the root element
• em - Elements M, relative to width of M on current element
• cm - metric centimeter (10 millimeters)
• mm - metric millimeter
• in - imperial Inch

note that pt, cm, mm, inch are based on display settings, so may not be accurate, and some devices treat pixels as 1/96 inch but some devices will use multiple pixels to represent a pixel unit.

Modifying tags is great for an overall look, but often, we want to support multiple styles within the same tag. This is where classes come into play.