Understanding CSS Selectors and Properties

Tutorial 4 of 5

Understanding CSS Selectors and Properties

1. Introduction

Goal of the tutorial: This tutorial aims to give you a deeper understanding of CSS by exploring selectors and properties. By the end of this tutorial, you'll be able to identify HTML elements and apply styles to them using various CSS properties.
What you'll learn: You'll learn about the different types of CSS selectors, how to use them, and how to apply CSS properties to these selectors to style your HTML elements.
Prerequisites: Basic knowledge of HTML and a basic understanding of CSS is recommended.

2. Step-by-Step Guide

CSS selectors are used to "find" (or select) HTML elements based on their element name, id, class, attribute, and more. Once elements are selected, you can then apply styles to them using CSS properties.

CSS Selectors

There are many types of CSS selectors, but the most basic are:

Element Selector: This targets the HTML element directly.

p {
    color: red;
}

This will select all <p> elements in the HTML document and change their color to red.

Id Selector: This targets the HTML element with a specific id attribute.

#intro {
    color: blue;
}

This will select the HTML element with id="intro" and change its color to blue.

Class Selector: This targets the HTML elements with a specific class attribute.

.myClass {
    color: green;
}

This will select all HTML elements with class="myClass" and change their color to green.

CSS Properties

CSS properties are used to style the elements selected by the CSS selectors. There are numerous CSS properties, but let's look at a few common ones:

color: This property is used to set the color of the text.

p {
    color: red;
}

font-size: This property is used to set the size of the text.

p {
    font-size: 20px;
}

background-color: This property is used to set the background color of an element.

p {
    background-color: yellow;
}

3. Code Examples

Here are some practical examples:

Example 1

<!DOCTYPE html>
<html>
<head>
<style>
/* This is a CSS comment */
/* The color property changes the color of the text */
p {
  color: red;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

This will change the color of all <p> elements to red.

Example 2

<!DOCTYPE html>
<html>
<head>
<style>
/* The # sign is used for id selectors */
/* The color property changes the color of the text */
#intro {
  color: blue;
}
</style>
</head>
<body>

<p id="intro">This is an intro paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

This will change the color of the <p> element with id="intro" to blue.

4. Summary

In this tutorial, you've learned about CSS selectors and properties. You've learned how to use element, id, and class selectors, and how to use properties such as color, font-size, and background-color.

For further learning, you can explore more about CSS selectors such as attribute selectors, pseudo-class selectors, and pseudo-elements selectors, and more CSS properties.

5. Practice Exercises

Write a CSS to change the background color of all <div> elements to purple.
Write a CSS to change the font size of the <p> element with id="content" to 25px.
Write a CSS to change the color of the <h1> elements with class="heading" to orange.

Solutions

div {
    background-color: purple;
}

#content {
    font-size: 25px;
}

.heading {
    color: orange;
}

Practice more with different HTML elements, CSS selectors, and properties. Try to style a simple webpage using what you've learned.