CSS - Syntax

Ethan D. -

CSS Syntax

A CSS rule consists of a selector and a declaration block. The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.

CSS Rule Example

p {
  color: red;
  text-align: center;
}

p is the selector, and { color: red; text-align: center; } is the declaration block. The declaration block contains two declarations: color: red; and text-align: center;.

CSS Selectors

CSS selectors are used to select the HTML elements you want to style. CSS selectors can be element names, class names, id names, or attribute names.

  1. The element selector selects HTML elements based on the element name.

Element Selector Example

p {
  font-size: 16px;
}
  1. The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element. To select an element with a specific id, write a hash (#) character followed by the id of the element:

ID Selector Example

#my-element {
  background-color: blue;
}
  1. The class selector selects HTML elements with a specific class attribute. To select elements with a specific class, write a period (.) character followed by the class name:

Class Selector Example

.my-class {
  color: green;
}

CSS Declaration Blocks

A CSS declaration block is surrounded by curly braces {} and can contain multiple declarations ending with semicolons (;).

A declaration consists of two parts:

  • Property (predefined name that refers to stylistic features)
  • Value (assigned to properties)

Multiple Declarations Example

{
  color: blue;
  font-size: 12px;
  width: 100%;
}
  • color: blue; sets text color.
  • font-size: 12px; sets font size.
  • width: 100%; sets width relative to its parent container.

By combining selectors and declaration blocks, you can create rules that control how your web pages look.

Using CSS

CSS can be added to HTML documents in three ways: inline, internal, and external.

Inline CSS

Inline styles are used to apply a style to a single HTML element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

Example: Inline Styled Heading

<h1 style="color: blue; font-size: 12px;">Inline Styled Heading</h1>

Internal CSS

Internal styles are defined within the <style> element, inside the <head> section of an HTML page. The internal style sheet should only be used when a single HTML page needs a unique style.

Internal CSS example

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: maroon;
      margin-left: 40px;
    }
  </style>
</head>
<body>

  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>

</body>
</html>

External CSS

With external styles, you can change the look of an entire website by changing just one file. Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section. An external style sheet can be written in any text editor and saved with a .css extension. The external .css file should not contain any HTML tags.

External CSS example

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>

  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>

</body>
</html>

The external styles.css file:

h1 {
  color: navy;
  margin-left: 20px;
}

The most common way to add CSS to HTML pages is by using external CSS files so that multiple pages share the same look and feel.