CSS
CSS Syntax
CSS Syntax means how we write code for Cascade Style Sheet. The CSS Syntax is used to make a webpage interactive. It is the combination of:
- Selector and
- Declaration block.
The declaration block consists of property and a value separated by a colon and surrounded by curly braces. We can write a syntax by following the way:
Selector { Property: value; }
h1 {
color: blue;
font-size: 24px;
}In the example, the selector h1 targets all <h1> elements, and the declaration block { color: blue; font-size: 24px; } defines their styles. Each declaration includes a property (e.g., color) and a value (e.g., blue), separated by a colon and enclosed within curly braces.
CSS Selector
The specific HTML elements or groups of elements that you want to style on a web page are selected by CSS selectors.
Declaration
The declaration consists of a specific property and its value.
Property:
A CSS property refers to a feature or characteristic of an HTML element that can be styled or adjusted for instant color, margin, or font size.
Value:
Values assign settings or parameters to properties such as font size, which can have 11, 12, or 14 values.
p {
color: purple;
}This example targets all <p> elements using the selector p and applies the property color with the value purple, changing the text color of all paragraphs to purple.
Multiple Style Rules
You can write multiple declarations for a single selector. All you have to do is separate the declarations by semicolon (;). If you want to write a syntax with two declarations, then you can write it this way:
Syntax
Selector {
Property 1: Value 1 ;
Property 2: Value 2 ;
}
You can understand the styling of CSS with the help of the following example:
HTML
<div class="box">
This is a box with multiple styles.
</div>
CSS
.box {
background-color: lightblue;
padding: 20px;
border: 2px solid darkblue;
}The HTML <div class=”box”> is styled using the CSS selector .box, which applies a light blue background, 20px padding, and a 2px dark blue border to the element.
CSS syntax produces eye-catching and engaging web pages. With proper command on selectors, declarations, properties and value, you can create a dynamic style for the HTML element which will enhance the experience of the user.
