CSS (Cascading Style Sheets) is an essential tool for web developers and designers, allowing them to control the look and layout of a web page. One of the key components of CSS is the CSS selector, which determines which HTML elements on a web page are selected for styling.
In this article, we will explore the different types of CSS selectors, including Element Selectors, Class Selectors, ID Selectors, and Attribute Selectors, and how to use them in a CSS file.
Element Selectors
Element Selectors are the most basic type of CSS selector and are used to select specific HTML elements on a web page. They are defined using the name of the HTML element, such as p, h1, div, etc. Here’s an example of using an Element Selector in CSS:
p {
font-size: 18px;
color: black;
}Class Selectors
Class Selectors allow you to select HTML elements based on their class attribute. They are defined using a dot (.) followed by the class name, such as .container, .header, .footer, etc. Here’s an example of using a Class Selector in CSS:
.container {
background-color: lightgray;
padding: 20px;
}In this example, the .container selector selects all elements with the class container and sets the background-color and padding styles.
ID Selectors
ID Selectors allow you to select a specific HTML element based on its id attribute. They are defined using a hash (#) followed by the id name, such as #header, #footer, #main, etc. Here’s an example of using an ID Selector in CSS:
#header {
background-color: darkgray;
padding: 20px;
}Attribute Selectors
Attribute Selectors allow you to select HTML elements based on their attributes and attribute values. They are defined using square brackets ([]) and the attribute name, such as [href], [src], [alt], etc. Here’s an example of using an Attribute Selector in CSS:
a[href="https"] {
color: blue;
}In this example, the a[href^="https"] selector selects all a elements whose href attribute starts with https and sets the color style to blue.
Ok, now let’s practice with them! Now create an HTML file called “index.html” and a CSS file called “style.css”. Use these selectors to style your components.
<!DOCTYPE html>
<html>
<head>
<link href="./style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
<h1>Welcome to Our Website</h1>
</div>
<div>
<p class="highlight">
This is a highlighted paragraph.
</p>
<p>
This is a regular paragraph.
</p>
<a href="http://example.com">Visit our website</a>
</div>
</body>
</html>Here’s the example:
/* Class selector */
.highlight {
background-color: yellow;
}
/* ID selector */
#header {
background-color: lightgray;
padding: 20px;
}
/* Attribute selector */
a[href='http://example.com']
{
color: blue;
}Great! You are now able to use different selector styling as you wish.
