CSS Basic Syntax, TutorialsPoint, CSS Basic Syntax 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.

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

CSS Tutorial