CSS Cascading Style Sheet

Written By:-Avinash Malhotra

Our Website:- Tech Altum

HTML -----> Defines the Structure of a Webpage.
CSS -----> Gives Style to HTML Page.
Javascript -----> Defines Functionality of the Webpage.
CSS Cascading Style Sheet.
A Stylesheet gives style to a particular HTML page.
We can write CSS in three different ways.
Internal CSS. ----> Used inside HTML page.
External CSS. ----> Used Outside HTML page.
Inline CSS. ----> Used inside a perticular tag.
Way to write CSS

Selector can be
1, Tag Name(exp div, p, h1, img etx)
2, Id (Starting with #). ID is unique
3, Class (Starting with .). Class can be repeated.
4, Nesting ( exp div p) div p{} Means p inside div only.
 5, Grouping (Combines more than one tags or class or id).




CSS  Cascading Style Sheet

CSS  Id and Class

In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class"..

Id:-

1.         The id selector is used to specify a style for a single, unique element.
2.         The id selector uses the id attribute of the HTML element, and is defined with a  "#".

Class:-  

1.  The class selector is used to specify a style for a group of elements. Unlike the id                         selector, the class selector is most often used on several elements.
2.   This allows you to set a particular style for many HTML elements with the same class.

Background CSS Properties:-

  :- background-color

  :- background-image

  :- background-repeat

  :- background-attachment

 :- background-position

CSS Text

   :- Text Alignment

  :- Text Decoration

  :- Text Transformation

  :- line-hight

 :- Text Indentation

 :- word-spacing

 :- letter-spacing

:- color 

CSS Font

   :- Font Family

  :- Font Style

  :- Font Size

  :- Font-variant(small caps)

 :- Font-weight

Note:- ( h1 {font-size:2em;} /* 32px/16=2em */

h2 {font-size:1.875em;} /* 30px/16=1.875em */

p {font-size:0.1em;} /* 16px/16=1em */

pt(point)

pixels

percentage

em

List

  ul.a {list-style-type: circle;}

ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}

ol.d {list-style-type: lower-alpha;}