CSS - Seletores

Class

<!-- index.html -->
<!-- Head starts -->
<style>
  .red-text {
    color: red
  }
</style>
<!-- Head ends -->
<!-- Body starts -->
<h1 class="red-text">Hello, World!</h1>
<!-- Body ends -->

Id

<!-- index.html -->
<!-- Head starts -->
<style>
  #root {
    color: green;
  }
</style>
<!-- Style block end -->
<!-- Head ends -->
<!-- Body starts -->
<div id="root">Hello, World!</div>
<!-- Body ends -->

Type

<!-- index.html -->
<!-- Head starts -->
<style>
  [type='radio'] {
    margin: 20px;
  }
</style>
<!-- Style block end -->
<!-- Head ends -->
<!-- Body starts -->
<label for="some-radio-button">
  <input
    type="radio"
    name="some-radio-button"
    id="some-radio-button"
    checked
  >
  Selector Styling
</label>
<!-- Body ends -->

Tag

<!-- index.html -->
<!-- Head starts -->
<style>
  h1 {
    color: blue
  }
</style>
<!-- Head ends -->
<!-- Body starts -->
<h1>Hello, World!</h1>
<!-- Body ends -->