Home / CSS

CSS Syntax and Basic Structure

CSS (Cascading Style Sheets) is a powerful language used to format and style the structure of a web document written in HTML. Understanding the syntax and basic structure is essential for creating visually appealing and user-friendly web pages.

CSS Syntax

CSS consists of a set of rules that define how elements in an HTML document should be displayed. The syntax of a CSS rule consists of two parts: a selector and a declaration block.

Selector

The selector determines which HTML elements the rule should apply to. It can target specific elements, classes, IDs, or groups of elements. The most common selector is the element selector, which targets all instances of a particular HTML element. For example, to target all <h1> elements, the selector would be:

h1 {
  /* Declaration block goes here */
}

Declaration Block

The declaration block contains one or more declarations, separated by semicolons. Each declaration consists of a property and a value, specifying how the selected elements should appear. For instance:

h1 {
  color: red;
  font-size: 24px;
  font-family: Arial, sans-serif;
}

In this example, the color, font-size, and font-family are properties, while red, 24px, and Arial, sans-serif are their corresponding values.

Basic Structure of a CSS Document

To apply CSS styles to an HTML document, you need to link the CSS file to your HTML file. The basic structure of a CSS document involves the following:

Linking CSS to HTML

In the <head> section of your HTML document, you should include a <link> tag that specifies the path to your CSS file. The link tag looks like this:

<link rel="stylesheet" href="styles.css">

Ensure that the href attribute points to the location of your CSS file.

Selectors and Rule Definitions

Inside the CSS file, you can define various rules to style different elements on your web page. Each rule consists of a selector followed by a declaration block. As mentioned earlier, the selector identifies the element(s) you want to style, while the declaration block includes the properties and values that specify how those elements should appear.

/* Selector 1 */
h1 {
  color: blue;
  font-size: 32px;
}

/* Selector 2 */
p {
  color: gray;
  font-size: 16px;
}

Applying Styles to HTML Elements

To apply the defined styles, you need to use the appropriate selector within your HTML document. You can add HTML tags or assign classes or IDs to your elements, allowing you to target them with CSS. For example:

<h1>Heading 1</h1>
<p>Paragraph text</p>

In this case, the h1 element will have the styles defined under Selector 1, and the p element will have the styles under Selector 2.

Conclusion

Understanding CSS syntax and the basic structure of a CSS document is fundamental to effectively styling web pages. By using selectors and declaration blocks, you can target specific elements and define how they should be displayed. Remember to link your CSS file to your HTML document and apply the appropriate selector in order to apply the desired styles. With CSS, you can transform a plain HTML document into a visually appealing and engaging web page.