How To Write Css Code Syntax of CSS

The fundamental objective of the Cascading Stylesheet (CSS) language is to enable a browser engine to style components of the page or our HTML with particular properties, such as colors, positions, or animations. There are two basic components of CSS which reflect these properties. The first is property, which is an identifier, or a term that can be understood by humans, that specifies which feature is taken into style. The second category values, outlines how the engine must handle the feature. Each property has both a set of values that are established by a formal language and a semantic meaning that is carried out by the browser engine.

Syntax :

A selector, property, and its value are a part of CSS Syntax. The HTML element that will hold the CSS style is indicated by the selector. Semicolons divide each CSS property. It consists of the selector name followed by the pair of properties and values that are specified for the particular selection.

selector { property : property value; }

Each declaration contains a colon, curly braces, and the name and value of a CSS property. The semicolon can be used to denote the separation of distinct CSS property declarations. Let’s discuss each part one by one.

CSS Introduction for web developers

Selector

Using a CSS selector, HTML elements can be chosen based on their element name, id, attributes, etc. We can choose one or multiple elements at once. We’ll discuss more it in upcoming blogs.

Declaration blocks

Declarations are arranged in groups called blocks, which are separated from one another by opening braces ‘{‘ and closing braces ‘}’. Opening and closing braces must be lined up since blocks might sometimes be nested. These blocks are called declarative blocks. And declarations inside are separated by a semicolon ‘;’.

//block code 
{
//Content or no content
}

Property and property value

In the above example, color and padding are properties and red and 10px are property values.

Example:

<!DOCTYPE html>
<html><head>
<style>
p {  
color: red;  
text-align: center;
} 
</style>
</head>
<body>
<p>Codeshruta</p>
</body>
</html>

In the above example, we use p as a selector to select the p tag for HTML and color : blue; and font-size : 50px; , text-align : center are declarations. In this declaration, color, font size and text-align are the property and blue, 50px and center property values and they are separated by a semicolon.

CSS syntax examples

There are several different CSS syntax, including a basic syntax that is straightforward but not very helpful. You must be familiar with the following syntax: Background colour syntax, Border syntax, Padding syntax, Height and Width syntax, Fonts syntax, Margin syntax, White Space syntax, Syntax for CSS Pseudo Classes, Pseudo-Element Syntax, Attribute Selector Syntax, Background Color Syntax. A couple of the CSS syntax examples are being discussed here, and the others will be covered as we go.

Color Syntax:

The user-specified colors are assigned to the text on the web page by the CSS colour property. The CSS colour property, often known as colour syntax, adheres to the fundamental syntactic rules we previously discussed.

How to add CSS to a Web page

selector{
color:colorname;
}

There are various ways to assign the color property’s value. The commonly used color names can be used with colour keywords to give the CSS colour property a value. Additionally, the RGB color code is a mixture of the ratios of the hues Red, Green, and Blue in the final color. The RGB colour syntax in CSS differs slightly from previous examples.

// using color name
p{color: red;}

//using RGB
p{ color: rgb(0, 0, 0); }

White Space Syntax:

The white-space CSS attribute impacts how to text on the element it is applied to is displayed.

//syntax
selector {white-space : value;}

//With Value
p{ 
white-space: normal;
}

Attribute Selector Syntax:

The CSS attribute selector is used to style multiple HTML elements that share the same attribute or attribute values. By organising them into groups based on similar traits, it is a very practical way to style many different elements. The attribute selector locates every component that has a particular attribute and applies styles to each one. The attribute selectors, which can be put in square brackets [], are case sensitive by default.

[class = "scaler"]{            
color:black;            
font-size:4px;            
font-weight:10;            
text-align: right;
}

There are different types of attribute selectors.

Conclusion

During the writing CSS code we always keep in mind that the written Syntax is correct. In this blog, we use different types of CSS properties to see the example of Syntex. We will discuss all these properties in our upcoming blogs, so stay tuned and if you have any questions or problems, don’t forget to comment below.

Thanks for reading!

Written by: Vipin