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.

HTML
CSS
JavaScript
Scroll to Top