CSS Selectors
CSS selectors are used to select the HTML elements you want to style. Understanding how to use selectors is fundamental to applying styles to your web pages effectively.
Element Selector
The element selector selects all elements of a given type. For example, p selects all <p> elements.
Example: Element Selector
/* Selects all paragraph elements */
p {
color: blue;
}ID Selector
The ID selector selects an element based on its ID attribute. The ID should be unique within a page.
Example: ID Selector
/* Selects the element with id="header" */
#header {
background-color: yellow;
}Class Selector
The class selector selects all elements with a specific class attribute. Multiple elements can share the same class.
Example: Class Selector
/* Selects all elements with class="highlight" */
.highlight {
font-weight: bold;
}Attribute Selector
The attribute selector selects elements based on a specific attribute and its value.
Example: Attribute Selector
/* Selects all input elements with type="text" */
input[type="text"] {
border: 1px solid #ccc;
}Grouping Selectors
You can group selectors to apply the same styles to multiple elements, reducing redundancy.
Example: Grouping Selectors
/* Applies styles to all h1, h2, and h3 elements */
h1, h2, h3 {
color: #333;
font-family: Arial, sans-serif;
}Combining Selectors
Combining selectors allows you to target elements based on their relationships to other elements.
- Descendant Selector: Selects elements that are descendants of another element.
div p { ... } - Child Selector: Selects elements that are direct children of another element.
ul > li { ... } - Adjacent Sibling Selector: Selects an element that is the adjacent sibling of another element.
h1 + p { ... } - General Sibling Selector: Selects all siblings of an element.
h1 ~ p { ... }
Example: Combining Selectors
/* Descendant selector */
div p {
color: red;
}
/* Child selector */
ul > li {
list-style-type: none;
}
/* Adjacent sibling selector */
h1 + p {
margin-top: 0;
}
/* General sibling selector */
h1 ~ p {
color: blue;
}Pseudo-classes and Pseudo-elements
Pseudo-classes and pseudo-elements are used to style elements based on their state or position in the document.
- Pseudo-classes: Apply styles to elements in a specific state.
a:hover { ... } - Pseudo-elements: Apply styles to a specific part of an element.
p::first-line { ... }
Example: Pseudo-classes and Pseudo-elements
/* Pseudo-class */
a:hover {
color: red;
}
/* Pseudo-element */
p::first-line {
font-weight: bold;
}Comments
Comments are used to explain your code and are ignored by browsers. In CSS, comments are placed between /* */.
Example: CSS Comments
/* This is a single-line comment */
/*
This is a
multi-line comment
*/Example: Styling a Web Page
Let's put everything together and style a simple web page.
Example: Complete CSS Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Styled Web Page</title> <style> body { font-family: Arial, sans-serif; background-color: #f9f9f9; margin: 20px; } h1 { color: #333; } p { color: #555; } .highlight { background-color: yellow; } a:hover { color: red; } p::first-line { font-weight: bold; } </style> </head> <body> <h1>Welcome to My Web Page</h1> <p class="highlight">This is an example of a paragraph with highlighted text.</p> <p>Hover over this <a href="#">link</a> to see the effect.</p> </body> </html>