Selectors and Declarations

CSS selectors and declarations are the backbone of styling web pages. Selectors target HTML elements, and declarations define the style rules. Let's explore how to use them.

1. Selectors:

CSS selectors determine which elements on the HTML page your styles will apply to. Here are some common types:

Element Selector:

p {
  /* Styles for all paragraphs */
}

Class Selector:

.highlight {
  /* Styles for elements with class="highlight" */
}

ID Selector:

#main-header {
  /* Styles for the element with id="main-header" */
}

Attribute Selector:

input[type="text"] {
  /* Styles for text input elements */
}

Combining Selectors:

header nav {
  /* Styles for nav inside a header */
}

2. Declarations:

Once you've selected an element, you define the style rules with declarations inside curly braces {}. Each declaration consists of a property and a value.

/* Example declarations for a paragraph */
p {
  color: #333;         /* Text color */
  font-size: 16px;     /* Font size */
  margin-bottom: 20px; /* Bottom margin */
}

Property: Describes the aspect of the selected element you want to style (e.g., color, font-size, margin).

Value: Specifies the style for the chosen property (e.g., #333 for color, 16px for font size).

3. Combining Selectors and Declarations:

/* Styles for paragraphs with class "important" */
p.important {
  color: red;
  font-weight: bold;
}

/* Styles for all h2 headings inside a section with id "main-content" */
#main-content h2 {
  text-decoration: underline;
}

By combining selectors and declarations, you can precisely target HTML elements and define their styles.