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;
}