×

CSS Syntax

The CSS syntax contains the selector and the declaration block, which will be clearer with the following example:

CSS Syntax

Selector: A CSS selector specifies the HTML tag we wish to style. A selector can be any element such as <title>, and <h1>.

Declaration Block: This block can consist of more than one declaration that is isolated by the semicolon. Here, there are two types of declarations for the example as mentioned above:

  • Color: red;
  • Font-size: 12px;

 All the declarations include the property name and the value that are isolated by the colon.

Property: It is a part of the HTML element’s attributes. A property could be any color or border.

Value: CSS properties are required to be assigned by some values. Thus, values are provided to the properties of CSS. Value “red” is given to the color property in the example, as mentioned above.

Selector{Property1: value1; Property1: value1;   ………;}

Example:

<!DOCTYPE>
<html>
<head>
<title> CSS Syntax</title>
<style>
p {
color: green;
text-align: left;
}
</style>
</head>
 
<body>
<p> CSS Syntax </p>
<p> This is an example of CSS Syntax. </p>
</body>
</html>

Explanation of above Example:

  • P is the selector.
  • Color is the property.
  • The value of the property is green.
  • Another property is text-align.
  • The value of the property is left.

Related Topics

CSS Images

Images in CSS: Images are a critical part of a web application. It includes various types of images in the web application that cannot be recommended. However, it is essential...

4 minutes read.

CSS Specificity

CSS Specificity: If one or more conflicting rules of CSS express a similar element, a browser will pursue a few rules to examine the specific one. Specificity can be specified...

3 minutes read.

CSS 3D Transform

Introduction To understand 3D transformation property of transform you need to first understand the difference between 2D and 3D transform. 2D transform is a CSS effect which transforms the elements according to...

6 minutes read.

CSS Pseudo-class

Pseudo-class The pseudo-class may be depicted as the keyword which can be mixed to any selector that specifies the elected element’s unique state. It can be included to a selector to...

6 minutes read.

What is a CSS File?

What is a CSS File and How to use it in Html? CSS: - CSS stands for Cascading Style Sheet. CSS is a file of style sheets that describe the presentation of...

4 minutes read.

CSS Align

CSS Center Align Elements CSS center align is used to create align by using block element. You should specify margin: auto;properties. The element will take up the specified width and the remaining space....

2 minutes read.

CSS Reference

The CSS Reference lists all of the basic standard CSS properties, pseudo-classes, pseudo-elements, and data types, for all intents and purposes functional notations, and at-rules alphabetically.  The site also includes...

5 minutes read.

CSS Sticky

CSS Sticky The position property in CSS is applied to set an element’s position. This property is also applied to position an element behind the other element. It is useful for...

1 minute read.

CSS Margin

CSS Margin: The CSS margin property is employed to describe the space throughout the elements. It clears the range throughout the element. These properties do not have a background color...

2 minutes read.

How To Use CSS

You can use CSS(Cascading Style Sheet) in four ways. These are given below: The given above CSS type, in which various technique will be used. These are different from each other and...

2 minutes read.

CSS Float

CSS Float: The float property of CSS is the positioning property. This property is applied to elements to push them either to left or right. It permits for wrapping facility...

4 minutes read.

What is CSS

CSS stands for Cascading Style Sheet. It gives an additional style to the HTML document. A cascading style sheet is a language that is designed to define the document formatting...

3 minutes read.

Divi in CSS

Divi is popular WordPress themes due to its versatility and user-friendly interface. It includes a built-in page builder for sophisticated design options and an assortment of customization features to help...

9 minutes read.

Css Box Model

Introduction The Box Model property of CSS is used for design and layout of an html page. In CSS, all the elements has a rectangular box around it, you have to...

5 minutes read.

CSS Comments

CSS Comments: Generally, comments in CSS are used to describe our code. Further, it will provide support to many users who are concerned with the code. Somewhat, these are ignored...

2 minutes read.

CSS @keyframes rule

CSS @keyframes rule It describes the rule of animation that depicts the properties of CSS for the components at every state along with the timeline. We may make the properties of complex...

4 minutes read.

How to change background color in CSS

How to change background color in CSS? The background-color property in CSS would be used to specify the color of an element's background. As the element's background, it uses solid colors. The...

3 minutes read.

How to get rid/remove of bullet pioints in CSS

We include a list of items on the web pages that were sometimes numbered and sometimes bulleted in various styles. In HTML, there are two kinds of lists: ordered and unordered...

3 minutes read.

CSS Outline

CSS Outline: This CSS property is quite similar to the border property of CSS. It eases us to design an additional border around the element to obtain visual attention. The...

4 minutes read.

CSS: nth-selector

CSS nth selector can be used to match an element according to its position regardless of its parent’s type. Here, n can be any number, formula, or a keyword. These selectors...

2 minutes read.