Lenio Web Bootcamp

# Selectors

CSS uses selectors to find (or select) the HTML elements that you want to style.

selector {
   propertyA: valueA;
   propertyB: valueB;
}

There are different types of selectors, among which we can find:

# Basic selectors

<nav class="myClass">
  <ul>
  <li id="myId"></li>
  <li></li>
  </ul>
</nav>

.myClass{}

#myId{}

li{}

*{}

# Class selectors ( .myClass )

One of the most used ways of applying styles, since it selects all the elements that have the attribute 'class' given. It can be added to as many elements as you want.

<html>
  <head>
    <style>
    .bold-text{
      font-weight: 700;
      font-size:1.25rem;
    }
    </style>
  </head>
  <body>
  <h1 class="bold-text">This is a heading</h1>
  </body>
</html>

# Id Selector ( #myId )

Select an element based on the value of its id attribute. The id selector is preceded by a # (hash)

WARNING

The id selector should be unique and only used once in a single HTML element

# Universal selector ( * )

The * selector chooses all elements.

In the following example, every text in the page will have the color red.

  * {
    color: red;
  }

Selectors can also be combined by using ,

  h6,h5,h4{
    color: red;
  }

TIP

More about selectors (opens new window)

# Inheritance

Many of the CSS properties are inherited. This means that if no specific value is assigned to them, they will inherit the value of the parent element in the HTML hierarchy. CSS inheritance avoids code repetition and applies to HTML tags as well as to the id and class selectors.

Among the main properties that CSS defines as 'inherited / inherit' are:

font-*
color
line-height
text-align
text-justify
text-transform
cursor
visibility

List of properties with default inherit (opens new window)

← Units →