Home Videos Exercises MCQ Q&A Quiz E-Store Services Sign in Appointment Payment

Introduction of CSS

CSS is the cascading style sheets, it is used to style a Web page.


What is CSS?

It is a style sheet language which is used to describe the look and formatting of a document written in markup language.

  • CSS stands for cascading style sheets.
  • CSS is used to design HTML tags.
  • CSS is widely used language on the web.
  • CSS was created by HÃ¥kon Wium Lie in 1994.

CSS Versions

Version Year
CSS 1 1996
CSS 2 1998
CSS 3 1999

CSS Syntax

  • The selector points to the HTML element you want to style.
  • 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.
  • The declaration block contains one or more declarations separated by semicolons.

Examples

In this example all <p> elements will be center-aligned, with a blue text color:
p{
color: blue;
text-align: center;
}


CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

  • Simple selectors (select elements based on name, id, class)
  • Combinator selectors (select elements based on a specific relationship between them)
  • Pseudo-class selectors (select elements based on a certain state)
  • Pseudo-elements selectors (select and style a part of an element)
  • Attribute selectors (select elements based on an attribute or attribute value)

The CSS element selector

The element selector selects HTML elements based on the element name.

Example
Here, all <p> elements on the page will be center-aligned, with a blue text color:
p {
text-align: center;
color: blue;
}


The CSS id Selector

  • To select an element with a specific id, write a hash (#) character, followed by the id of the element.
  • The id of an element is unique within a page, so the id selector is used to select one unique element!
  • The id selector uses the id attribute of an HTML element to select a specific element.

Example
The CSS rule below will be applied to the HTML element with id="p1":
#p1 {
text-align: center;
color: blue;
}


The CSS class Selector

  • The class selector selects HTML elements with a specific class attribute.
  • To select elements with a specific class, write a period (.) character, followed by the class name.

Example
In this example all HTML elements with class="c1" will be blue and center-aligned:
.c1 {
text-align: center;
color: blue;
}


The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

Example
The CSS rule below will affect every HTML element on the page:
* {
text-align: center;
color: blue;
}


The CSS Grouping Selector

  • The grouping selector selects all the HTML elements with the same style definitions.
  • Look at the following CSS code (the h1, h2, and p elements have the same style definitions):

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