Hackforge Academy

Explanation

CSS selectors are used to target HTML elements for styling. Common selectors include element, class, and ID selectors.

Code:

h1 {
  color: blue;
}

.title {
  color: green;
}

#header {
  background: lightgray;
}

Explanation

The universal selector (*) applies styles to all elements on the page and is often used for resetting margins and padding.

Code:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Explanation

Descendant and child selectors target elements based on their relationship in the HTML structure.

Code:

div p {
  color: blue;
}

div > p {
  font-weight: bold;
}

Explanation

Attribute selectors target elements based on their attributes, making them useful for styling specific input types or links.

Code:

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

a[target="_blank"] {
  color: red;
}

Explanation

Pseudo-classes and pseudo-elements allow styling based on element state or specific parts of an element.

Code:

a:hover {
  color: orange;
}

p::first-letter {
  font-size: 24px;
}