CSS Syntax

CSS, short for Cascading Style Sheets is a web styling language used for styling and structuring web pages written in HTML or XML. It defines how different HTML elements for instance headings or paragraphs appear on the screen.

Like other web styling languages, CSS also follows certain rules that define the arrangement of elements and attributes. The syntax of a CSS is as follows:

The syntax is explained in the table below.

CSS Element	Description
Selector	It selects an HTML element that you want to style.
Declaration Block	It consists of multiple declarations and thesea are separated by semicolons.
Property	A property refers to the attribute of an HTML tag such as color, font etc.
Value	Values are allocated to properties.

Now there are multiple types of selectors which are explained below.

1. Universal Selector

As the name suggests a universal selector is used to select all elements of an HTML page. It is represented by an asterisk sign (*). For example

* {
         font-color:blue;
         text-align:center;
  }

2. Element Selector

A selector is used to select HTML elements on the basis of their names. Like this.

h {
  text-align: left;
  color: blue;
}

3. Id Selector

You can style HTML elements on the basis of their id attributes. For instance, the following element with the id=“head1” is being styled.

#head1 {                
  text-align: left;
  color: blue;
}

4. Class Selector

Class selector styles an HTML element on the basis of a specific class attribute. In order to select an HTML element we use dot followed by class name.

.box {
  text-align: center;
  color: red;
}

5. Grouping Selector

The grouping selector is used to select all those HTML elements that we want to style in a similar manner. For example.

h1, h2, p {
  text-align: center;
  color: red;
  font-weight: normal;
}

Conclusion

Cascading style sheets aka CSS is a styling language that is used to style documents written using markup languages such as HTML and XML. For styling HTML elements we have to follow a set of CSS rules/syntax. Following the CSS syntax we use some selector to select the specific HTML elements and then assign certain values to properties to design those HTML elements. In this tutorial we learnt the basic CSS syntax and its selectors which prove to be very useful for styling HTML elements.

from https://ift.tt/3rNPpuV