Chapter 2: CSS Syntax and Basic Selectors

CSS Syntax

CSS (Cascading Style Sheets) uses a specific syntax to define styles for HTML elements. Understanding CSS syntax is fundamental to creating effective stylesheets.

Basic Syntax

The basic structure of a CSS rule consists of a selector and a declaration block.

selector {
  property: value;
}

Selector: Targets the HTML element(s) you want to style.
Property: Defines which aspect of the element you are styling (e.g., color, font-size).
Value: Specifies the value for the property (e.g., red, 16px).

Example

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Syntax and Selectors</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Welcome to CSS</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

CSS (styles.css):

/* Styling <h1> elements */
h1 {
  color: navy;
  font-size: 24px;
}

/* Styling <p> elements */
p {
  color: darkgreen;
  font-size: 16px;
}

Basic Selectors

Selectors are used to target HTML elements for styling. Here are some basic selectors and their uses:

1. Type Selector

Targets all elements of a specific type.

Syntax:

element {
  property: value;
}

Example:

h1 {
  color: blue;
}

Explanation: Styles all <h1> elements with the color blue.

2. Class Selector

Targets elements with a specific class attribute. Class selectors are prefixed with a dot (.).

Syntax:

.class-name {
  property: value;
}

Example:

.text-blue {
  color: blue;
}

HTML:

<p class="text-blue">This text is blue.</p>

Explanation: Styles elements with the class text-blue with the color blue.

3. ID Selector

Targets a specific element with a unique ID attribute. ID selectors are prefixed with a hash (#).

Syntax:

#id-name {
  property: value;
}

Example:

#main-heading {
  font-size: 32px;
}

HTML:

<h1 id="main-heading">This is the main heading.</h1>

Explanation: Styles the element with the ID main-heading with a font size of 32px.

4. Universal Selector

Targets all elements on the page. It is represented by an asterisk (*).

Syntax:

* {
  property: value;
}

Example:

* {
  margin: 0;
  padding: 0;
}

Explanation: Resets margin and padding for all elements.

5. Attribute Selector

Targets elements based on their attributes and values.

Syntax:

[attribute="value"] {
  property: value;
}

Example:

input[type="text"] {
  border: 1px solid gray;
}

Explanation: Styles <input> elements with type="text" with a gray border.

Combining Selectors

Selectors can be combined to target more specific elements.

Descendant Selector

Targets elements that are descendants of a specified element.

Syntax:

ancestor descendant {
  property: value;
}

Example:

div p {
  color: red;
}

Explanation: Styles <p> elements that are inside <div> elements with the color red.

Class and Element Selector

Combines an element selector with a class selector.

Syntax:

element.class-name {
  property: value;
}

Example:

p.text-blue {
  color: blue;
}

Explanation: Styles <p> elements with the class text-blue with the color blue.

Grouping Selectors

Allows you to apply the same styles to multiple selectors.

Syntax:

selector1,
selector2 {
  property: value;
}

Example:

h1,
h2,
h3 {
  font-family: Arial, sans-serif;
}

Explanation: Styles <h1>, <h2>, and <h3> elements with the Arial font.