CSS Syntax

Grammar is the building block of a language. In fact without grammar we will not be able to form sentences.
It is the same for CSS as well
CSS rule consists of a selector and a declaration block.

The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.


CSS syntax

CSS has certain rules to select elements on a web page so that we can then style those elements.
The way we tell our CSS rule which HTML elements to style is by using selectors.

The element selector.
The element selector selects HTML elements based on their tag names
<p>This is a paragraph </p>

p{color:blue }
This selector will change the text of all the paragraphs in the webpage/website to blue

See the Pen CSS-<p>Style by Ankit (@AnkitPathshalaCoding) on CodePen.

Explanation of above Example

  • p is a selector in CSS (it points to the HTML element you want to style).
  • color is a property, and white is the property value
  • text-align is a property, and center is the property value.
  • background-color is a property, and black is the property value.
  • font-weight is a property, and bold is the property value.
  • padding is a property, and 30px is the property value.

Exercise 2.1

In the editor below,
Colour the background red
Add an image of your favourite animal
Write down its name below
And write a few sentences about the animal

See the Pen CSS-<p>Exercise by Ankit (@AnkitPathshalaCoding) on CodePen.