CSS Solid

☰

CSS Syntax

CSS syntax has three parts with two curly brackets. Those are arranged in the following order.

Selector: Selector helps to select HTML elements (ex: DIV, P, TABLE) to apply styles. Please refer selector link to get more details.

Property: Denotes HTML element attributes (ex: color, font-size).

Value: Denotes HTML element attributes value (ex: color: red, font-size: 20px).

Styles can be applied to HTML elements. Every element has start tag, content and end tag.

Step Part Example
1 CSS
Selector {property:value;}
p {color:blue;}
2 HTML
<start tag> content <end tag>
<p> CSS style(color blue) applied to this para(p) element content</p>
3 Output

Example: CSS core syntax

                            
h1 {color:#36CFFF}
P {font-size:20px;}
                         
                         

                            
<!DOCTYPE HTML>
<html>
<head>
    <title> CSS syntax demo </title>
     <style>
        h1 {color:#36CFFF}
        p {font-size:20px;}
     </style>
</head>
<body>
    <h1>Zap Food and Gas</h1>
    <h2>138 First Street, CA 94539</h2>
    <hr />
    <h3>Our Mission:-</h3>
    <p>The mission of Zap Food and Gas is to offer great food and competitive gas price.</p>
</body>
</html>

Result:

In the above example,

  • Color property is applied to H1 elements.
  • Font size is applied to P elements.

Using the Document Object Model (DOM) tree, above example is explained.

In the above tree,

  • Selected HTML elements are marked (node border color is changed).
  • Styles are applied to selected HTML elements (tree node).

Using the above core CSS syntax, different types of syntax can be formed.

Type 1
Single selector and single properties
Syntax 1
Selector {Property: Value)
Example
h1 {color:#36CFFF}
Description
Color property applied to H1 element.
 
 
Type 2
Single selector and multiple properties
Syntax 2
Selector {Property1: Value ; Property2: Value}
Example
h1{color:#36CFFF,font-size:12px;}
Description
Color and font size properties applied to H1 element.
 
 
Type 3
Multi Selector and single property
Syntax 3
Selector1, Selector2, Selector3 {Property : Value}
Example
h1 , h2,h3 {color:#36CFFF}
Description
Color property applied to H1, H2 and H3 elements.
 
 
Type 4
Multiple Selector and Multiple Properties
Syntax 4
Selector1, Selector2, Selector 3 {Property1: value ,Property2 : value}
Example
h1 , h2,h3 {color:#36CFFF;font-size:13px;}
Description
Color and font size properties applied to H1, H2 and H3 elements.