Basic CSS Syntax

Hello, everyone! Welcome to the Basic CSS Syntax lesson.

In this lesson, we will learn the basic syntax of CSS.

What is Syntax?

Syntax is the set of rules that define how code should be written. CSS syntax is relatively simple and easy to learn.

CSS Rules

CSS rules consist of three parts:

• Selector: The selector is used to specify the elements you want to style.
• Property: The property is the attribute you want to modify.
• Value: The value is the new setting for the property.

Selectors

Selectors are used to specify the elements you want to style. There are many different types of selectors, each with its own function.

Example

The following CSS code uses an element selector to style all h1 elements:

h1 {
  color: red;
}

Properties

Properties are the attributes you want to modify. There are many different CSS properties, each with its own function.

Example

The following CSS code uses the color property to set the color of all h1 elements to red:

h1 {
  color: red;
}

Values

Values are the new settings for properties. Values can be of many different types, such as numbers, strings, colors, etc.

Example

The following CSS code uses the value red to set the color of all h1 elements to red:

h1 {
  color: red;
}

Summary

In this lesson, we learned the basic syntax of CSS. We saw that CSS rules consist of three parts: a selector, a property, and a value. We also explored some examples of selectors and properties.

In the next lesson, we will learn more about selectors.

Note

CSS syntax is a bit different from HTML syntax. For example, CSS properties must always be written in double quotes, while HTML properties can be written without quotes.

Tip

If you’re starting to learn CSS, I recommend using a code editor that provides CSS syntax highlighting. This will help you learn the syntax and avoid errors.

Exercises

To practice what you’ve learned in this lesson, try writing the following CSS rules:

• Set the color of all p elements to blue.
• Set the font size of all h2 elements to 16px.
• Set the text alignment of all div elements to center.

p {
  color: blue;
}

h2 {
  font-size: 16px;
}

div {
  text-align: center;
}
  

Compartilhar

Compartilhar

Siga-me