Lesson 3: CSS Selectors and Properties

Selectors

CSS selectors define which HTML elements a style will apply to:

Type Selector: Targets all elements of a type.

p {
  color: black;
}

Class Selector: Targets elements with a specific class.

<p class="highlight">This is highlighted.</p>

.highlight {
  background-color: yellow;
}

ID Selector: Targets a single element with a specific ID.

<h1 id="main-title">Welcome!</h1>

#main-title {
  font-size: 2em;
  color: green;
}

Group Selector: Combines multiple selectors.

h1, h2, p {
  margin: 10px;
}

Common CSS Properties

Colors:

h1 {
  color: blue; /* Text color */
  background-color: lightgray; /* Background color */
}

Font Styles:

p {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  font-weight: bold;
}

Spacing:

div {
  margin: 20px; /* Space outside the element */
  padding: 10px; /* Space inside the element */
}

Borders:

img {
  border: 2px solid black;
  border-radius: 10px; /* Rounded corners */
}