The Developer Brains


CSS3 STRUCTURE

Web Designing | Web Development


SEE MORE














</CSS3 SYNTAX>




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.




SEE MORE
























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


















A CSS rule consists of a .....

1. selector
2. declaration block
3. both selector & declaration block




Check Now



CSS3 QUIZ







Next: How to use Comments on Style Sheets?


Previous

      

Next Page













  Share TDB SCHOOL  

Share this E-Learning Website on social media platforms with your friends and followers