CSS BOX MODEL USING BORDER, MARGIN & PADDING

Written By:-Avinash Malhotra

Our Website:- Tech Altum

CSS BOX MODEL

CSS Box Model is a box inside HTML Elements including Padding, Margin, & Border.

CSS Box Model

The Image Below Shows a basic box model:

Suppose we have a div as shown above containing an image,

Padding is used to give space inside, 

Border is used to give particular Border,

Margin is used to give space outside.

Advance CSS Tags

Grouping ( used for grouping of multiple tags, ids or class)

 h1, h2, p

{

color:green;

}

Nesting ( used to select a particular tag inside its parent tag)

For Exp 
 p

{

color:blue;

text-align:center;

}

.marked

{

background-color:red;

}

You can use this:

.marked p

{

color:white;

}

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).