CSS3 STRUCTURE
2021-11-16 10:59 · 4 min read
What is the CSS3 Syntax?
A CSS3 syntax is a collection of selectors and a declaration block. A selector is used to point to the HTML Element for applying CSS properties and the declaration block that may contain one or more declarations separated by semicolons. Each block contains CSS rules separated by a colon.
{
property1: value1;
property2: value2
}
Selectors
CSS3 Selectors are used to select the HTML elements for styling.
- CSS Element Selector
The element selector is used to select HTML elements based on their name. - CSS Class Selector
The class selector is used to select HTML elements with a specific class attribute. A web page can contain many classes of the same name. We can select the element with a period (.) character, followed by a class name. - CSS Id Selector
Id selector is used to select HTML elements with a specific id attribute. An id must be unique so a web page can contain multiple ids with unique names. We can select the element with a (#) character, followed by the id name.
<head>
<style>
h1{
color:red
}
.tdb-class{
color:blue
}
#tdb-id{
color:green
}
</style>
</head>
<body>
<h1>Element Selector
</h1>
<h1 class="tdb-class">Class Selector
</h1>
<h1 id="tdb-id">Id Selector
</h1>
</body>Note: Always use a unique id because it will affect your web page performance.
Multiple Selectors
When you want to use the same style on different elements without repeating the CSS properties in your style sheet then you can use a comma to separate multiple selectors..
Example
Here is a simple example of multiple selectors
<style>
h1, h2{color:red}
</style>So the red color applies to all h1 and h2 tags available on the web page. Click on the Try it Yourself button to Run the code
<head>
<style>
h1, h2{color:red
}
</style>
</head>
<body>
<h1>h1 tag
</h1>
<h2>h2 tag
</h2>
</body>A CSS rule consists of a selector and declaration block {}
<style>
selector{
property: value;
property: value
}
</style>This is the syntax we use for styling the HTML Elements.
