CSS - cascading Style Sheet.

- It has collection of pre defined property and values.

-it is used to change look and feel of html.

=>Types of css-
1 inline css
2.internal css
3. external css
4.import css.

=>About inline css-?( these problem makes limitation to it)

1. it is 1 to 1 time and used in html only one time.

2. The 1 to 1 code will be duplicate.
3. If code is duplicate then the file weight will increase.
4. The heavy file will take a long time to load.
5. If page loading is slow then the user experience may be bad.
6. Heavy code need more server space.
7.Google search keep low priority to inline css file.
8.It takes long time to modify the code.
9.Heavy file consumes more internet data.

=>About internal css-?

1. It is 1 to many - write css code 1 time and use in html many time.
2. All the html tags are called selector in css.
3.The css has given 6 type of selectors:-
a.css using tag name - example2.html
example -
div {
color: green;
font-size: 60px;
float: left;
width: 33.33%;
text-align: center;
}
---------------------------------------------------
b.css using id - example3.html
example -
#block1{
font-size: 40px;
color: blue;
text-align: center;
}
Note-if inside a page ,1 type of design required only 1 times then better use
css using id

--------------------------------------------------
c.css using class - example4.html.
example-
.block2{
margin: 20px;
font-size: 30px;
color: blue;
width: 150px;
 float: left;
background: pink;
padding: 15px;
}
Note- if inside a page ,1 type of design required multiple times then use css
using class method
----------------------------------------------------
d.css using tag - example5.html.
example -
h1,h2,p,div {
font-style:italic;
}

-----------------------------------------------------
e. css using tag parent and child group - example6.html
example-
header ul li{
font-size: 25px;
color: blue;
display: inline-block;
padding: 20px;
}

------------------------------------------------------
f. css using tag attributes - example7.html
Example-
input[type="number"]
{
width: 350 px;
height: 300px;
font-size: 18px;
margin: 15px;
}

-------------------------------------------------------

=> 1.syntax for inline css-

<tagname Style="property:value; property2:value; property3:value;">
<tagname>
Example:-
<p Style="height:200px; width:300px; background:red;">Welcome To CSS </p>
-------------------------------------------------------------
=>List of property:-
height-> In 3 ways -
height:auto; - it is default - height will based on the contents.
height: px ; - the height will be fixed.
min-height: px ; - the min height will be fixed and maximum based on
contents.
Example-
#one{
height: 150px;
background: red;
width: 200px;
 display: inline-block;
margin: 40px;
}
#two{
min-height: 150px;
background: red;
width: 200px;
display: inline-block;
margin: 40px;
}
#three{
height: auto;
background: red;
width: 200px;
display: inline-block;
margin: 40px;

--------------------------------------------------------------------------------
width- In 4 ways
->width:px;-it is fixed for all types of device.

->width:%;-it is suitable to fit in all device

->min-width:px/%;-it control min width
->max-width:px/%; - it controls max width
Example:-
#block1{
min-height: 300px;
width: 80%;
background: skyblue;
margin: auto;}
--------------------------------------------------------------------------------
-
->background - In 9 ways :-

background :red;
background-color:red;
background-color: rgb(100,80,50); -> /0 to 255 chars.
background-color: rgba(100,80,50,0.5); -> /0 to 9,0 is lowest brightness.
background-image:url("1,jpg");
background-image:linear gradient(red,green,blue); top to bottom
background-image:linear gradient(to left,red,green,blue);
background-image:linear gradient(to right,red,green,blue);
background-image:linear gradient(to top,red,green,blue);
Example:-

#bg1{background: blue;}
#bg2{background-color: green;}
#bg3{background-color:rgb(100,80,50);}
#bg4{background-color:rgba(100,80,50,0.5);}
#bg5 {background-image: url('2.jpg');background-size: 100% 100%;}
#bg6{background-image:linear-gradient(blue,red,black);}
#bg7{background-image:linear-gradient(to left,bluered,black);}
#bg8{background-image:linear-gradient(to right,blue,red,black);}
#bg9{background-image:linear-gradient(to top,blue,red,black);}
--------------------------------------------------------------------------------
------
->float -It convert free block level tag to inline tag.

-float:left; - it print from left to right.(LTR)

-float:right; - it print from right to left.(RTL)

--------------------------------------------------------------------------------
---
-> margin - it apply space outside of elements/tags.
margin:auto; - it align the tag in center of present area.
margin:30px; - it apply 30px gap from top,left,right,bottom.
margin-top:30px;
margin-bottom:30px;
margin-right:30px;
margin-left:30px;
margin-top left-right bottom:30px;Eg-mrgin:20px 40px 25px;

---------------------------------------------------------------------------
-> in- margin -
margin-top:30px;
margin-bottom:30px;
margin-right:30px;
margin-left:30px;

------------------------------------------------------------------------------
=>padding - it apply space inside of tags
- padding-top
- padding-left
-padding-right
-padding-bottom
--------------------------------------------------------------------------------
-----------
=>Border :-
Types of Border:- 9 types
->solid
->double
->dotted
->dashed
->inset
->outset
->groove
->ridge
Direction of Border=
->border-all side
border-top
border-left
border-right
border-bottom
================================================================================
=====