introduction to css

how to link our page to css

<link rel="stylsheet" href"demo.css">

three ways of css

1 inline css
2 inpage css
3 external css

1 inline css is that css which is used in one line css

inline css is used with style attribute
style is tag color is our property and deeppink is value
style="color: deeppink:"

2. inpage css
is used in head tag
with tag of style means
<style>
p{
color black;
background color grey;
}
</style>

3 external css
external css is used in .css page or document
selector p
p{
}
three tpes of selectors
1 universal selectors
that selector is introduces by *
2.id selector
that selector is introduced with #
3. type selector
that selector is introduced with its tag
4.class selector
that selector is introduced with .

overflow
1 hidden,,, if data is long then other data from border will be hidden
2 scroll,,, if data is long then data can be scrolled , if box is fixed
3 auto,,,,, if data is long then data will be scrolled if data is short then it
will be normal, can be used in any type
4 visible,, that data which is overflowed that data will be shown

radius
border radius
1 border-top-left-radius
2 border-top-right-radius
3 border-bottom-left-radius
4 border-bottom-right-radius

we can write all properties in one property

border radius 20px, means it will apply from all four sides

shaddow
box-shaddow 2px 2px 2px 2px grey
first value left to right
second value top to bottom
third value blur
fourth value its optional, spread.
fifth value color
if we give our property in minus then it will go to opposite side, if its left to
right then if we give minus value then it will go from right to left

text transformation
if we have to write paragraph in capital words we have to use this property
text-transformation:capitalize means first alphabet will be in capital
text-transformation:uppercase all words will be capital
text-transformation:lowercase means all words will be in small

float
a div always cover all the area infront of div and it can be move with the help of
this property,
float right,,, it will move that div to right side
float left ,,, it will move that div to left, means attach to it

clear
clear property is used to clear its sides because its usefull for boxes if we use
float property

class no 6

text shaddow

text-shaddow:2px 2px 5px red

these are four values
first value left to right
second value top to bottom
third value blur
fourth value colour

box shaddow
box-shaddow:2px 2px 5px red

fonts
1 font family ,,,, arial new times roman
2 font size,,,,,,, percentage em and pixels
3 font wieght,,,,, bold, bolder, lighter
line-hieght:2px
font-style:
fonts from google

white space
wrap
no-wrap means in one line
pre like no wrap, but it will cover spcae, maeans as spaces u wil give in
paragrap as it will show
pre line it will be by default
pre wrap
column
column-count:2
it will make our sentance in two columns
column-gap: 10px
it will make gap between columns
column-rule-style:solid
it will make slide between columns like a line
column-rule-width:10px
column-rule-colour: red
we can also write these three properties in shorthand,,, width, style and color
column-rule:5px solid orange
5px is width solid is style and orange is color

column span
column-span: all

column-spane:none
these are only two properties of column span

flex

1.display flex
2.flex direction
row,,,,, like a row inline
column,,, 1 to 5 from horizantal to vertical
column reverse from 5 to 1
row reverse reverse counting
3.flex-wrap:no-wrap,,,, The nowrap value specifies that the flex items will not
wrap (this is default):
flex-wrap: wrap, if data will overflow it will set automatically , The wrap value
specifies that the flex items will wrap if necessary:
if our div will overflow then we have to use this property
flex-wrap:wrap reverse,, he wrap-reverse value specifies that the flexible items
will wrap if necessary, in reverse order:

flex-flow
flex wrap and flex direction,,,,, The flex-flow property is a shorthand property
for setting both the flex-direction and flex-wrap properties.
these two properties will be shorthand
wrtite
flex-flow:column-reverse wrap

justify-content
there are six values of justify content

1 flex-center
make our all contents to center
2 flex-start
make our all contents to right side
3 flex-end
make our all contents to end means left side
4 space-around
it will genrate space between all contents, left and right will be half falf
5 space-between
it will genrate space between means left and right will be on corners and other
will be in gap
6 space evenly
space between in same gap
 align items
it will be in columns means any cotent will be in columns
it will work vertically
same values like flex
align items: flex-center
align items: flex-start
align items: flex-end
align-items: stretch
align-itmes: base-line

image

background-repeat: repeat
means if there is one picture it will repeat pics
background-repeat- no-repeat
means image will be single
repeat-x. it will repeat the pic horizentally.. with your width
repeat-y it will repeat the pic vertically... with your hieght
space.. means one pic as default
round or stretch is same like repeat it will adjust the image

background position
left
right
center
left center
right center
left top
right top
these properties will make image as direction we will give
background position - 10px 20px
first left
send top
now shorthand
background: url() no-repeat center top

background attachment
scroll
fixed means attachment will be fixed means pic is fixed but your paragraph will
move

flex-box
align item is our parent div
and alaign self is child div
means u can move single one
align self. you can move one item with the help of this property
align-self: flex-end
it will move your item to right end
align-self: stretch
align self: center
align-self:baseline

order
lost to greater
order-89
margin-right: auto

background origin
background-origin:border-box,,,,,,,, imgae will be add with border
padding box:padding from the box
content boox": image will be add with the content

gredient
four types of gredient
1 linear gredient
from one side to other
background:linear-gredeint: grey black orange top to bottom
background:linear-gredeint:to right grey black orange right to left, we have to use
to right

2 radial gredient
it will start from center
there are 4 ways to give direction
closest
conic
sides

3 repeating linear gredient

if we want to repeat our gredient as much as we want and we can give
direction also as linear gredient
4 repeating radial gredient