CSS Syntax

Facebooktwitterredditpinterestlinkedinmailby feather

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.

Example:

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.

CSS Selector

There are some selectors used in CSS, which allows us to choose the content we wish to style. Various selectors are the separation of the set of CSS rules. They choose elements of HTML based on its class, type, id, and attribute.

Here are some selector types in CSS which are as follows:

  • Element Selector
  • Id Selector
  • Class Selector
  • Universal Selector
  • Group Selector

Element Selector

The element selector of CSS is used to select the element of HTML by the name. The example of element selector is as follows:

Id Selector

This selector of CSS selects the HTML element’s attribute ID to choose a particular element. Always, the ID is special inside the page thus it is selected to choose a unique and single element. The id is defined with a hash character (#), pursued by the element’s id.

The example of id selector is as follows which is defined with id “p”:

Class Selector

These selectors choose the elements of HTML along with a particular attribute of class. A class selector can be used with the period character. (i.e., full stop) pursued by the name of the class. Most essentially a class must not be begin with the number.

The example of the class selector is written as below in which a class is represented by the “class1”:

Specific Element Selector: If we want to define that only a specific element of HTML should be troubled then we can use the name of the element with the class selector.

Following is an example for selecting a specific element:

Facebooktwitterredditpinterestlinkedinmailby feather