Learn CSS Syntax & Selectors

Lesson Content

CSS Syntax and Selectors

Introduction

It’s time to finally start coding in CSS! CSS is used by selecting our HTML elements and then giving them properties. In this lesson, you will learn the very basics of CSS syntax and Selectors along with also understanding the different methods we can use to style our pages.

Overview

By the end of this lesson, you should be able to:

- Understand the syntax of a CSS declaration
- Explain what a CSS selector is
- Understand universal and type selectors
- Understand how to select elements using Classes and IDs

CSS - The Syntax

Before undersanding the different ways to select and style our HTML elements using CSS, we first have to understand the syntax of CSS.

Let’s take in what is happening here. The selector (in red) is the element(s) we are trying to target. Here, we are making all the <p> elements the color red. Throughout this lesson, you will learn about the different selectors we have here in CSS and the different ways to select our elements.

The next part we need to understand in the CSS syntax is the property and property-value keywords. In CSS, a property is a characteristic or attribute of an HTML element that you can change to control its appearance. In the above example, we are using the color property to change the color of our <p> elements (paragraph tags).

When we use a property in CSS, we have to give that property a property-value as well. In the above example, we are giving the property color a property value of red.

As you learn more and more CSS, you will be introduced to different properties and the unique values you can give each property!

Selectors

CSS gives us many different ways to select specific content and elements from our HTML file. In the next few sections, you will learn and understand the different selectors and their purposes.

The Universal Selector

Once you start to write CSS, you will notice that CSS is composed of pieces called selectors As the name states, selectors select parts of an HTML webpage and apply certain changes to it.

The universal selector is marked with a * . When we use that as our selector, it will select every single element in our HTML file. In the example above, we are giving all of our HTML elements the background-color of yellow. Normally, it’s not always a great idea to use this selector because it can cause unwanted changes, but as you use more CSS, there may be cases where using the universal selector be necessary.

The Type Selector

So we know how to select all the elements on our webpage using the universal selector, but what if we wanted to select specific elements like all <h1> elements or <p> elements? For this, we can use the type selector. Here is a demonstration:

<!-- Our HTML file -->

<body>

    <p>random Content</p>
    <h1>Header</h1>
    <p>random Content2</p>
    
</body>

/* Our CSS file */

p {
    color:red;
}

h1 {
    color: blue;
}

Take a look at our CSS file. Let’s start by looking at lines 3 – 5. Our selector is p, meaning we are selecting all the paragraph elements in our HTML page. Our property is color, and we are giving our property color a property-value of red. What this means is that all the <p> elements on our page will be the color red

Now let’s look at lines 7 – 9. Our selector is h1, meaning that we are selecting all the header1 elements on our HTML page. Our property here is also color, and the value that we are giving our property color a property-value of blue. These lines are telling our browser that all the <h1> elements on our page should be the color blue.

Now let’s see how the our website looks with the CSS above:

Notice how our p and h1 elements are red and blue, respectively. Hopefully by now, you are getting a hang of understanding selectors in CSS. We will be doing a ton of practice throughout this lesson and the next few, so it’s alright to be a bit confused.

Here are some more example using the type selector:

In the above 3 pictures, you can see that we are using type selectors to select certain types of elements that we want. If we wanted to select all the <h1> elements on a document, we just put that in as our selector. We can select elements like <div>, <span, almost anything.

We can even select the entire <body> element using the body selector. Let’s say you want to change the color of the entire screen. We can use the body selector to do that as shown above

Classes

So far, we have learned how to select all the elements on our webpage and how to select specific types of elements like <h1> elements. However, what if we wanted to select only one specific element? How can we do that? This is where classes come into play.

Classes are a way to give specific HTML elements a name or identifier, which can then be used to apply a set of styles to all elements with that class. For example, we can give all of our button elements a class of btn and then specify a set of styles that will be applied to all buttons with that class.

To create a class in CSS, we use the following syntax:

.classname {
    /* styles go here */
}

Something important to note is that when selecting classes, you must put a period . before the class name. Class selectors are denoted with a ., and then the classname. Take a look:

/* This is WRONG */
classname {

}

/* This is RIGHT */
.classname {

}

With the syntax out of the way, let’s take a look at an example of using classes.

In the example above, we have a <h1> element and a <p> element. Both of them have the class of city. In our CSS file, we are giving the elements with the class of city the color blue.

In CSS, elements can have multiple classes, and multiple elements can have the same class.

ID's

Classes are great if we want to target a certain few elements. However, what if we want to target a single element? We technically can use a class, but CSS provides us with something much better: the ID. An ID in CSS behaves the exact way a class does, however instead of belonging to multiple elements, they can only be used in one element. Here is the syntax for a CSS ID:

#idname {
    /* styles go here */
}

Instead of using a . like classes do, IDs in CSS use a #. Here is an example of using an ID:

Above we can see how ID’s work. They are the exact same as classes, with the only quirk being that we can only give them to a single element. Here, the ID mainheader1 is given to the <h1> element. If we gave another element the same ID, our styles might not be applied properly.

Classes and IDs might be a bit confusing – and that’s ok. We will do a lot of practice with them in the next few lessons. For now, here is a little bit of practice to help you understand the concepts better.

Practice

Before beginning, go ahead and open your coding folder. Start by making an HTML and CSS file. Create the boilerplate in your HTML file and make sure to link them before beginning this lesson’s practice!
In your HTML file, create the following content:
1. Create two <p> tags
2. Create one <div> tag
3. Create three <h1> tags
Now let’s select our tags!
1. Use a type selector to select all the p (paragraph) tags and give them a color of blue
2. Give the singular div we made a class of divclass and give it a color of red
3. Give two h1 tags the classes of h1class. Select the class and set the color of the element to green
4. Give the last h1 an id of h1id. Select the id and set its color to purple
This was just a little bit of practice to make sure we understood classes, selectors, and ID’s. If you can do this, feel free to move on to the next lesson!