A CSS selector is a pattern used to select the elements you want to style in an HTML document. It tells the browser which HTML elements to apply the specified CSS styles to.
Types of CSS Selectors
1. Element Selector
2. Class Selector
3. ID Selector
Let's explore each of these with examples.
1. Element Selector
The element selector targets HTML elements directly. For example, if you want to style all <p> (paragraph) elements on a page, you can use the element selector.
Example
p { color: blue; font-size: 18px; }
Class Selector
The class selector targets elements with a specific class attribute. You define a class in the HTML using the class attribute, and then reference it in the CSS with a . (dot) followed by the class name.
Example
.highlight { background-color: yellow; font-weight: bold; }
ID Selector
The ID selector targets an element with a specific id attribute. IDs should be unique within a page, meaning no two elements should have the same id. You reference an ID in CSS using a # followed by the ID name.
Example
#uniqueElement { color: green; font-size: 20px; }
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Selectors Example</title> <link rel="stylesheet" href="../../css/selectors/styles.css"> </head> <body> <!-- Element selector example --> <h1>Welcome to CSS Selectors</h1> <!-- Class selector example --> <p class="highlight">This paragraph is highlighted using a class selector.</p> <!-- ID selector example --> <p id="uniqueElement">This paragraph is styled using an ID selector.</p> <!-- Element without class or ID --> <p>This paragraph is styled only by the default browser styles.</p> </body> </html>
<link rel="stylesheet" href="../../css/selectors/styles.css">
In the line <link rel="stylesheet" href="../css/selectors/styles.css">, the href path ../css/selectors/styles.css points to the location of the CSS file that the HTML document will use for styling. Adjust the path accordingly.
styles.css
/* Element selector */ h1 { color: blue; text-align: center; } /* Class selector */ .highlight { background-color: yellow; font-weight: bold; } /* ID selector */ #uniqueElement { color: green; font-size: 20px; }
Open index.html page in a browser, you can see that the styles are applied accordingly.
CSS selectors play a crucial role in defining how elements in an HTML document are presented. They allow you to apply consistent styles across a website, making it easier to maintain and update the appearance of your site. By using element, class, and ID selectors effectively, you can create flexible and reusable styles that enhance the user experience.
No comments:
Post a Comment