Home Learn CSS Basic Syntax and Structure of a CSS Rule

Lesson 3 of 29

In Progress

← Previous Next→

Basic Syntax and Structure of a CSS Rule

Yasin Cakal

CSS (Cascading Style Sheets) is a language used to style and layout web pages. It works alongside HTML, the markup language used to structure content on the web. While HTML provides the structure and content of a web page, CSS is used to style and present that content in a visually appealing way.

In this article, we’ll cover the basic syntax and structure of a CSS rule, which is the building block of CSS. We’ll start by explaining what a CSS rule is and how it is used, and then we’ll go over the different parts of a CSS rule in detail.

What is a CSS Rule?

A CSS rule is a set of instructions that tells the browser how to style a specific element or group of elements on a web page. A CSS rule consists of a selector and a declaration block. The selector specifies which elements on the page the rule should be applied to, and the declaration block contains one or more declarations that define the style properties and values to be applied.

For example, consider the following CSS rule:

h1 {
  color: blue;
  font-size: 24px;
}

This rule has a selector of “h1”, which means it will be applied to all h1 elements on the page. The declaration block contains two declarations: one that sets the color of the text to blue, and one that sets the font size to 24 pixels.

Selectors

Selectors are used to specify which elements on the page a CSS rule should be applied to. There are many different types of selectors, including element, class, and ID selectors.

Element selectors are used to style all elements of a particular type on the page. For example, the following rule will apply to all h1 elements on the page:

h1 {
  color: blue;
}

Class selectors are used to style a group of elements that have a common class attribute. Class selectors are identified with a period (.) followed by the class name. For example, the following rule will apply to all elements with a class of “warning”:

.warning {
  color: red;
}

ID selectors are used to style a single element on the page that has a unique ID attribute. ID selectors are identified with a pound sign (#) followed by the ID name. For example, the following rule will apply to the element with an ID of “header”:

#header {
  background-color: black;
  color: white;
}

Declarations and Declaration Blocks

Declarations are used to define the style properties and values that should be applied to the elements selected by a CSS rule. Each declaration consists of a property and a value, separated by a colon (:). Multiple declarations are separated by a semi-colon (;).

Declaration blocks are the portion of a CSS rule that contains the declarations. They are surrounded by curly braces ({}).

For example, the following CSS rule has a declaration block with three declarations:

h1 {
  color: blue;
  font-size: 24px;
  font-weight: bold;
}

Comments

Comments are used to add notes or explanations to your CSS code. They are not interpreted by the browser and are used solely for the benefit of the developer.

Comments in CSS are identified with a forward slash and an asterisk (/). The comment begins at the start of the comment marker and ends at the end of the comment marker (/).

For example, the following CSS rule includes a comment:

/* This is a comment */
h1 {
  color: blue;
}

Putting it all Together

Now that we’ve covered the basic syntax and structure of a CSS rule, let’s put it all together with an example.

Consider the following HTML code:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <h1 class="header">Welcome to My Website</h1>
  <p class="warning">This website is under construction.</p>
  <p>Thank you for visiting.</p>
</body>
</html>

To style this HTML content with CSS, we can use the following CSS rules:

/* This is a comment */
h1 {
  color: blue;
  font-size: 24px;
}

.warning {
  color: red;
}

#header {
  background-color: black;
  color: white;
}

In this example, we have three CSS rules. The first rule has a selector of “h1” and will be applied to all h1 elements on the page. The second rule has a class selector of “.warning” and will be applied to all elements with a class of “warning”. The third rule has an ID selector of “#header” and will be applied to the element with an ID of “header”.

Best practices for writing CSS rules

Now that you have a basic understanding of the syntax and structure of CSS rules, here are a few best practices to keep in mind as you start writing your own CSS:

Keep your code organized: Use comments, indentation, and clear naming conventions to make your code easy to read and understand.
Use shorthand properties: Many CSS properties have a shorthand version that allows you to specify multiple values in a single declaration. For example, instead of using separate declarations for font-size, font-style, and font-weight, you can use the font shorthand property to specify all three values at once.
Use efficient selectors: Choose selectors that are specific and targeted, rather than using broad selectors that could apply to many elements on the page. This will help to ensure that your styles are applied to the correct elements and reduce the risk of unintended consequences.
Test your code: Always test your CSS code in multiple web browsers to ensure that it is working as intended. Different browsers may render your CSS differently, so it’s important to test your code in as many different environments as possible.
Keep your code up to date: As web standards and technologies change, it’s important to keep your CSS code up to date. Make sure to stay current with the latest best practices and techniques, and consider using tools like CSS preprocessors and task runners to help automate your workflow.

Conclusion

By understanding the basic syntax and structure of a CSS rule, you can effectively style and layout your web pages. Remember to keep your code organized, efficient, and up to date, and always test your code in multiple environments to ensure that it is working as intended.

Exercises

To review these concepts, we will go through a series of exercises designed to test your understanding and apply what you have learned.

Explain the difference between an element selector and a class selector.

An element selector is used to style all elements of a particular type on the page. For example, the following rule will apply to all h1 elements on the page:

h1 {
  color: blue;
}

A class selector is used to style a group of elements that have a common class attribute. Class selectors are identified with a period (.) followed by the class name. For example, the following rule will apply to all elements with a class of “warning”:

.warning {
  color: red;
}

Write a CSS rule that styles all elements with a class of “highlight” with a background color of yellow and a font weight of bold.

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

Explain the purpose of a declaration block.

A declaration block is the portion of a CSS rule that contains the declarations. It is surrounded by curly braces ({}). Declarations are used to define the style properties and values that should be applied to the elements selected by a CSS rule.

For example, the following CSS rule has a declaration block with two declarations:

h1 {
  color: blue;
  font-size: 24px;
}

Write a CSS rule that styles all unordered lists with a font size of 16px and a margin of 20px.

ul {
  font-size: 16px;
  margin: 20px;
}

Explain the purpose of comments in CSS.

Comments are used to add notes or explanations to your CSS code. They are not interpreted by the browser and are used solely for the benefit of the developer. Comments in CSS are identified with a forward slash and an asterisk (/). The comment begins at the start of the comment marker and ends at the end of the comment marker (/).