When you style your HTML page, you need to tell CSS where and how to apply those styles. After all, just because you want headers to be blue doesn't mean you also want paragraphs to be blue. You can select which elements you want styled a certain way using selectors. There are many different types of selectors. Let's go over each one.
Tag Selectors
Tag selectors are used to select elements by their tag name. For example, to select all <p> elements, you would use the following selector:
p {
color: red;
}
Another example would be to select all <h1> elements:
h1 {
color: red;
}
Class Selectors
Class selectors are used to select elements by their class. For example, to select all elements with the class="planet" class, you would use the following selector:
.planet {
color: red;
}
Class selectors start with a . and can be used in the same way as tag selectors.
ID Selectors
ID selectors are used to select elements by their ID. For example, to select an element with the ID planet, you would use the following selector:
#planet {
color: red;
}
ID selectors start with a # and can be used in the same way as tag selectors.
Attribute Selectors
HTML elements can have attributes on them. CSS provides a way to target those elements too. All you need to do is append the attribute inside square brackets. For example, to select all a elements with the href attribute, you would use the following selector:
a[href] {
color: purple;
}
This will turn all a tags that contain an href attribute the color purple, essentially targeting all links.
Now what if you want to target elements that contain a specific value for a certain attribute? Simply append the value of the attribute right next to it.
Let's say you want to target all number inputs:
<input type="number">
You can make your selector look like this:
input[type="number"] {
width: 10rem;
}
Also feel free to target multiple attributes, like so:
input[type="number"][data-role="phone-number"] {
width: 10rem;
}
Attribute selectors are a powerful way to target elements because they can target elements with multiple attributes.
Properties and Values
A single line of CSS consists of two things, a property and a value. Properties are the things that you want to style, and values are the things that you want to apply to those properties. An example of a CSS declaration would be:
color: black;
The property here is color and the value is black.
Lengths
For so many CSS properties like font-size, line-height, margin, padding, just to name a few, you will have the option to give a value which represents a length.
A length can be expressed with a number followed by a unit, and you have the option of using absolute or relative units.
Absolute Lengths
Absolute lengths are those that do not change. These are all the absolute length units:
- px: the unit for pixels
- pt: the unit for points
- cm: the unit for centimeters
- mm: the unit for millimeters
- in: the unit for inches
- pc: the unit for picas
Relative Lengths
Relative lengths are lengths that change relative to something else. Here are all the units for relative lengths:
- %: the unit for percentages
- em: relative to the current font size
- rem: relative to the current font size on the
htmlelement - vw: relative to the width of the viewport divided by 100
- vh: relative to the height of the viewport divided by 100
- vmin: relative to the smaller viewport's dimension divided by 100
- vmax: relative to the larger viewport's dimension divided by 100
- ch: relative to 0
- ex: relative to the x-height of font
In reality, you're only going to use a couple of these, like px, rem or %. This is a great tool to help you convert between some of the more popular units.
Recap
Here is a quick refresher on some of the terms covered here:
Selector: tells CSS which elements to style.
Property: tells CSS what you are changing.
Value: tells CSS to how you want that element to change.
