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.
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.
<!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.
To learn more about the CSS Selectors, and Properties please go through the attached links.