1.

Selectors:

1. Universal Selectors * {}

2. Element/Type Selectors tags {}

3. Class Selectors .class {}

4. Id Selectors #id {}

5. Child Selectors Tag in dif Tag direct relation, E.g. <div>

<p> </p> </div>.

Use: div > p {}

6. Descendant Selectors: Tag in dif Tag but not in direct rela.,

E.g.<div><article><p></p> <article>
</div>.

Use: div p {}

7. Pseudo Selectors (A) For Link-Visited link, <div> <a

href> </div>.

Use: a:Visited {}

(B) For Link-Unvisited link, <div> <a

href> </div>.

Use: a:link {}

(C) For Link- Active link, <div> <a

href> </div>.

Use: a:active {}
 (D) For Link-Cursor Hover link, <div>
<a href> </div>.

Use: a:Hover{}

2. Opacity Any Color Opacity Range 0.1, 0.3, 0.6,

1(Default).

3. Background Color Background Color.

4. Background-Image Sets the background image for an

element.

4.1. Background Size (a)Cover best, (b)Contain (c)auto

5. Background-Repeat (a)No-repeat, (b)Repeat-x, (c)Repeat-y.

6. Background-Position left top, left center, left bottom, right

top, right center, right bottom, center
top, center center, center bottom.

Percentage Values: 0% 0% - The first

value is horizontal (from left to right),
the second is vertical (from top to
bottom).

Mixing Units: You can mix percentages,

keywords, and lengths:

background-position: 50% 10px;

background-position: right 20px;

7. Background-Attachment: Fixed Value:Fixed, The background
image does not scroll with the
content.

</-------......------> NOTE : When using the shorthand property the order

of the property values is:

background-color

background-image

background-repeat

background-attachment

background-position

8. Borders-Style: The border-style property specifies what kind of

border to display.

The following values are allowed:

Use: p.outset {border-style: outset;}

(1) dotted - Defines a dotted border

(2) dashed - Defines a dashed border

(3) solid - Defines a solid border

(4) double - Defines a double border

(5) groove - Defines a 3D grooved border. The effect depends on the border-color
value

(6) ridge - Defines a 3D ridged border. The effect depends on the border-color value

(7) inset - Defines a 3D inset border. The effect depends on the border-color value

(8) outset - Defines a 3D outset border. The effect depends on the border-color value

(9) none - Defines no border

(10)hidden - Defines a hidden border

9. Border-Width: The width can be set as a specific size (in
px, pt, cm, em, etc) or by using one of
the three pre-defined values:

thin, medium, or thick:

(A) border-width: 20px 5px; /* 20px top

and bottom, 5px on the sides */

(B) border-width: 25px 10px 4px 35px; /*

25px top, 10px right, 4px bottom and
35px left */

10. Border-Color The border-color property is used to set

the color of the four borders.

(A) border-color: red green blue yellow;

/* red top, green right, blue bottom and
yellow left */

11.Border-side Use: border-left/right/bottom/left: 5px

solid red;

12. Border-Radius The border-radius property is used to

add rounded borders to an element

E.g. border-radius: 5px;

13. Margin:

(A)Margin A shorthand property for setting all the margin

properties in one declaration

(B)Margin-bottom Sets the bottom margin of an element

(C)Margin-left Sets the left margin of an element

(D)Margin-right Sets the right margin of an element

(D)Margin-top Sets the top margin of an element

14. Padding:
 (A)Padding A shorthand property for setting all the padding
properties in one declaration

(B)Padding-bottom Sets the bottom padding of an element

(C)Padding-left Sets the left padding of an element

(D)Padding-right Sets the right padding of an element

(E)Padding-top Sets the top padding of an element

15. Height/Width The height and width properties are used to set the
height and width of an element.

16. Outline An outline is a line drawn outside the element's border.

Width style color. Also affected with border radius.

16.1 Outline Offset px

17. Line Height

18. Text-Transform Uppercase, Lowercase, Capatalise, None

19. Display Inline, Block, Inline-block, None, If you want to hide

anything

20. Visibility None; Same as Diaplay none, If you want to hide

anything bur space is reserved

21. Units:

(A) px Fixed unit exact & non-responsive

(B) Percentage % Used to define a size as relative to element's parent

object

(C) em Font-size acc. to element's parent font size x-em

(D) rem Font-size of the root element/Main element. x-rem

 (E) vh/vw Height/Weight acc. % of browser.

(F) vmin Phone mein vmin mtlb width/ LP mein Height. Imp:
Work as vh

(G) vmax Phone mein vmin mtlb height/ LP mein width.

Imp:Work as vw

Note: vmin/vmax mtlb jo chota ho device se mtlb nhi h.

22. Position:

(A) Static; By default fixed position not working

left,right,top,botttom

(B) Relative; Main apni jagah par hoon, lekin thoda idhar-udhar ho
sakta hoon jaise left,right,top,botttom meri space koi
nahi gherunga aur overlap bhi ho jaunga

(C) Absolute; Idhr/udhr ho jaunga lekin parent ke

document/body/html ke relative, #(Exception :
transform, filter, prospective)

(D) Sticky; <..> Position based on user' scroll position

(E) Fixed; <..> Idhr/udhrho jaunga lekin parent ke document/browser

kr relative. Header/Footer used always fixed position
while scroll sees on page.

23. z-Index (-3,-2,-1,0,1,2,3) Decide overlap konsa niche konsa upr lekin static par
nhi chlta

24. Display: flex; flex container adjust any element in container

(A) Flex-direction main axia, cross axis, b default main axis is

row/horizontal

row,row-reverse, column, column reverse.

(B) Justify-content Alignment along the main axis.

flex-start, flex-end, centre, space ev.

(C) Align-item
25. Box-Shadow h-offset v-offset blur spread color inset

26. Text-Shadow h-offset v-offset blur spread color

27. List-Style Lists Disc ke style “Devanagari” jaise

28. List-Style-Position Inside

29. List-Style-Type Emoji Window + .

30. Overflow Scroll, Auto

31. Text-Overflow “Ellipses” Overflow par …. Aa jate h

32. White-Space “Nowrap” krne se text niche nhi girega only x-axis scroll

33. :root {

--color1: rgb(59, 159, 184); background-color: var(--color1);

--color2: rgb(230, 149, 230); background-color: var(--color1);

--defpad: 50px; padding: var(--defpad);

--defop: 0.2 ` opacity: var(--defop);

Use any css property in this variables because u can’t change theme in 100’s of elements.

34. @media screen and (orientation: portrait) {

body {

border: 2px solid black;

@media only screen and (max-width: 455px){

body {

background-color: darkred;

.boxes {

flex-direction: column;

}
NOTE : If the screen like this then show this.

Transition Property: Used Tag:hover,link,active,u can use any css property

in this

35. Transition-property: all;

36. Transition Duration Duration/Time 1s,2s,10s,1min, 2min

37. Transition -Timing-Effects Linea, Ease, Steps(5), Cubic

38. Transition Delay For Delay a Transition

39. Transition Shorthand Property, Duration, Timing-function, Delay

Transform Property:
40. Transform: rotate(45deg) For Element Rotate
^rotate: x 180deg;
^rotate: y 180deg;
^rotate: z 180deg;
41. Transform: Scale(1,2,3…..); Sizing Property in times
For Both Scale(1, 2);
1 value for x-axis
2 value for y-axis
Transform: ScaleY(2);
Transform: ScaleX(2);
42. Transform: TranslateY(200px) Element Slide Position
Shorthand: Translate(100px, 100px);
43. Transform : Skew(45deg); Skew; Kone pkd kr kich dena

Animation :
44. @keyframe Myname{
From { font-size: 20px;
 background-color: Green; }
To { font-size: 40px;
background-color: Red; }
}
Note:
 Animation-name, duration, timing-function, delay, iteration-count,direction