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.
Answers
p { color: blue; } h2 { font-size: 16px; } div { text-align: center; }