css tutorial
CSS Basic Syntax
A CSS rule-set consists of a selector and a declaration block, A style rule is made of three parts.

Selector : A selector is an HTML tag at which a style will be applied. This could be any tag like <p> or <h1> or <img> or <table> etc.

Property : A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color, border etc.

Value : Values are assigned to properties. For example, color property can have value either black :#000; or white:#FFF; etc.
CSS Syntax
Example :
p {
     color: #FFF;
     background: #0099da;
  }
Output :

This is Basic Syntax of CSS

Class Selectors Example :
.my_text{
    color:#0099da;
    font-weight:bold;
    font-size:20px;
   } 
Output :
This is Class Selector Program
ID Selectors Example :
#my_text{
     color:#0099da;
     font-weight:bold;
     font-size:20px;
   } ​
Output :
This is ID Selector Program
Child Selectors Example :
<!DOCTYPE html>
<html lang="en">
    <head>
       <title>Child Selectors</title>
    </head>
    <style type="text/css">
    .my_text > p{
                color:#000;
                font-weight:bold;
                font-size:20px;
                } 
    </style>
    <body>
    <div class="my_text">
        <p>This is Child Selectors Program</p>
        </div>
    </body>
</html>
Output :

This is Child Selectors Program

Grouping Selectors Example :
<!DOCTYPE html>
<html>

    <head>
       <title>Grouping Selectors</title>
    </head>

<style type="text/css">
#main_1, #main_2, #main_3 {
width:80px;
height:50px;
margin:0px 5px;
text-align:center;
font-size:26px;
border:1px solid #000;
color:#0099da; 
float:left;
font-weight:bold;
}
</style>
    
<body>
    
    <div id="main_1">Box-1</div>
    <div id="main_2">Box-2</div>
    <div id="main_3">Box-3</div>
            
</body>  
</html>  
Output :
Box-1
Box-2
Box-3

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.