4.1 Type Selectors
CSS selectors are used to define the elements to which styles will apply. The main selectors include type selectors, class selectors, id selectors, and universal selectors. Each of these selectors has its own characteristics and uses.
Type Selectors
Type selectors apply styles to all elements of a specific type. For instance, you can apply styles to all paragraphs (<p>), headings (<h1>, <h2>, etc.) or other HTML tags.
tagname {
property: value;
property: value;
}
p {
color: blue;
font-size: 14px;
}
This selector will apply styles to all <p> elements in the document.
Features:
- Applies to all elements of the specified type
- Convenient for global styles that should apply to all elements of a particular type
4.2 Class Selectors
Class selectors allow styles to apply to one or more elements with a certain class. Classes are defined using the class attribute in HTML and are prefixed with a dot (.) in CSS.
Syntax:
.classname {
property: value;
property: value;
}
Example:
.button {
background-color: green;
color: white;
padding: 10px;
}
This selector will apply styles to all elements that have the button class.
Features:
- You can use the same class for multiple elements
- Allows easy application of the same styles to different elements
4.3 ID Selectors
ID selectors apply styles to an element with a unique identifier. IDs are defined using the id attribute in HTML and are prefixed with a hash (#) in CSS.
Syntax:
#uniq-id {
property: value;
property: value;
}
Example:
This selector will apply styles to the element with the ID main.
/* Selects the element with ID #main */
#main {
width: 800px;
background: yellow;
}
<div id="main">This element will have a width of 800px.</div>
<div>This element will not be styled.</div>
Features:
- ID must be unique on the page
- Used for styling unique elements like the header or main content
4.4 Group Selectors
Group selectors allow the same rule to be applied to multiple elements. They reduce the amount of code and simplify style management.
Syntax:
selector, selector, … {
property: value;
property: value;
}
Example:
/* Selects all h1, h2, and h3 elements */
h1,
h2,
h3 {
font-family: Arial, sans-serif;
}
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>This text will not be styled by this rule.</p>
4.5 Universal Selectors
Universal selectors apply styles to all elements on the page. They are represented by an asterisk (*) and can be useful for resetting styles or applying common styles to all elements.
Syntax:
* {
property: value;
property: value;
}
Example:
This selector will apply styles to all elements on the page, resetting their margins and setting the box model.
<div>Paragraph 1</div>
<div>Paragraph 2</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Features:
- Applies to all elements on the page
- Useful for global style resets or applying basic styles to all elements
GO TO FULL VERSION