1. Type Selectors
Selectors in CSS let you target HTML elements and apply styles to them. Knowing the basic selectors helps to efficiently and accurately target elements on a page, making CSS a powerful tool for styling web content. In this article, we'll cover the main types of selectors: type selectors, class selectors, ID selectors, group selectors, and universal selectors.
Type selectors target all elements of a specific tag. For instance, if
we want to style all paragraphs on a page, we use a type selector with the
<p> tag.
p {
color: blue;
font-size: 16px;
}
<p>This text will be blue and 16 pixels in size.</p>
<p>The second paragraph with the same styles.</p>
Type selectors are useful when you need to style all elements of a specific kind, like all headers or paragraphs. They give general control over the appearance of a group of elements and simplify website maintenance.
2. Class Selectors
Class selectors let you target elements with a specific class
attribute value. A class is marked with a dot (.) before the
class name. The same class can be used for multiple elements, which makes it
possible to apply the same styles to several elements.
.highlight {
background-color: yellow;
color: blue;
font-weight: bold;
}
<p class="highlight">This text is highlighted with blue on a yellow background.</p>
<p>Regular text without a class.</p>
<div class="highlight">This block is also styled with the highlight class.</div>
Class selectors are versatile and convenient because they allow creating styles that can be applied to different elements. Classes are especially handy when you need to style a group of unrelated elements.
3. ID Selectors
ID selectors target elements with a specific id attribute value.
An ID is marked with the # symbol before the name. Unlike classes,
an ID should be unique on a page, which makes it ideal for styling unique elements
like a header or navigation bar.
#main-header {
font-size: 24px;
color: green;
text-align: center;
}
<h1 id="main-header">Page Header</h1>
<p>This paragraph won’t be affected by the ID selector.</p>
ID selectors apply styles to exactly one element on the page, so they’re used to highlight unique elements with specific styles.
4. Group Selectors
Group selectors let you apply the same styles to multiple elements at once. This is done by separating multiple selectors with a comma, combining them into one CSS rule. Group selectors make the code simpler because they allow setting shared styles for several types of elements.
h1, h2, h3 {
color: navy;
font-family: Arial, sans-serif;
}
<h1>Level 1 Header</h1>
<h2>Level 2 Header</h2>
<h3>Level 3 Header</h3>
<p>This text won’t be affected by the group selector.</p>
Group selectors help reduce CSS code and simplify styling, especially when you need to apply the same properties to different elements, like headers of various levels.
5. Universal Selectors
The universal selector is marked with an asterisk (*) and targets all
elements on the page. This is a powerful tool that allows you to quickly set
base styles for all elements, such as setting consistent margins or defining a
default font. The universal selector is helpful for resetting styles when you
want to remove browser default margins and paddings for more precise style control.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
<h1>Header</h1>
<p>A paragraph of text with zero margins and paddings.</p>
<div>A container with zero margins and paddings.</div>
In this example, the universal selector resets margins and paddings for all elements, helping maintain consistent styles across the page. This trick is often used at the start of a CSS file to create unified styling.
GO TO FULL VERSION