CSS Syntax

CSS (Cascading Style Sheets) is a stylesheet language that is used to describe the presentation of a document written in a markup language, such as HTML. It allows you to control the appearance of elements on a web page, such as their color, font, size, and position.

Basic Syntax

The basic syntax of CSS consists of three parts: a selector, a property, and a value. Here is an example of a CSS rule:

p {
  color: red;
}

In the example above, p is the selector, which specifies which elements the rule applies to. In this case, the rule will apply to all <p> elements on the page.

color is the property, which specifies the aspect of the element's appearance that the rule will change. In this case, the rule will change the color of the text inside the <p> element.

red is the value, which specifies the value for the property. In this case, the rule will set the color of the text to red.

Multiple Rules

You can have multiple rules in a CSS stylesheet, each with its own selector, property, and value. Here is an example of multiple CSS rules:

p {
  color: red;
}
h1 {
  font-size: 36px;
}
.my-class {
  background-color: blue;
}

In the example above, we have three rules: one for <p> elements, one for <h1> elements, and one for elements with the my-class class. Each rule has its own selector, property, and value.

Comments

You can also add comments to your CSS stylesheet, which are ignored by the browser and are only used to provide information or explanations for the code. Comments in CSS start with /* and end with */, and can span multiple lines. Here is an example of a comment in CSS:

/* This is a comment */
p {
  color: red;
}

Importing External Stylesheets

In addition to writing CSS rules directly in your HTML document, you can also import external stylesheets using the @import rule. This allows you to separate your CSS code from your HTML code, and to reuse styles across multiple documents. Here is an example of importing an external stylesheet:

@import url("styles.css");

In the example above, we are importing the styles.css stylesheet into the current document. This will cause the browser to load the styles from the styles.css file and apply them to the current document.