Learning CSS: Part 1: Introducing Selectors

Learning CSS

Cascading StyleSheets (CSS) is a web technology designed for use with HTML. Using CSS allows for the separation of the presentation from the content and can help with customizing layout, colors, and accessibility settings.


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

Screenshot 2018-09-10 11.06.25

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

Screenshot 2018-09-10 11.11.46

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

Screenshot 2018-09-10 11.19.55

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, like most HTML, the space between rules does not matter.

Tags

Screenshot 2018-09-10 11.26.53

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.

Screenshot 2018-09-10 11.30.53

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

Screenshot 2018-09-10 11.36.33

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

Screenshot 2018-09-10 11.38.50

Classes

Screenshot 2018-09-10 11.48.19

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.

Screenshot 2018-09-10 11.50.26

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.

Codepen Example:

See the Pen Learning CSS: Introducing Selectors by Dan Cox (@videlais) on CodePen.

Mozilla Thimble Example:

Remix on Mozilla Thimble!

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s