What is the CSS3 Syntax?

A CSS3 syntax is a collection of selectors and a declaration block. A selector is used to points to the HTML Element for applying CSS properties and the declaration block that may contains one or more declarations separated by semicolons. Each block contains CSS rules
{property1: value1;property2: value2}
separated by a colon.

</Structue of Style Sheets>

What is a CSS selector? How can we use it in our Style Sheet?

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 selecting HTML elements with a specific id attribute. An id must be unique so a web page can contain multiple ids with the unique names. We can select the element with a (#) character, followed by the id name.


<head>
	<style>
	/*element selector*/
		h1{color:red}
		/*class selector*/
		.tdb-class{color:blue}
		/*id selector*/
		#tdb-id{color:green}
	</style>
</head>

Note: Always use a unique id because it will affect your web page performance.


<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>

Try it Yourself

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 comma to separate multiple selectors. To check the code you can click on try it yourself button.

Example
Here is a simple example of multiple selectors

		
<style>
	h1, h2{color:red}
</style>

So the red color applies on 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>

Try it Yourself

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.

CSS3 STRUCTURE

</CSS3 SYNTAX>

What is the CSS3 Syntax?

</Structue of Style Sheets>

Selectors

Multiple Selectors