1)What is css:-->css is used to design web pages

a)CSS stands for Cascading Style Sheet

b)Current Version of css is css3
c)css describes that how html elements are to be display on web page
d)CSS can control layout of multiple web pages at once

2)Types of css:-->
a)Inline CSS:-->Inline css can be used for single elements-->Inline can be written
inside opening element using style attribute
<p style=""></p>

b)Internal CSS: Internal css can control current web page:--->Internal css can be
written inside head section of html page using <style></style> Element
c)External CSS: External css can control entire application
We can create css file and use that to control full application

3)CSS Selectors:-->
a)id selector:-->css defined by id name(#)
b)class selector:-->css defined by class name ( . )
c)element selectors:-->css defined by html element name

4)width and height:-->

a)width:-->used to set width of element
b)height:--> used to set height of element

5)background property:-->to background for html elements

a)background:-->to set color as background
b)background-image:-->to set image as background

6)border property:-->to set borders for elements

a)border:-->to set all borders same time
b)border-top:-->to set top border
c)border-right:-->to set right border
d)border-bottom:-->to set bottom border
e)border-left:-->to set left border

**** Properties requied to set border ****

I)width of border
II)style of border
III)color of border

7)border style types:-->

a)solid
b)dotted
c)dashed
d)double

8)margin property:-->Margins are used to create space around elements outside of

any defined borders
a)margin:-->shorthand property to set margin all sides
b)margin-top:-->set the top margin of element
c)margin-right:-->sets the right margin of element
d)margin-bottom:-->sets the bottom margin of element
e)margin-left:-->sets the left margin of element

9)padding property:-->padding is used to create space around an elements content

inside of any defined borders
a)padding:-->shorthand property to set padding all side
b)padding-top:-->sets the top padding inside element
c)padding-right:-->sets the right padding inside element
d)padding-bottom:-->sets the bottom padding inside element
e)padding-left:--?sets the left padding inside element

top right bottom left

10)text formating:-->css has lots of properties to format text

a)color:-->to change text color
b)Text Alignment:-->
I)text-align:-->to align text(left,center,right)
II)text-align-last:-->specify how to align the last line of the text
III)direction:-->specify the text direction

c)font-size:-->to set font size

d)text-decoration:-->
e)Text Transformation:-->
text-transform:-->
I)uppercase:-->to all letters in uppercase
II)lowercase:-->to show letters in lowercase
III)capitalize:-->First letter capaital, after full stop or space

f)text-spacing:-->
I)text-indent:-->Specify the indentation of the line in a text block
II)line-height:-->specify the line height
III)letter-spacing:-->Specify space between characters in a text
IV)white-space:-->Specify how handle white spaces inside an element
V)word-spacing:-->specify the space between words in a text

g)text-shadow:-->to add a shadow to text

11)CSS Display Property:-->this property is used specify how an element is shown

on web page
display:
I)inline:-->Displays an element as a inline element
II)block:-->Dispalys an element as a block element
III)flex:-->Display an element as block-lavel flex container
IV)grid:-->Displays an element as a block-lavel grid container
V)inline-block:-->Displays an element as inline-lavel block container
VI)none:-->The element is completely removed

12)CSS Grid:-->Gird works on rows and columns

Properties of grid:-->
grid :--->
a)grid-column-templates:-->Specify size of column and count of columns in row
b)column-gap:-->specify the gap between columns
c)align-items:-->aligns the contents for a specific grid along the column axis
d)grid-column:-->a shorthand property for grid-column-start and grid-column-end
e)grid-column-start:-->this will specify from where to grid columns
f)grid-column-end:-->specify where to end grid item
g)column-count:-->to specify number columns

13)CSS Flex:-->Flexbox is a layout method for arranging items in rows and columns
a)flex container
b)flex items

Properties for flex container:-->

I)flex-direction:-->Specifies the direction of flex items inside flex container
II)flex-flow:-->A shorthand property for flex-direction and flex-warp
III)flex-warp:-->Specify whether the flex items should warp or not
IV)justify-content:-->Horizontally aligns the flex items, when the item not use all
available space on the main axis
V)align-items:-->Vertically aligns the flex items, when the items do not use all
available space on the cross axis
VI)align-content:-->Modifies the behavior of the flex-warp property, it is similar
align items,but instead aligning flex items, it aligns flex lines

14)2D Animation Using CSS:-->CSS transform allow to move,rotate, scale elements

2D Function List:-->
a)translate():-->Defines 2D Translation moving the element along the X and the Y
axis
b)translateX():-->Defines 2D translation moving the element along the X axis
c)translateY():-->Defines 2D translation moving the element along the Y axis
d)scale():-->Defines 2D scale transformation,scaling the elements width and height
e)scaleX():-->Defines 2D scale transformation,scaling the elements width
f)scaleY():-->Defrines 2D scale transformation,scaling the elements height
g)rotate():-->Defines a 2D rotation,the angle specified in the parameter

15)3D Animation Using CSS:-->CSS also supports 3D transformations

a)rotateX():-->Defines a 3D rotation along the X-axis
b)rotateY():-->Defines a 3D rotation along the Y-axis
c)rotateZ():-->Defines a 3D rotation along the Z-axis
d)scaleZ():-->Defines a 3D scale transformation by giving the value for Z-axis
e)scale3d():-->Defines a 3D scale transformation
f)rotate3d():-->Defines a 3D rotation
g)translateZ():-->Defines a 3D translation using only the value for Z-axis
h)translate3d():-->Defines a 3D translation
i)matrix3d():-->Defines a 3D transformation using a 4x4 matrix of 16 values

16)Float Property:-->this property specifies how an element should float

a)left:-->the element floats to the left of its container
b)right:-->the element floats to the right of its container
c)none:-->the element does not float

17)CSS Positions:-->The position property specifies the type of positioning method

for an element
a)static Postion:-->The html elements are positioned static by default
b)relative Position:-->an element with the relative position is positioned to its
normal position
c)absolute Position:-->an element with the absolute position is positioned relative
to the nearest positioned ancestor
d)fixed Position:-->an element with position fixed is positioned relative to
viewport,that means it always stays at the same place
e)sticky Position:-->an element with the position sticky is positioned based on
user's scroll position

18)css hover effect:-->to give css effects on mouse over this propert isused

19)box-shadow:-->to give shadow effects to box element

20)css gradients:-->this property allow to display smooth transition between two or

more specified colors
a)linear gradients:-->to create linear gradient must define at least two color stop
b)radical gradients:-->a radical gradient is defined its center
c)conic gradients:-->a conic gradient is a gradient with color transitions rotated
around a center point

21)min-height:-->minimum height of element

22)Animation using css:-->CSS allows animation effects for html elements

a)animation-name:-->To specify animation name
b)animation-duration:-->To specify the duration of animation
c)animation-delay:-->To specify delay in starting of animation
d)animation-iteration-count:-->Count of effect
e)animation-direction:-->to specify direction of animation
f)animation-timing-function:-->To specify speed curve of animation
g)animation-fill-mode:-->specify a style for the element when the animation is not
playing
h)keyframes:-->Specify the animation code
i)animation:-->shorthand property to specify animation