CSS - Lesson 3: Selectors | Andros Fenollosa

Every group of styles must point to one or more HTML tags. That is why CSS selectors let you pick certain elements of a web page to style them. In other words: selectors are made up of a set of rules to identify and apply the styles.

We have different types available. Some are very global, specific, or grouped.

tag

It affects all tags, without any discrimination. Very useful for defining a common style across an entire site.

body {
    color: orange;
}

p {
    color: green;
}

id

It only applies to one tag and, in addition, can only be used once.

It is made up of # + alias.

/* Starts with # + alias */
#saturno {
    color: brown;
}

In your document you must use the id attribute with the alias as the value.

<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<!-- It is applied with the "id" attribute. Omit # in its value. -->
<p id="saturno">Lorem ipsum</p>
<p>Lorem ipsum</p>

Using it is not recommended, since ids are reserved for JavaScript and it is a CSS antipattern.

classes

It only applies to one or several tags. It can be repeated as many times as needed.

It is made up of . + alias.

.mercurio {
    color: gray;
}

.marte {
    color: red;
}

.venus {
    color: yellow;
}

In your document you must use the class attribute with the alias as the value.

<p class="mercurio">Lorem ipsum</p>
<p class="venus">Lorem ipsum</p>
<p id="jupiter" class="marte">Lorem ipsum</p>

You can use it as many times as you need.

In addition, you can apply several classes to the same tag. Just separate them with spaces in its value.

<!-- WRONG -->
<p id="pluton" class="venus" class="marte">Lorem ipsum</p>

<!-- RIGHT -->
<p id="pluton" class="venus marte">Lorem ipsum</p>

Whenever you can, use classes for everything. It is good practice. You will learn some CSS patterns whose principles rely on using only classes.

Activity 1

Use a list to note down what you need to buy at the supermarket. If there is any fruit, change the color of the `

` to the color of that fruit. To do so you will need to create styles, using classes, for each color you need and then apply it in the HTML.

Example.

<style>

.rojo {
    color: red;
}

</style>

<ul>
    <li>Water</li>
    <li class="rojo">apples</li>
    <li>Cookies</li>
</ul>

Activity 2

Starting from the following HTML, add colors, or any other style you have seen in the examples, to give it a more attractive look. You have creative freedom.

<!DOCTYPE html>
<html lang="es">
    <head>
    <meta charset="UTF-8">
    <title>My holidays</title>
    </head>
    <body>
    <h1>Tenerife (Canary Islands)</h1>
    <h2>Climbing a volcano</h2>
    <p>My friends and I set out to walk to the top of the highest volcano in Spain: the Teide. The heat scorched us and within a few minutes we emptied all our canteens. In the following hour we noticed the lizards following us at a certain distance while they licked their lips. It seemed they were going to have a hot dinner that night.</p>
    <p>Another hour later one of my friends twisted his ankle and we decided to leave him to his fate. We never heard from him again, let's hope he is in a better place.</p>
    <p>The next hour we noticed the absence of oxygen. We breathed out of habit. Two more fell into oblivion.</p>
    <p>The last hour we felt a bit hungry from so much walking. We opted for cannibalism.</p>
    <p>Only I was left. What a view! I could even see the island of Gran Canaria. Every stride, wrung-out shirt, aching legs, and human loss was worth it. I was so high up that I could almost touch the stars with my fingertips. It was the chance to marvel at the volcano and find new friends.</p>
    </body>
</html>

Activity 3

Look in the examples for the p with the id Pluton. What color is the text? Why?