If you’re new to CSS, you might not know how to reference elements in order to apply styles to them. Well, in this video, we cover just how to do that.
In basic CSS, there are three ways to select elements for styling:
- By Element
- By ID
- By Class
When we want to apply style rules to an element, we need a way to tell the CSS engine how to select the element for styling.
If we want to style all instances of a particular element — say paragraph tags — we can do that by calling out the p tag directly.
p {
color: #000000;
font-weight: bold;
}We could do the same with the body tag if we want.
body {
background-color: red;
}Or with div tags, like so.
div {
background: grey;
}But what if we’re trying to target something like a div and we don’t want every div to get the same style rules?
Well, if we have a div with an ID, we can reference that by typing out the hashtag and then the ID name to apply styling to just that element.
NOTE: A rule with HTML is that elements using an ID should only exist once per page.
Sample HTML
<div id="special_div">This is some special content.</div>#special_div {
font-size: 20px;
}That style will apply ONLY to this one div on the page.
Now what if we want to apply styling to more than one element but not all?
For that, we’d use a class. In CSS, a class can be applied to any visible element one or more times. You can even use multiple classes per element.
Let’s try some different classes here.
.foo {
background: red;
margin: 10px 0;
}.bar {
color: blue;
}Classes are super helpful for sharing styling across multiple elements and for applying behavior selectively.
If you think of something like a button that will have a base button style, you could have a class called “button” and then have another class called “button-arrow” that applies an arrow after the text and gives the button rounded corners.
Really, the possibilities are endless, but this just gives you an idea of the power of using classes to style your elements.
There are more advanced selectors we’ll go into in another video, but they are completely optional; you could use the three selectors in this video to design whole layouts and in most cases, people do.