Mastering CSS: A Comprehensive Guide to Web Design: Chapter 2: Basic Selectors and Properties
By Shahin Mannan on
June 2, 2024
- Frontend Development
CSS Syntax
CSS uses a simple syntax to define how HTML elements should be styled. A CSS rule consists of a selector and a declaration block:
selector {
property: value;
}
CSS Selectors
Selectors are used to target HTML elements. The most common selectors include:
- Element Selector: Targets all instances of a specified element.
p {
color: blue;
}
- Class Selector: Targets elements with a specific class attribute. Use a period (
.) before the class name.
.myClass {
color: red;
}
- ID Selector: Targets a single element with a specific ID attribute. Use a hash (
#) before the ID name.
#myId {
color: green;
}
Grouping and Nesting Selectors
- Grouping Selectors: Apply the same style to multiple selectors by separating them with commas.
h1, h2, h3 {
color: purple;
}
- Nesting Selectors: Apply styles to elements within a specific context.
.container p {
font-size: 14px;
}
Common Properties
Here are some common CSS properties:
- Color: Sets the text color.
color: blue;
- Background: Sets the background color or image.
background-color: yellow;
- Font: Sets the font family, size, and style.
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
Inheritance and Specificity
Specificity determines which CSS rule is applied when multiple rules target the same element. It's calculated based on the types of selectors used in a rule. The more specific a selector is, the higher its specificity value, and the more precedence it has.
Specificity is calculated using a four-part value (a, b, c, d):
- a: Inline styles (not applicable to selectors)
- b: ID selectors (
#id) - c: Class selectors, attribute selectors, and pseudo-classes (
.class,[attribute],:hover) - d: Type selectors (element names) and pseudo-elements (
h1,::before)
Examples:
- Type Selector
p {
color: blue; /* Specificity: 0, 0, 0, 1 */
}
- Class Selector
.intro {
color: green; /* Specificity: 0, 0, 1, 0 */
}
- ID Selector
#main {
color: red; /* Specificity: 0, 1, 0, 0 */
}
- Inline Style
<p style="color: yellow;">Text</p> /* Specificity: 1, 0, 0, 0 */
Combining Selectors:
- Type + Class Selector
p.intro {
color: purple; /* Specificity: 0, 0, 1, 1 */
}
- Class + ID Selector
#main .intro {
color: orange; /* Specificity: 0, 1, 1, 0 */
}
Specificity Examples:
Let's consider an HTML element:
<p id="main" class="intro">Hello, World!</p>
CSS Rules:
p {
color: blue; /* Specificity: 0, 0, 0, 1 */
}
.intro {
color: green; /* Specificity: 0, 0, 1, 0 */
}
#main {
color: red; /* Specificity: 0, 1, 0, 0 */
}
#main .intro {
color: orange; /* Specificity: 0, 1, 1, 0 */
}
p.intro {
color: purple; /* Specificity: 0, 0, 1, 1 */
}
Applied Specificity:
1. The p selector has the lowest specificity (0, 0, 0, 1).
2. The .intro class selector has higher specificity (0, 0, 1, 0).
3. The #main ID selector has even higher specificity (0, 1, 0, 0).
4. The combined selector #main .intro has higher specificity (0, 1, 1, 0) than individual ID or class selectors.
5. The combined selector p.intro has lower specificity (0, 0, 1, 1) than #main but higher than .intro alone.
Result:
The color applied to the paragraph with id="main" and class="intro" will be orange because the #main .intro rule has the highest specificity.
Exercise:
- Create an HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Specificity Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p id="main" class="intro">Hello, World!</p>
</body>
</html>
- Create a CSS file:
p {
color: blue; /* Specificity: 0, 0, 0, 1 */
}
.intro {
color: green; /* Specificity: 0, 0, 1, 0 */
}
#main {
color: red; /* Specificity: 0, 1, 0, 0 */
}
#main .intro {
color: orange; /* Specificity: 0, 1, 1, 0 */
}
p.intro {
color: purple; /* Specificity: 0, 0, 1, 1 */
}
- Open the HTML file in a browser to see which color is applied to the text.
Coming Up Next
In Chapter 3, we'll dive into the box model, exploring margins, padding, borders, and how they affect the layout of your elements.
Please Sign In to post a comment.