CSS selectors are used to target specific elements in your HTML document. They allow you to apply styles to elements based on their tags, classes, IDs, attributes, and more.
Common Selectors
- Element selectors: Target elements based on their tag name (e.g., p, h1, div).
- Class selectors: Target elements with a specific class attribute (e.g., .container, .item).
- ID selectors: Target elements with a unique ID attribute (e.g., #header).
- Attribute selectors: Target elements based on their attributes (e.g., [href], [data-foo=”bar”]).
Example:
CSS
p {
color: blue;
}
.container {
background-color: #f0f0f0;
}
#header {
font-size: 24px;
}
Typography
CSS provides various properties to control the appearance of text, including:
- font-family: Sets the font family.
- font-size: Sets the font size.
- font-weight: Sets the font weight (e.g., normal, bold).
- font-style: Sets the font style (e.g., normal, italic).
- line-height: Sets the line height.
- text-align: Sets the text alignment.
- text-decoration: Sets text decorations (e.g., underline, line-through).
Example:
CSS
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
h1 {
font-size: 24px;
font-weight: bold;
}
Additional Topics
- Box Model: Understand the box model, which consists of the content area, padding, border, and margin.
- Color: Use color properties like color, background-color, and border-color to set the color of elements.
- Units: Use relative units like em and rem for flexible layouts.
- Z-index: Control the stacking order of elements.
- Pseudo-classes: Target elements based on their state (e.g., :hover, :active).
By mastering CSS selectors, typography, and other fundamental concepts, you can create visually appealing and responsive web designs. Experiment with different properties and techniques to achieve the desired effects.
