Recent Posts

CSS Introduction

Written by

Aayushi Bansal

CSS stands for cascading style sheets. It is used for styling the HTML document or tells us how that document will be displayed.

HTML was never intended to contain tags for formatting a web page. It was just used to add the content of the web page. But when fonts and color information were added to every single page, the development of large websites became a long and expensive process.

CSS syntax:

A CSS rule contains two parts: a selector and a declaration.

Selectors indicate which HTML element the rule applies to. The same rule can apply to more than one element if we separate the element names with commas.

Declarations indicate how the elements should be styled. Each declaration contains a property name and a value separated by a colon. Properties indicate the aspect of the element we want to change and values specify the settings we use for chosen properties.

A CSS declaration always ends with a semicolon and declaration blocks are surrounded by curly braces.

For example,

h1{

color : red;


background-color: yellow;


text-align: center;


}

CSS comments:

A CSS comment starts with /* and ends with */. They are used to explain the code and not get executed or shown on the window.

CSS selectors:

CSS selectors allow us to target rules to specific elements in an HTML document and they are case sensitive. The different types of selectors are:

  • Element selector – Selects the element based on element name. for example,
p{text-align: left;}
  • Universal selector – Selects all the elements of the document. Example,
*{background-color: light-blue ;}
  • Id selector – It uses the hash character followed by the name of HTML id attribute that is to be selected. For example,
#article1{color: red;}
  • Class selector – It selects elements with specific class attribute and written with a dot(.) character followed by name of the class. Example,
.body{font-family: Calibri;}

 

CSS Introduction