CSS selectors
CSS stands for Cascading Style Sheets and is a set of selectors and options for describing how a HTML element should be presented.
A CSS selector is used to tell the browser which elements to style. Here is a couple of examples:
<h1>A title</h1>
<p>A paragraph</p>
<article class="post"></article>If we want to style the h1 or the p element, we do this in CSS:
h1 {
STYLING GOES HERE
}
p {
STYLING GOES HERE
}But there is a small problem here. The two selectors here will style all h1 and all p elements. What if we want to select an element based on an attribute?
.post {
STYLING GOES HERE
}To select an element with a certain class, we just add a "." infront of the class name.
A quick example
Now that you know a little bit basics, we can create a simple example. I will explain below what's happening.
<!DOCTYPE html>
<html>
<head>
<title>Site name</title>
<style>
.comment {
background: red;
}
p {
font-size: 30px;
}
</style>
</head>
<body>
<article class="comment">
<p>This is a paragraph</p>
</article>
</body>
<html>If you copy this code into a file and open it in a browser, you will see a red square with some black text inside.
We added an article-element and gave it a class name of "comment". Inside the article-element, we added a paragraph.
To style the article-element, we selected it using ".comment". We added a background option to the ".comment" and set it to "red". Feel free to change this to blue, green or any other color you can think of.
For the paragraph, we just set the font size to 30px;
Importancy of a selector
Some selectors override others and some are more important than others.
<!DOCTYPE html>
<html>
<head>
<title>Site name</title>
<style>
article {
background: blue;
color: white;
}
.comment {
background: red;
}
p {
font-size: 30px;
}
</style>
</head>
<body>
<article class="comment">
<p>This is a paragraph</p>
</article>
</body>
<html>If you look at this code, you see that we selected all "article" elements. The background is set to blue and the color (the text color) is set to white. If you open this in your browser, you will see that the background is still red.
The text will be white because the selector ".comment" doesn't have a color option.
This is because a class-selector is more important than a regular element-selector. Also, a browser reads from the top and down. So if you add another ".comment" like this:
<!DOCTYPE html>
<html>
<head>
<title>Site name</title>
<style>
article {
background: blue;
color: white;
}
.comment {
background: red;
}
.comment {
background: green;
}
p {
font-size: 30px;
}
</style>
</head>
<body>
<article class="comment">
<p>This is a paragraph</p>
</article>
</body>
<html>You will see that the background is green. This is because the lower or "closer" the style is to an object, the more important it is. It's a little bit confusing at the beginning.
I recommend that you try to play around with some elements and classes. This way it will be easier for you to understand.
The next part
In the next part of this series, we will learn more about CSS and also create a couple of more realistic examples.