1. A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s)
2. For example, the pseudo-class :hover can be used to select a button when a user's pointer hovers over the button and this selected button can then be styled
3. A pseudo-class consists of a colon (:) followed by the pseudo-class name (e.g., :hover)
4. A functional pseudo-class also contains a pair of parentheses to define the arguments (e.g., :dir())
5. The element that a pseudo-class is attached to is defined as an anchor element (e.g., button in case button:hover)
6. Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like
   1. the history of the navigator (:visited, for example),
   2. the status of its content (like :checked on certain form elements)
   3. or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not)

<button class="mybtn">Hover </button> 

button {
    font-size: 2em;
    font-family: Arial, Helvetica, sans-serif;
}

button:hover {
    color: white;
    background-color: red;
}