CSS introduction and all properties of css. html tags in a different slide: https://www.slideshare.net/slideshow/introduction-to-html-with-syntax-and-tagspptx/266989656

1. @neelotpal.dey
I. Introduction to CSS

2. @neelotpal.dey
A. What is CSS?
 - CSS (Cascading Style Sheets) is a stylesheet language used to
describe the presentation of a document written in HTML or XML.
 - It allows developers to control the visual styling of web pages,
including layout, colors, fonts, and other design elements.

3. @neelotpal.dey
B. Importance of CSS in web
development
 - Separates content (HTML) from presentation (CSS), enabling
better maintainability and reusability.
 - Provides consistent styling across multiple web pages.
 - Enhances the overall user experience by creating visually
appealing and accessible designs.
 - Enables responsive design, allowing websites to adapt to
different devices and screen sizes.

4. @neelotpal.dey
C. Versions of CSS
 - CSS 1 (1996): The initial version, providing basic styling
capabilities.
 - CSS 2 (1998): Introduced advanced selectors, positioning, and
media types.
 - CSS 2.1 (2004): A revision of CSS 2, fixing errors and adding a
few new features.
 - CSS 3 (ongoing): Modularized and continuously evolving,
introducing new features and improvements.

5. @neelotpal.dey
II. CSS Syntax

6. @neelotpal.dey
A. Syntax structure (selector, property,
value)
 - CSS rules consist of a selector, property, and value:
 ```css
 selector {
 property: value;
 }
 ```
 - Selectors define the HTML elements to be styled.
 - Properties specify the styles to be applied.
 - Values define the specific styling details.

7. @neelotpal.dey
B. CSS comments
 - Comments in CSS are used to provide explanations or
temporarily disable code.
 - Single-line comments start with `/*` and end with `*/`.
 ```css
 /* This is a CSS comment */
 ```

8. @neelotpal.dey
I. Introduction to CSS Properties
 A. What are CSS properties?
 - CSS properties define the style and presentation of HTML elements
 B. Importance of CSS properties in web design
 - CSS properties enable separation of content and presentation
 - They provide control over various aspects of web page design

9. @neelotpal.dey
II. Typography
Properties

10. @neelotpal.dey
A. Font Properties

11. @neelotpal.dey
1. font-family
 - Description: Specifies the font family for text
 - Syntax: font-family: "font-family-name", generic-family;

12. @neelotpal.dey
2. font-size
 - Description: Sets the size of the text
 - Syntax: font-size: size-value;

13. @neelotpal.dey
3. font-weight
 - Description: Specifies the weight (boldness) of the font
 - Syntax: font-weight:
normal|bold|bolder|lighter|100|200|...|900;

14. @neelotpal.dey
4. font-style
 - Description: Specifies the font style (normal, italic, or
oblique)
 - Syntax: font-style: normal|italic|oblique;

15. @neelotpal.dey
5. font-variant
 - Description: Specifies the variant of the font (small-caps or
normal)
 - Syntax: font-variant: normal|small-caps;

16. @neelotpal.dey
B. Text Properties

17. @neelotpal.dey
1. text-align
 - Description: Specifies the horizontal alignment of text
 - Syntax: text-align: left|right|center|justify|start|end;

18. @neelotpal.dey
2. text-decoration
 - Description: Adds decoration to text (underline, overline,
line-through)
 - Syntax: text-decoration: none|underline|overline|line-through;

19. @neelotpal.dey
3. text-transform
 - Description: Controls the capitalization of text
 - Syntax: text-transform: none|capitalize|uppercase|lowercase;

20. @neelotpal.dey
4. text-indent
 - Description: Specifies the indentation of the first line of text
 - Syntax: text-indent: length-value;

21. @neelotpal.dey
5. line-height
 - Description: Sets the height of a line of text
 - Syntax: line-height: normal|number|length|percentage;

22. @neelotpal.dey
6. letter-spacing
 - Description: Increases or decreases the space between
characters
 - Syntax: letter-spacing: normal|length-value;

23. @neelotpal.dey
7. word-spacing
 - Description: Increases or decreases the space between words
 - Syntax: word-spacing: normal|length-value;

24. @neelotpal.dey
8. white-space
 - Description: Specifies how white-space inside an element is
handled
 - Syntax: white-space: normal|nowrap|pre|pre-line|pre-wrap;

25. @neelotpal.dey
9. text-shadow
 - Description: Adds a shadow effect to text
 - Syntax: text-shadow: h-shadow v-shadow blur-radius color;

26. @neelotpal.dey
III. Color and Background Properties

27. @neelotpal.dey
A. Color Properties
 1. color
 - Description: Sets the foreground color of text
 - Syntax: color: color-name|hex-value|rgb-value|rgba-value;
 2. opacity
 - Description: Specifies the opacity/transparency level of an element
 - Syntax: opacity: value;
 /* value from 0.0 (fully transparent) to 1.0 (fully opaque) */

28. @neelotpal.dey
B. Background Properties

29. @neelotpal.dey
1. background-color
 - Description: Sets the background color of an element
 - Syntax: background-color: color-name|hex-value|rgb-
value|rgba-value;

30. @neelotpal.dey
2. background-image
 - Description: Specifies one or more background images for an
element
 - Syntax: background-image: url("image-path")|linear-
gradient()|radial-gradient()|...;

31. @neelotpal.dey
3. background-repeat
 - Description: Specifies how background images are repeated
 - Syntax: background-repeat: repeat|repeat-x|repeat-y|no-
repeat;

32. @neelotpal.dey
4. background-position
 - Description: Specifies the starting position of a background
image
 - Syntax: background-position: x-value y-value|position-
keyword;

33. @neelotpal.dey
5. background-size
 - Description: Specifies the size of the background image(s)
 - Syntax: background-size: auto|length-
value|percentage|cover|contain;

34. @neelotpal.dey
6. background-attachment
 - Description: Specifies whether the background image scrolls
with the content or is fixed
 - Syntax: background-attachment: scroll|fixed|local;

35. @neelotpal.dey
7. background-clip
 - Description: Specifies the painting area of the background
 - Syntax: background-clip: border-box|padding-box|content-
box;

36. @neelotpal.dey
8. background-origin
 - Description: Specifies the positioning area of the background
image(s)
 - Syntax: background-origin: padding-box|border-box|content-
box;

37. @neelotpal.dey
9. background (shorthand)
 - Description: A shorthand property for setting multiple
background properties at once
 - Syntax: background: bg-color bg-image position/bg-size bg-
repeat bg-origin bg-clip bg-attachment;

38. @neelotpal.dey
IV. Box Model
Properties

39. @neelotpal.dey
A. Margin Properties

40. @neelotpal.dey
1. margin
 - Description: A shorthand property for setting all four margins
at once
 - Syntax: margin: value; /* top, right, bottom, left */

41. @neelotpal.dey
2. margin-top
 - Description: Sets the top margin of an element
 - Syntax: margin-top: length-value;

42. @neelotpal.dey
3. margin-right
 - Description: Sets the right margin of an element
 - Syntax: margin-right: length-value;

43. @neelotpal.dey
4. margin-bottom
 - Description: Sets the bottom margin of an element
 - Syntax: margin-bottom: length-value;

44. @neelotpal.dey
5. margin-left
 - Description: Sets the left margin of an element
 - Syntax: margin-left: length-value;

45. @neelotpal.dey
B. Padding Properties

46. @neelotpal.dey
1. padding
 - Description: A shorthand property for setting all four
paddings at once
 - Syntax: padding: value; /* top, right, bottom, left */

47. @neelotpal.dey
2. padding-top
 - Description: Sets the top padding of an element
 - Syntax: padding-top: length-value;

48. @neelotpal.dey
3. padding-right
 - Description: Sets the right padding of an element
 - Syntax: padding-right: length-value;

49. @neelotpal.dey
4. padding-bottom
 - Description: Sets the bottom padding of an element
 - Syntax: padding-bottom: length-value;

50. @neelotpal.dey
5. padding-left
 - Description: Sets the left padding of an element
 - Syntax: padding-left: length-value;

51. @neelotpal.dey
C. Border Properties

52. @neelotpal.dey
1. border
 - Description: A shorthand property for setting all border
properties at once
 - Syntax: border: border-width border-style border-color;

53. @neelotpal.dey
2. border-width
 - Description: Sets the width of the border
 - Syntax: border-width: thin|medium|thick|length-value;

54. @neelotpal.dey
3. border-style
 - Description: Sets the style of the border
 - Syntax: border-style:
none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;

55. @neelotpal.dey
4. border-color
 - Description: Sets the color of the border
 - Syntax: border-color: color-name|hex-value|rgb-value|rgba-
value;

56. @neelotpal.dey
5. border-radius
 - Description: Specifies the radius of rounded corners
 - Syntax: border-radius: length-value;

57. @neelotpal.dey
D. Box-sizing
 - Description: Specifies how the total width and height of an
element are calculated
 - Syntax: box-sizing: content-box|border-box;

58. @neelotpal.dey
V. Layout Properties

59. @neelotpal.dey
A. Display Properties

60. @neelotpal.dey
1. display
 - Description: Specifies the display behavior of an element
 - Syntax: display: inline|block|inline-block|flex|inline-
flex|grid|inline-grid|none;

61. @neelotpal.dey
2. visibility
 - Description: Specifies whether an element is visible or
hidden
 - Syntax: visibility: visible|hidden|collapse;

62. @neelotpal.dey
3. overflow
 - Description: Specifies how to handle content that overflows
its container
 - Syntax: overflow: visible|hidden|scroll|auto;

63. @neelotpal.dey
B. Positioning Properties

64. @neelotpal.dey
1. position
 - Description: Specifies the positioning method for an element
 - Syntax: position: static|relative|absolute|fixed|sticky;

65. @neelotpal.dey
2. top, right, bottom, left
 - Description: Used with position properties to specify the
position offset
 - Syntax: top/right/bottom/left: auto|length-value|percentage;

66. @neelotpal.dey
3. z-index
 - Description: Specifies the stack order of positioned elements
 - Syntax: z-index: auto|integer;

67. @neelotpal.dey
4. float
 - Description: Specifies how an element should float
 - Syntax: float: none|left|right;

68. @neelotpal.dey
5. clear
 - Description: Specifies which sides of an element should
allow floating elements
 - Syntax: clear: none|left|right|both;

69. @neelotpal.dey
C. Flexbox Properties

70. @neelotpal.dey
1. display: flex
 - Description: Defines a flex container
 - Syntax: display: flex|inline-flex;

71. @neelotpal.dey
2. flex-direction
 - Description: Specifies the direction of flex items
 - Syntax: flex-direction: row|row-reverse|column|column-
reverse;

72. @neelotpal.dey
3. flex-wrap
 - Description: Specifies whether flex items should wrap or not
 - Syntax: flex-wrap: nowrap|wrap|wrap-reverse;

73. @neelotpal.dey
4. justify-content
 - Description: Aligns flex items along the main axis
 - Syntax: justify-content: flex-start|flex-end|center|space-
between|space-around|space-evenly;

74. @neelotpal.dey
5. align-items
 - Description: Aligns flex items along the cross axis
 - Syntax: align-items: stretch|flex-start|flex-end|center|baseline;

75. @neelotpal.dey
6. align-content
 - Description: Aligns flex lines within a flex container
 - Syntax: align-content: flex-start|flex-end|center|space-
between|space-around|stretch;

76. @neelotpal.dey
7. flex-grow
 - Description: Specifies how much a flex item will grow
relative to the rest
 - Syntax: flex-grow: number;

77. @neelotpal.dey
8. flex-shrink
 - Description: Specifies how much a flex item will shrink
relative to the rest
 - Syntax: flex-shrink: number;

78. @neelotpal.dey
9. flex-basis
 - Description: Specifies the initial length of a flex item
 - Syntax: flex-basis: auto|length-value;

79. @neelotpal.dey
10. order
 - Description: Specifies the order of flex items
 - Syntax: order: integer;

80. @neelotpal.dey
D. Grid Properties

81. @neelotpal.dey
1. display: grid
 - Description: Defines a grid container
 - Syntax: display: grid|inline-grid;

82. @neelotpal.dey
2. grid-template-columns
 - Description: Specifies the sizes of the columns in a grid
layout
 - Syntax: grid-template-columns: value...; /* <track-size>... |
<line-name>... */

83. @neelotpal.dey
3. grid-template-rows
 - Description: Specifies the sizes of the rows in a grid layout
 - Syntax: grid-template-rows: value...; /* <track-size>... | <line-
name>... */

84. @neelotpal.dey
4. grid-gap
 - Description: Specifies the gaps between rows and columns
 - Syntax: grid-gap: <row-gap> <column-gap>;

85. @neelotpal.dey
5. grid-column
 - Description: Specifies which grid column(s) an item should
span
 - Syntax: grid-column: <start-line> / <end-line>;

86. @neelotpal.dey
6. grid-row
 - Description: Specifies which grid row(s) an item should span
 - Syntax: grid-row: <start-line> / <end-line>;

87. @neelotpal.dey
7. grid-area
 - Description: Specifies a grid item's position and size within
the grid
 - Syntax: grid-area: <row-start> / <column-start> / <row-end>
/ <column-end>;

88. @neelotpal.dey
8. justify-items
 - Description: Aligns grid items along the inline (row) axis
 - Syntax: justify-items: start|end|center|stretch;

89. @neelotpal.dey
9. align-items
 - Description: Aligns grid items along the block (column) axis
 - Syntax: align-items: start|end|center|stretch;

90. @neelotpal.dey
VI. Transformation and
Transition Properties

91. @neelotpal.dey
A. Transform Properties

92. @neelotpal.dey
1. transform
 - Description: Applies a 2D or 3D transformation to an element
 - Syntax: transform: none|transform-functions;

93. @neelotpal.dey
2. transform-origin
 - Description: Specifies the origin of transformation for an
element
 - Syntax: transform-origin: x-value y-value z-value;

94. @neelotpal.dey
3. transform-style
 - Description: Specifies how nested elements are rendered in
3D space
 - Syntax: transform-style: flat|preserve-3d;

95. @neelotpal.dey
B. Transition Properties

96. @neelotpal.dey
1. transition
 - Description: A shorthand property for setting all transition
properties
 - Syntax: transition: property duration timing-function delay;

97. @neelotpal.dey
2. transition-property
 - Description: Specifies the name(s) of CSS properties to
transition
 - Syntax: transition-property: none|property-name|all;

98. @neelotpal.dey
3. transition-duration
 - Description: Specifies the duration of the transition effect
 - Syntax: transition-duration: time;

99. @neelotpal.dey
4. transition-timing-function
 - Description: Specifies the timing function for the transition
effect
 - Syntax: transition-timing-function: ease|linear|ease-in|ease-
out|ease-in-out|cubic-bezier()|steps();

100. @neelotpal.dey
5. transition-delay
 - Description: Specifies the delay before the transition effect
starts
 - Syntax: transition-delay: time;

101. @neelotpal.dey
VII. Animation
Properties

102. @neelotpal.dey
A. @keyframes
 - Description: Defines the animation sequence
 - Syntax: @keyframes animation-name { /* keyframe rules */ }

103. @neelotpal.dey
B. animation-name
 - Description: Specifies the name of the @keyframes animation
 - Syntax: animation-name: animation-name;

104. @neelotpal.dey
C. animation-duration
 - Description: Specifies the duration of the animation
 - Syntax: animation-duration: time;

105. @neelotpal.dey
D. animation-timing-function
 - Description: Specifies the timing function for the animation
 - Syntax: animation-timing-function: ease|linear|ease-in|ease-
out|ease-in-out|cubic-bezier()|steps();

106. @neelotpal.dey
E. animation-delay
 - Description: Specifies the delay before the animation starts
 - Syntax: animation-delay: time;

107. @neelotpal.dey
F. animation-iteration-count
 - Description: Specifies the number of times the animation
should repeat
 - Syntax: animation-iteration-count: infinite|number;

108. @neelotpal.dey
G. animation-direction
 - Description: Specifies whether the animation should play
forwards, backwards, or alternate
 - Syntax: animation-direction: normal|reverse|alternate|alternate-
reverse;

109. @neelotpal.dey
H. animation-fill-mode
 - Description: Specifies how to apply styles before and after the
animation
 - Syntax: animation-fill-mode: none|forwards|backwards|both;

110. @neelotpal.dey
I. animation-play-state
 - Description: Specifies whether the animation is running or
paused
 - Syntax: animation-play-state: paused|running;

111. @neelotpal.dey
VIII. List and Table
Properties

112. @neelotpal.dey
A. List Properties

113. @neelotpal.dey
1. list-style-type
 - Description: Specifies the type of list-item marker
 - Syntax: list-style-type: disc|circle|square|decimal|lower-
roman|upper-roman|...;

114. @neelotpal.dey
2. list-style-image
 - Description: Specifies an image as the list-item marker
 - Syntax: list-style-image: none|url("image-path");

115. @neelotpal.dey
3. list-style-position
 - Description: Specifies where the list-item marker should be
positioned
 - Syntax: list-style-position: inside|outside;

116. @neelotpal.dey
B. Table Properties

117. @neelotpal.dey
1. border-collapse
 - Description: Specifies whether table borders should be
collapsed into a single border
 - Syntax: border-collapse: separate|collapse;

118. @neelotpal.dey
2. border-spacing
 - Description: Specifies the distance between the borders of
adjacent cells
 - Syntax: border-spacing: horizontal-value vertical-value;

119. @neelotpal.dey
3. caption-side
 - Description: Specifies where the table caption should be
placed
 - Syntax: caption-side: top|bottom;

120. @neelotpal.dey
4. empty-cells
 - Description: Specifies how to display borders and
backgrounds of empty cells
 - Syntax: empty-cells: show|hide;

121. @neelotpal.dey
5. table-layout
 - Description: Specifies the layout algorithm for rendering
tables
 - Syntax: table-layout: auto|fixed;

122. @neelotpal.dey
IX. User Interface
Properties

123. @neelotpal.dey
A. Cursor
 - Description: Spec