In this CSS tutorial, I will provide information about the basic selector. You will learn about CSS basics only, and you will also learn how to use the CSS selector in detail.
List of the basic selector
- Universal Selector (*)
- Tag Name selector
- Class selector
- ID selector
Universal Selector (*)
Universal Selector targets all elements of the webpage and implements the CSS Properties on all elements of web pages. Let's say a webpage has two paragraphs (<p></p>) tags, three anchors (<a></a>) tags, and three headings (<h1></h1>) tags and you want to color them all "red", you can use the universal selector.
Syntax of universal selector
<style>
* {
margin: 0;
padding: 0;
}
</style>
Example of universal selector
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RAYS CODING : CSS Color Property</title>
<style>
*{
color: crimson;
}
</style>
</head>
<body>
<p>It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
<p>The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
<a href="#">RAYS CODING</a>
<a href="#">Dictionary</a>
<a href="#">Generated</a>
<h1>RAYS CODING</h1>
<h1>Dictionary</h1>
<h1>Generated</h1>
</body>
</html>
Tag Name Selector
Tag selectors are also called "type selectors". In this type of selector, the tag name of the web page is targeted. For example, you can target all paragraph tags of a web page and implement CSS.
Syntax of tag name selector
<style>
tagname {
margin: 0;
padding: 0;
}
</style>
Example of tag name selector
In the given CSS code, there are three main selectors used: the universal selector *, the p tag selector, and the span tag selector. Here is a description of each:
Universal selector (*):- The universal selector applies styles to every element on the page. In this case, the color: crimson; the rule is applied, which means that by default, all elements will have the text color crimson red unless specified by a more specific rule.
p tag selector:- The p selector targets all paragraph elements (<p> tags) on the page. The rule color: cornflowerblue; is applied, which changes the text color of all paragraphs to blue (cornflower blue). This overrides the crimson color set by the universal selector for paragraph elements.
span tag selector:- The span selector targets all span elements (<span> tags) on the page. The ruling color: darkorange; Text inside span elements is enforced to appear in dark orange, overriding the universal crimson color for these specific elements.
Class Selector(.)
The class selector is used to select elements that have a class attribute. It’s useful for applying styles to multiple elements that share the same class.
Syntax of the class selector(.)
<style>
.classname {
background-color: lightgray;
}
</style>
Example of the class selector(.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RAYS CODING : CSS Color Property</title>
<style>
.textone{
color: crimson;
font-family: cursive;
font-size: 20px;
font-weight: bold;
text-decoration: none;
display: block;
text-transform: uppercase;
}
</style>
</head>
<body>
<h1 class="textone">Class Selector</h1>
<p>It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
<p>The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
<a href="#" class="textone">RAYS CODING</a>
<a href="#">Dictionary</a>
<a href="#">Generated</a>
<h1>Dictionary</h1>
<h1>Generated</h1>
<span class="textone">Therefore</span>
<br>
<span>Sentence</span>
</body>
</html>
Using the class selector .textone, CSS code defines uniform styling of certain HTML elements; in this case, it gives that text a crimson color while at the same time giving it a distinctive red hue, and applies a cursive font family, creating the text to look like flowing script. The font size is 20 pixels, meaning the text will appear bigger; this also will set the font weight to bold so that the text appears thicker and bolder.
For instance, the class uses the rule text-decoration: none to completely remove any text decoration like underlining, which is particularly helpful for links. The property display: block makes elements act as a block-level element, filling their parent container with the whole width and creating a line break after them. The text-transform: uppercase property sets all the text in the uppercase case, irrespective of its writing case in the HTML.
Note:- The class name must be preceded by a "."
ID Selector (#)
The ID selector is used to select a specific element with an ID attribute. Unlike classes, an ID must be unique for each element on the page.
<style>
#idname {
background-color: lightgray;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RAYS CODING : CSS Color Property</title>
<style>
#textone {
color: royalblue;
font-family: cursive;
font-size: 20px;
font-weight: bold;
text-decoration: none;
display: block;
text-transform: uppercase;
}
</style>
</head>
<body>
<h1 id="textone">Class Selector</h1>
<p>It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate
Lorem Ipsum which looks reasonable.</p>
<p>The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words
etc.</p>
<a href="#">RAYS CODING</a>
<a href="#">Dictionary</a>
<a href="#">Generated</a>
<h1>Dictionary</h1>
<h1>Generated</h1>
<span>Therefore</span>
<br>
<span>Sentence</span>
</body>
</html>
The CSS code applies styles to the element with the ID #textone: color: royalblue; sets the text color to royal blue.
- font-family: cursive; applies a cursive font style to the text.
- font-size: 20px; sets the font size to 20 pixels.
- font-weight: bold; makes the text bold.
- text-decoration: none; removes any underlines or other decorations from the text.
- display:block; makes the element behave like a block-level element, meaning it will take up the full width and start on a new line.
- text-transform: uppercase; converts all text to uppercase.
Grouping Selector
You can group multiple selectors to apply the same style to different elements. This reduces repetition in your CSS code.
<style>
#idname, tagname, classname {
margin: 0;
padding: 0;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RAYS CODING : CSS Color Property</title>
<style>
#textone, a, .firstclass {
color: royalblue;
font-family: cursive;
font-size: 20px;
font-weight: bold;
text-decoration: none;
display: block;
text-transform: uppercase;
}
</style>
</head>
<body>
<h1 id="textone">Group Selector</h1>
<p>It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate
Lorem Ipsum which looks reasonable.</p>
<p>The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words
etc.</p>
<a href="#">RAYS CODING</a>
<a href="#">Dictionary</a>
<a href="#">Generated</a>
<h1>Dictionary</h1>
<h1>Generated</h1>
<span class="firstclass">Therefore</span>
<br>
<span>Sentence</span>
</body>
</html>
This CSS code selects an element with an ID of #textone, styles it as royal blue and a cursive font style, sets the text to bold and 20px, removes text decoration, sets the text to uppercase, and transforms the element into a block-level element so that it can fill the width within the container.
You must know these basic CSS selectors to efficiently style your web pages. With only a few lines of code you're able to target and style any element with the universal, type, class or ID or grouping selectors. As you build on learning CSS, mastering these selectors can ensure the solid formation for more complex work.