Introduction


Prev Tutorial Next Tutorial

Introduction

CSS stands for Cascading Style Sheets. Styles define how to display the HTML elements

Definition of CSS

Cascading Style Sheets (CSS) is a rule based language that applies styling to HTML elements. We write CSS rules in Html elements (<p>, <img>), and modify properties of those elements such as color, background color, width, border thickness, font size, etc.

CSS rule, is made up of two parts

  • Selector
  • Declaration
css

Selector

Identifies the HTML elements that the rule will be applied to, identified by the actual element name, e.g. <body>, <p>, <h1>

Declaration

Declaration part contains property and value.
Example: suppose that we want size of our text 10px then it declare as font-size:10px. Here font-size is properties and 10px is there value, and all this declaration is called declaration.

The declaration is also split into two parts, they are separated by a colon " : "

Syntax

font-size:15px;

In the above code properties (font-size) and value (15px) is separated by colon ":"

  • Property
  • Value

all the CSS syntax is combination of these fives things

  • selector
  • property/value
  • declaration
  • declaration block
  • curly braces

Selector

Identifies the HTML elements that the rule will be applied to, identified by the actual element name, e.g. <body>, <p>, <h1>

css

Example of Selector

h1
{
color:red;
font-size:10px;
}

We can also define multiple selector at a time. Each selector separated by comma.

Example of use multiple Selector

Example

h1, h2, h3
{
color:red;
font-size:10px;
}

Property & value

The properties is the style attribute you want to change and values is value of attribute.
Example: suppose that we want to change size of our text 10px and color is red then it declare as font-size:10px; color:red. Here font-size is properties and 10px is there value and color is also properties and red is there value

css

Declaration

Declaration part contains property and value.
Example: suppose that we want size of our text 10px then it declare as font-size:10px. Here font-size is properties and 10px is there value, and all this declaration is called declaration.

css

Declaration Block

Declaration Block is multiple declaration lines including the curly braces

css

The declaration is also split into two parts, they are separated by a colon " : "

Syntax

font-size:15px;

In the above code properties (font-size) and value (15px) is separated by colon ":"

Curly Braces

css

Note: If there is only one property - value pair in the declaration, we do not need to end it with a semicolon.

However, because a declaration can consist of several property - value pairs, and each property - value pair within a rule must be separated by a semicolon.


Prev Tutorial Next Tutorial

Advertisements
Download Projects