3.2 CSS Syntax and Selectors

1.CSS Syntax and Selectors

Learning Content

• CSS Syntax: CSS rules are written as:

	​selector {
    property: value;
	​}
	​Selector: Targets HTML elements.
	​Property: Specifies what to style.
	​Value: Defines the style.

• Types of Selectors:
  • Universal Selector: *
  • Element Selector: Targets HTML tags (e.g., p).
  • Grouping Selector: Targets multiple elements (e.g., h1, p).

p {

    color: red;

    font-size: 16px;

}

Practical Challenge:

• Write CSS to make all paragraphs blue and all headings bold.

2.Classes, IDs, and Element Selectors

Learning Content

• Classes: Style multiple elements. Use . in CSS.
• IDs: Style a unique element. Use # in CSS.

Example:

html

<p class="highlight">This is styled with a class.</p>

<p id="unique">This is styled with an ID.</p>

css

.highlight {
    color: green;
}
#unique {
    font-weight: bold;
}

Practical Challenge:

• Create a CSS file that styles paragraphs with the class highlight in blue and IDs special in red.

3. Pseudo-classes and Pseudo-elements

Learning Content

• Pseudo-classes: Style elements based on their state (e.g., :hover for hover effect).
• Pseudo-elements: Style specific parts of elements (e.g., ::before).

Example:

a:hover {
    color: orange;
}
p::first-line {
    font-weight: bold;
}

Practical Challenge:

• Style all links to change color to green when hovered.