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 in order to style them.
Declaration Declaration
h1 { color: green; font-family: sans-serif;}
| | | | |
Selector Property Value Property Value
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>
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.