Introduction to CSS
What is CSS ?
CSS stands for Cascading Style Sheets. Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML.
It describes how HTML elements are to be displayed on screen, paper, or in other media. It can control the layout of multiple web pages all at once.
A Simple Example
body {
background-color: blue;
}
h1 {
color: red;
text-align: center;
}
p {
font-family: verdana;
font-size: 50px;
}
Syntax of writing CSS
The CSS syntax consist of selector and declaration block:
To specify where CSS rule to be applied is given by using selector. Whereas, the declarations within the block determines how the elements are formatted on a web-page.
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.
A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.
CSS : Selectors
CSS selectors define the elements to which a set of CSS rules apply. It is used to find or select the HTML elements which you want to style.
There are different types of selectors:
CSS element Selector
The element selector selects HTML elements based on the element name.
example:
p {
text-align: center;
color: red;
}
here “p” is the element selector.
CSS id Selector
Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document.
To select an element with a specific id, write a hash (#) character, followed by the id of the element.
example:
#para {
text-align: center;
color: red;
}
here “#para” is the selector.
CSS class Selector
This selects the HTML element of specific class.
To select elements with a specific class, write a period (.) character, followed by the class name.
example:
.table {
text-align: center;
color: red;
}
here “.table” is the selector.
You can also specify a particular element or elements of a class from HTML.
example:
h1.table {
text-align: center;
color: red;
}
here “h1” element of class “table” is selected.
CSS Universal Selector
The universal selector (*) selects all HTML elements on the page.
example:
* {
text-align: center;
color: blue;
}
CSS Grouping Selector
The grouping selector selects all the HTML elements with the same style definitions.
example:
p, h1, h2 {
text-align: center;
color: red;
}
here “p”, “h1” and “h2” elements got selected and same styling is applied to all.
NOTE: These are the basic selectors, there are many other selectors which can be used. Follow up this link to know more.
To explain the code “comments” are used by adding /*comment*/, so that the code can be explained in the file.