CSS Syntax

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. let us see the syntax and how we can use the CSS to modernize the website.

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.

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>w3wiki</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.

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

Contact Us