CSS Basic Syntax

CSS has a simple syntax that is easy to learn and use. It consists of selectors, properties, and values.

A selector is used to select an HTML element or a group of elements that you want to style. For example, you can use the h1 selector to select all h1 elements, or you can use a class selector, such as .highlight, to select elements with the highlight class.

A property is a aspect of the style that you want to change. For example, you can change the color of text using the color property, or you can change the font size using the font-size property.

A value is assigned to the property to specify how the property should be styled. For example, the value of the color property can be set to blue, and the value of the font-size property can be set to 20px.

Here's a simple example to illustrate the CSS syntax:

h1 {
  color: blue;
  text-align: center;
}

.highlight {
  background-color: yellow;
  font-weight: bold;
}

In this example, we have defined two CSS rules. The first rule is for h1 elements, and sets the text color to blue and aligns the text to the center. The second rule is for elements with the highlight class, and sets the background color to yellow and the font weight to bold.

When this CSS is applied to an HTML document, all h1 elements will have blue text that is centered, and all elements with the highlight class will have a yellow background and bold text.

It's important to note that CSS rules should be written in a specific order to ensure that the correct styles are applied. The order of CSS rules is determined by the cascading nature of CSS, where later rules take precedence over earlier rules.

In conclusion, CSS has a simple syntax consisting of selectors, properties, and values. By using CSS, you can control the presentation and style of your HTML document and create a consistent look for your website.