This webpage demonstrates five examples of CSS selector patterns that can be used to select and target the HTML elements you want to style.
An element selector changes the style of all elements that match a specific tag name. Every paragraph element on the webpage will be styled.
Example: p {color: blue;}
Class selector targets elements that have a specific class attribute by placing a period (.) before the class name. Any HTML element with, for example, class="highlight" will receive a yellow background.
Example: .highlight {background-color: yellow;}
An ID selector selects one unique HTML element using its specific id attribute. It is defined by placing a hash (#) symbol before the ID name. This will style one element with id="header-main." It should be unique and used only once per HTML document.
Example: #header-main {font-size: 16px;}
The :focus pseudo-class styles an HTML element when it is active and ready to receive keyboard input or user interaction.
Example: Click inside the text box below to see the focus effect.
A hover effect uses CSS’s :hover pseudo-class to temporarily change an element’s appearance when a user moves their mouse cursor over it.
Example: Move your mouse over this link to see the hover effect.