# basics of css

## what is css?

css is know as a cascading style sheet it can help to make our html beautiful ,responsive .

## html id and class attributes

when we can given a id to select that element then it can given a class we can also select using a id attributes also but we can also have a one more things to understanding if a one element have a multiple class but we can not a a multiple id for it

## ways to add a css to html

there are a 3 ways to add css

1 use a style tag inside a html tag with using a style tag

2 inline css we can simple use it to create a head tag our head tag for using style tag

3 external css we can use it to create a external file like (.css )after that we can add it using link tag

## Types of selectors in css:

### body selector:

body{

background:pink;

color:red;

}

### element selector:- it can we used to select a element by using a tag names

h2{

color:blue;

};

### id selector:→ it is used to select a element with a given id

\# me{

color: white;

background:black;

}

### class selector:→ it is used to select a element by given by a class name

.red{

background:red;

}

### important points

* we can group a selectors like this h1,h2,h3,h4 div{ color:blue}
    
* we can also have a one universal selectors to select all of element \*{margin:0 ,padding:0}
    

# colors and background

### font color

p{ color:red} it can change a font color to a black to red

### background color

.me{background-color : purple;}

### background image

body{ background-image: url(“deep.jpg“);

for add more about background and colors follow this

%[https://www.w3schools.com/cssref/css3_pr_background.php] 

# box models in css

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1737377299371/ac31776c-51d2-415e-b320-8f410e4dcdec.png align="center")

### how we set a height and width in a css

#box{

height:70px;

width:150px;

}

important point :- total height =height+widht+left padding+right padding+top+bottom

### how we set a margin and padding?

.box{

margin: 3 px;

padding:4 px;

}

apply margin from a all of direction shorthand

.boxmain{margin: 5px 6px 7px 9px } it is from a top right bottom left

### Setting Borders

.bx{ border-width:4px;border-style:solid; border-color red'; border-radius:9px;}

# Font and display essentail in css

The `display` property specifies the display behavior (the type of rendering box) of an element.

### `display inline` → it can takes only that space required by the element. it can display no like breaks between elements.

### `display block`→ it can takes a full block space available in width and leaves a new line always.

### `display inline block`→ it is a mixture of both display inline and block

### `display none`→ it can use to not show a display of that tag to our screen

# all essentail font property of text and font

### `font-family: 'Arial', sans-serif`;

### `font-size: 16px;`

### `font-weight: bold;`

### `text-align: center;`

### `text-decoration: underline;`

### `text-transform: uppercase;`

### `line-height: 1.5;`

### `letter-spacing: 2px;`

### `color: #333333;`

### `text-shadow: 2px 2px 4px #000000;`

# z index:

simply iskaa kaam hai yei pta krna ki konsa element upar ayega aur konsa niche

agar z index ki value negative hai tau niche aur agar positive hai tau fir upar ayeagea simple

example

# flex box

it is used to arrange a items in a form of a containers makings it a flexible and a containors

how we can apply flex box:

step 1: first we can make a two div tag one is parent and one is a child

step2: second we can make a parent display as a flex of a parent

step 3: select a direction of which you want row wise and coloum wise

all edition property :

.parent{

justify-content:space betweem

}

.parents{

align-items:center;

}

%[https://www.w3schools.com/css/css3_flexbox_container.asp]