Introducing Selectors

Learning Objectives:

In this section, students will:

• Start learning how CSS rules affect HTML presentation.
• Review how the HTML attributes ID and class are used in CSS.
• Be introduced to the different types of selectors and some general usage patterns.

---

Introducing Selectors

CSS works through defining sections of code that work on selectors. As it name implies, a selector is something which selects. Returning to the metaphor of animals introduced in series on HTML and the section on Attributes, in order to find some particular part of a group, it needs to be selected out of the larger collection.

When working on selectors, CSS is written in what are called rules. These are particular changes, settings, and properties that apply to one or more elements and tell the web browser how to display or understand them in certain ways.

Creating Stylesheets

Much like HTML files have a “.html” ending and filetype, CSS rules are often, but not always, found in files that end in “.css”.

Having the CSS rules in a separate file helps with the separation between the content, in the HTML file, and the presentation rules found in the CSS file. When updating the rules in the CSS, only a single file need be changed.

Linking to HTML documents

As introduced in the section on Nesting Elements, the HEAD element of a HTML document contains information about the document. Whereas the content of HTML is nested in the BODY tag, other tags that describe the document and its relationship to other documents go in the HEAD.

The tag LINK is one such element. When used in the HEAD of a HTML document, it connects this HTML document to others. Often, but not always, this is how CSS files are connected to a HTML document. It is linked into it.

The LINK tag has two required and one optional (but recommend) attributes.  The “rel” (relationship) attribute defines what relationship this link has between this document and another. The “href” (hyper-reference) attribute defines where the file is to found. The third, optional but recommend attribute is “type”: this defines what type of data is found in the referenced file. Often, but not always, this will be “text/css”.

CSS Rules

CSS rules are written within curly brackets. They follow a pattern of the property to change, a colon, and the new value. At the end of a rule is a semicolon to signal that the rule is done. While often far easier to organize as a rule on each new line, just like most HTML elements, the space between rules does not matter.

Tags

One type of selector is the tag. Like with HTML, using the name of a tag will select all of those elements in the HTML document. Using a rule such as “color: green;” (which changes the text color to green) will then affect all of the paragraph elements in the document.

When used like this, the rules will cascade down the HTML document from the first element, BODY, into its children. If one of the tags encountered matches the rule, it is enforced.

In this case, as only the P tag was selected, it was the target for the rules and only those elements, and its children, were changed. In the cases with the STRONG and EM tags that were used inside the P element, they were also changed.

This is how the cascading aspect of CSS works. The rules move to an element, check it against the rules, and if it matches, enforces it. When enforced, and unless overwritten, any elements within them get the same rules.

ID

Just like using the ID of an element as an anchor link in Document Structures, using the name of an ID proceeded by a hash, #, targets that single element.

Classes

As introduced in Attributes, HTML elements can have both an ID, a unique name in a document, and a class (“classification”). A class can be used as a selector through using its name proceeded by a period.

In the cases where there are multiple rules (for example, both a rule for a tag and for a class), the last one encountered is the new rule. This allows for selecting a group of elements and then picking a particular one for additional rules.

Play with the Code:

Take a moment to play with the code and concepts in the embedded viewer below. Watch how code added in the HTML window is updated in the Result window.

Try it Yourself:

Based on the ongoing CV example from the HTML modules, begin to write presentation rules using CSS.

• Create another file "style.css".
• Link the new CSS file in the HEAD of the HTML document.
• Using tags, ID, and/or class, add rules for the elements. Some examples might be to use "color" or "background-color" to start.

Test your response on Mozilla Thimble Links to an external site.!