9. CSS Introduction & Selectors

Key Terms

• CSS
• Selector
• Declaration
• Property
• Property Value
• Universal Selector
• Element Type Selector
• ID Selector
• Class Selector
• Descendant Combinator
• Child Combinator
• General Sibling Combinator
• Adjacent Sibling Combinator
• Attribute Selector
• Pseudo-class
• Pseudo-element
• Specificity

Introduction

CSS is one of the most crucial skills to learn as a Web Developer! You already covered HTML topics where you learned about how to create bare-bones content layout. Now you are going to learn about how you can use CSS to effectively create beautiful User Interfaces that your users will be interacting with!

When it comes to learning CSS, it’s a combination of art and craftsmanship. As always, you do not want to memorize all the possible CSS properties but be able to understand the abilities and the features that CSS can provide and then be able to refer to those as needed. As you practice through examples, it will get much clearer and easy to you.

Anatomy of CSS

Let’s look at the below CSS in a bit more detail:

The whole structure is called a rule set (but often “rule” for short). Note the names of the individual parts:

Selector : The HTML element name at the start of the rule set. It selects the element(s) to be styled (in this case, <p> elements). To style a different element, just change the selector.

Declaration : A single rule like color: red; specifying which of the element’s properties you want to style.

Properties : Ways in which you can style a given HTML element. (In this case, color is a property of the <p> elements.) In CSS, you choose which properties you want to affect in your rule.

Property value : To the right of the property, after the colon, we have the property value, which chooses one out of many possible appearances for a given property (there are many color values besides red).

Note the other important parts of the syntax:

• Each rule set (apart from the selector) must be wrapped in curly braces ({}).
• Within each declaration, you must use a colon (:) to separate the property from its values.
• Within each rule set, you must use a semicolon (;) to separate each declaration from the next one.

So to modify multiple property values at once, you just need to write them separated by semicolons, like this:

CSS Basic Overview

This video introduces CSS, explains how to link a CSS file with an HTML document and teaches the syntax of the language along with the most common properties.  It is a great place to get started toying around with css in replit before deeping your knowledge.

Source: Jake Wright

CSS Selectors & Pseudo Elements

Introducing CSS Selectors

A CSS selector is the part of a CSS rule set that actually selects the content you want to style. Let’s look at all the different kinds of selectors available, with a brief description of each.

Universal Selector

The universal selector works like a wildcard character, selecting all elements on a page. Every HTML page is built on content placed within HTML tags. Each set of tags represents an element on the page. Take a look at the following CSS example, which uses the universal selector:

In this repl.it, we apply the Universal Selector to the HTML.

In the “style.css” file, The three lines of code inside the curly braces (color, font-size, and line-height) will apply to all elements on the HTML page. As seen here, the universal selector is declared using an asterisk (*). You can also use the universal selector in combination with other selectors.

Element Type Selector

Also referred to simply as a “Type Selector”. This selector must match one or more HTML elements of the same name. Thus, a selector of nav would match all HTML nav elements, and a selector of <ul> would match all HTML unordered lists, or <ul> elements.

The following example uses an element Type Selector to match all <ul> elements:

Take a look at the repl.it below for a demonstration of what happens when we apply the above CSS to the HTML:

There are three main elements making up this part of the page: Two <ul> elements and a <div> element. The CSS will apply only to the two <ul> elements while not to the <div> element. Were we to change the element type selector to use <div> instead of <ul>, then the styles would apply to the <div> element and not to the two <ul> elements.

Also note that the styles will not apply to the elements inside the <ul> or <div> elements. That being said, some of the styles may be inherited by those inner elements.

ID Selector

An ID selector is declared using a hash tag, or pound symbol, (#), preceding a string of characters. The string of characters is defined by the developer. This selector matches any HTML element that has an ID attribute with the same value as that of the selector, but minus the hash symbol (#).

Here’s an example:

This CSS uses an ID selector to match an HTML element such as:

<div id="container"></div>

In this case, the fact that this is a <div> element, or any other kind of HTML element for that matter, has no effect. As long as it has an ID attribute with a value of container, the styles will apply.

An ID element on a web page should be unique. That is, there should only be a single element on any given page with an ID of container. This makes the ID selector quite inflexible, because the styles used in the ID selector rule set can be used only once per page.

If there happens to be more than one element on the page with the same ID, the styles will still apply, but the HTML on such a page would be invalid from a technical standpoint, so you’ll want to avoid doing this.

In addition to the problems of inflexibility, ID selectors also have the problem of very high specificity.

Class Selector

The class selector is the most useful of all CSS selectors. It’s declared with a dot (.) preceding a string of one or more characters. Just as is the case with an ID selector, this string of characters is defined by the developer. The class selector also matches all elements on the page that have their class attribute set to the same value as the class, minus the dot (.).

Take the following rule set:

These styles will apply to the following HTML element:

<div class="box"></div>

The same styles will also apply to any other HTML elements that have a class attribute with a value of box. Having multiple elements on a single page with the same class attribute is beneficial, because it allows you to reuse styles, and avoid needless repetition. In addition to this, class selectors have very low specificity. We will talk about this in more detail later on in the course.

Another reason the class selector is a valuable ally is that HTML allows multiple classes to be added to a single element. This is done by separating the classes in the HTML class attribute using spaces. Here’s an example:

<div class=”box box-more box-extended”></div>