Open In App
Related Articles

CSS Syntax

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

A CSS Syntax rule consists of a selector, property, and its value. The selector points to the HTML element where the CSS style is to be applied. The CSS property is separated by semicolons. It is a combination of the selector name followed by the property: value pair that is defined for the specific selector. 

Syntax

selector { Property: value; }

For instance, we have declared a heading tag (h1) along with having assigned some property: value pair that is used to style the heading tag. Here, h1 is the selector, { color: green; font-family: sans-serif; } is a declaration block and it can contain one or more declarations separated by semicolons, color: green; is a property: value pair that is applied to the HTML element to style them.

CSS-Syntax

Every declaration has a CSS property name and a value, separated by a colon(:) and is surrounded by curly braces({ }). For declaring the multiple CSS properties, it can be separated by the semicolon(;).

Let’s define each of these:

  • Declaration: A combination of a property and its corresponding value.
  • Selector: Used to target and select specific HTML elements to apply styles to.
  • Property: Defines the specific aspect or characteristic of an element that you want to modify.
  • Value: Assigned setting or parameter for a given property, determining how the selected element should appear or behave.

Example: This example illustrates the use of CSS Syntax for the styling of HTML elements.

HTML

<!DOCTYPE html>
<html>
   
<head>
    <!-- Style on h1 elements -->
    <style>
        h1 {
            color: green;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
</body>
   
</html>

                    

Output: In the above code, h1 is the selector of h1 tags, it select the h1 element that you want to style. The color is a property and green is the value of that property, similar text-align is the property and value of that property is center.

CSS Syntax and Selectors


To learn more about the CSS Selectors, and Properties please go through the attached links.



Last Updated : 04 Feb, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads