Basics of CSS - Cascading Style Sheets - Introduction to CSS with example

CSS is the acronym for: ‘Cascading Style Sheets’.
CSS is an extension to basic HTML that allows you to style your web pages
in other words we can say
CSS stands for Cascading Style Sheets
Styles
It defines how to display HTML elements
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS files.

Before you continue you should have a basic understanding of the following HTML
If you want to learn HTML Basics first then
Click Here for -> HTML Basics - HTML Introduction Different versions of HTML.
Click Here for -> Introduction to HTML Tags, Attributes and Elements - HTML "Hello World" Program.


CSS Syntax
A CSS rule has two main parts - a selector, and its declarations
SELECTOR {PROPERTY : VALUE; }

CSS Comments
Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers.
A CSS comment begins with "/*" and ends with "*/".

The id and class Selectors
In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class". Both id & class name are user defined(which are declared in HTML)
In CSS "id"  is declared by "#" and "class" by "."

Ways to Insert CSS / Types of CSS Insertion
There are three ways of inserting a style sheet:
- External style sheet
- Internal style sheet
- Inline style

Examples
External style sheet example:
It hase 2 files gj.html & gj.css file
gj.html file code(which got only HTML)

All p tags have left margin of 50 pixels

This p tag have id="pid" which have #CCC color

This p tag have id="pid" which dont have margin left

 


gj.css file code(which got only CSS)

body{background-color:#333; color:#FFF;}
p{margin-left:50px;}

#pid{color:#CCC;}
.pclass{margin-left:none !important;}

Internal style sheet example:

All p tags have left margin of 50 pixels

This p tag have id="pid" which have #CCC color

This p tag have id="pid" which dont have margin left

 

Inline style sheet example:

This p tags have left margin of 50 pixels

This p tag with id="pid" which have #CCC color