The style definition starts with a selector. For example:
div{
width:100px;
height:100px;
background-color:red;
margin: 20px;
}
In this case, the selector is div. A number of selectors inherit the name of the formatted elements, such as div, p, h2, etc. When such a selector is defined, its style will be applied to all elements matching the given selector. That is, the above defined style will be applied to all elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Selectors</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
margin: 20px;
}
</style>
</head>
<body>
<h1>CSS Selectors</h1>
<div></div>
<div></div>
<div></div>
</body>
</html>
There are 3 div elements on the page and they will all be styled:
classes
Sometimes the same elements require different styling. And in this case, we can use classes.
To define a class selector in CSS, a dot is placed in front of the class name:
.bg-red{
background-color:red;
}
The class name can be arbitrary. For example, in this case the name of the class is “bg-red”. However, it is allowed to use letters, numbers, hyphens and underscores in the class name, and the class name must begin with a letter.
Also note the case of names: the names “article” and “ARTICLE” will represent different classes.
Once a class has been defined, we can apply it to an element using the class attribute . For example:
<div class="bg-red"></div>
Let’s define and use several classes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Selectors</title>
<style>
div {
width: 100px;
height: 100px;
margin: 20px;
}
.bg-red {
background-color: red;
}
.bg-green {
background-color: green;
}
.bg-blue {
background-color: blue;
}
</style>
</head>
<body>
<h1>CSS Selectors</h1>
<div class="bg-red"></div>
<div class="bg-green"></div>
<div class="bg-blue"></div>
</body>
</html>
Identifiers
To identify unique elements on a web page, identifiers are used, which are defined using id attributes. For example, a page might have a head block or header:
<div id="header"></div>
The definition of styles for identifiers is similar to the definition of classes, only instead of a dot, the pound sign # is put:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Identifiers</title>
<style>
div {
margin-bottom: 20px;
width: 500px;
height: 100px;
text-align: center;
padding: 20px;
font-size: 30px;
}
#header {
background-color: olive;
color: #fff;
border: 1px solid red;
}
#content {
background-color: gray;
color: #000;
border: 1px solid white;
}
#footer {
background-color: yellow;
color: #000;
border: 1px solid #000000;
}
</style>
</head>
<body>
<h1>CSS Identifiers</h1>
<div id="header"> Header </div>
<div id="content"> Content </div>
<div id="footer"> Footer</div>
</body>
</html>
However, it’s worth noting that identifiers are more about the structure of the web page and less about styling. Classes are more commonly used for styling than identifiers.
Universal selector
In addition to tag, class, and id selectors, css also has the so-called universal selector , which represents the asterisk (*) sign. It applies styles to all elements on the html page:
*{
background-color: red;
}
Styling a group of selectors
Sometimes certain styles are applied to a range of selectors. For example, we want to apply underlining to all headings. In this case, we can list the selectors of all elements separated by commas:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Styling a group of selectors</title>
<style>
h1,
h2,
h3 {
color: red;
}
</style>
</head>
<body>
<h1>Styling a group of selectors</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>This is a paragraph</p>
</body>
</html>
A selector group can contain both tag selectors and class and ID selectors, for example:
h1, #header, .bg-red, .bg-blue, .bg-green{
color: red;
}