FOLLOW US ON TWITTER



FOLLOW US



img/blogimg/css3.jpg


@coder 479

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.

 

TAGS:






POST COMMENTS
No Comment

Please login to post comment




POPULAR POSTS

best free web hosting services...
what is new in miui 11?...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
What is HTML Anchor Tag and Hyperlinks?...
How to host a web page in 10 minutes....
CSS3 RESPONSIVE UI...
Tables HTML...
CSS3 FUNCTIONS...
How to use CSS3 Overflow Property?...
CSS3 FILTERS...


RECENT COMMENTS

2022-03-05 11:05
By coder on XAMPP - MySQL shutdown unexpectedly | How to fix MySQL crash unexpectedly
2021-10-12 12:34
By abnongoke on do you want to make money online?
2021-10-12 12:34
By abnongoke on how to get a free website domain name?
2021-10-12 12:34
By solar panel for shed on what is new in miui 11?
2021-10-12 12:34
By solar panel for shed on best free web hosting services
2021-10-12 12:34
By amos tanui on free website ssl security using cloudflare


SOCIAL SHARE



FOLLOW US ON TWITTER



FOLLOW US ON FACEBOOK



FOLLOW US







Recent Blogs



Contact Us

Subscribe Our News-Letter



Kashipur, 244713
Uttarakhand, India



© www.prodevskill.com 2023. All Rights Reserved. Powered by Pro Developer