Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to use CSS Selectors for styling elements?
CSS selectors are patterns used to select and style specific HTML elements on a web page. They provide precise control over which elements receive styling, allowing developers to target elements by their type, class, ID, or other attributes.
Syntax
selector {
property: value;
/* more declarations */
}
Types of CSS Selectors
The most commonly used CSS selectors include −
Class Selector − Targets elements with a specific class attribute
ID Selector − Targets a unique element with a specific ID attribute
Grouping Selectors − Apply same styles to multiple selectors
Class Selector
The class selector uses a period (.) followed by the class name to target elements with that specific class attribute. Multiple elements can share the same class −
Example
<!DOCTYPE html>
<html>
<head>
<style>
.circle {
width: 100px;
height: 100px;
background-color: #00ff0d;
border: 3px solid #1b004e;
border-radius: 50%;
margin: 20px;
}
</style>
</head>
<body>
<h2>CSS Class Selector Example</h2>
<div class="circle"></div>
<div class="circle"></div>
</body>
</html>
Two green circles with dark blue borders appear on the page, each 100px in diameter with 20px margin between them.
ID Selector
The ID selector uses a hash (#) followed by the ID name to target a unique element. Each ID should be used only once per page −
Example
<!DOCTYPE html>
<html>
<head>
<style>
#header {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
#content {
background-color: #f1f1f1;
padding: 15px;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="header">Welcome to TutorialsPoint</div>
<div id="content">This is the main content area.</div>
</body>
</html>
A green header with white text "Welcome to TutorialsPoint" appears at the top, followed by a light gray content area with the text "This is the main content area."
Grouping Selectors
Grouping selectors allow you to apply the same styles to multiple elements by separating selectors with commas. This reduces code repetition −
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, h3 {
color: #333;
font-family: Arial, sans-serif;
margin-bottom: 10px;
}
.box, .container {
border: 2px solid #ddd;
padding: 15px;
margin: 10px 0;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<div class="box">This is a box element</div>
<div class="container">This is a container element</div>
</body>
</html>
Dark gray headings in Arial font appear with consistent spacing. Below them, two bordered boxes with light gray borders, padding, and rounded corners display the respective text content.
Conclusion
CSS selectors are fundamental tools for targeting and styling HTML elements. Class selectors provide reusable styling, ID selectors target unique elements, and grouping selectors help maintain clean, efficient code by applying styles to multiple elements simultaneously.
90 Views
