1.

Selectors
Selectors target elements in the HTML to apply styles.

*: Universal selector (selects all elements)

element: Element selector (e.g., div, p)
#id: ID selector
.class: Class selector
element.class: Selects elements with a specific class
element#id: Selects an element with a specific ID
descendant: Selects an element within another (e.g., div p)
:hover, :focus, :active: Pseudo-classes
::before, ::after: Pseudo-elements
2. Colors
color: Text color
background-color: Background color of an element
border-color: Color of borders
rgb(), rgba(): Red, green, blue, and alpha transparency
hsl(), hsla(): Hue, saturation, lightness, and alpha
transparent: Transparent color
3. Text Styling
font-family: Sets the font of text
font-size: Sets the size of the text
font-weight: Sets the thickness of text (e.g., normal, bold)
font-style: Specifies whether the font is italicized or not
line-height: Controls the space between lines of text
text-align: Aligns text (e.g., left, right, center, justify)
text-decoration: Adds decoration (e.g., underline, line-through)
text-transform: Changes case (e.g., uppercase, lowercase)
letter-spacing: Adjusts spacing between letters
word-spacing: Adjusts spacing between words
4. Box Model
width, height: Width and height of an element
padding: Space between content and border
border: Defines the border (style, color, width)
margin: Space outside the border
box-sizing: Controls box model behavior (content-box, border-box)
5. Layout
display: Controls the display type of an element (e.g., block, inline, flex, grid,
none)
position: Controls the positioning method (static, relative, absolute, fixed,
sticky)
top, right, bottom, left: Offset values when using position
float: Floating an element (e.g., left, right)
clear: Clears floats
overflow: Controls overflow behavior (visible, hidden, scroll, auto)
z-index: Controls stacking order (for elements with position other than static)
flex: Flexbox properties (display: flex, flex-direction, justify-content, align-
items, flex-wrap)
grid: Grid layout properties (display: grid, grid-template-columns, grid-template-
rows, grid-gap)
6. Flexbox
display: flex: Enables Flexbox layout
flex-direction: Defines direction of flex items (row, column, row-reverse, column-
reverse)
justify-content: Aligns items along the main axis
align-items: Aligns items along the cross axis
align-self: Aligns a single flex item
flex-wrap: Allows wrapping of flex items
flex-grow: Determines how much a flex item will grow relative to others
flex-shrink: Determines how much a flex item will shrink relative to others
flex-basis: Sets the initial size of a flex item
7. Grid Layout
display: grid: Enables grid layout
grid-template-columns: Defines the columns of the grid
grid-template-rows: Defines the rows of the grid
grid-gap: Defines space between grid items
grid-column: Specifies grid item’s column span
grid-row: Specifies grid item’s row span
grid-template-areas: Defines named grid areas
8. Positioning
position: Defines positioning method (static, relative, absolute, fixed, sticky)
top, right, bottom, left: Offsets for absolutely or fixed-positioned elements
z-index: Controls stacking order of positioned elements
9. Transitions & Animations
transition: Allows smooth transitions for property changes
transition-property: Defines which properties to transition
transition-duration: Duration of the transition
transition-timing-function: Defines the timing curve (e.g., ease, linear)
transition-delay: Delay before the transition starts
animation: Defines keyframe-based animations
@keyframes: Defines the animation steps
animation-name: Specifies animation to apply
animation-duration: Duration of the animation
animation-timing-function: Timing function for the animation
animation-delay: Delay before the animation starts
10. Borders & Outline
border: Shorthand for border width, style, and color
border-radius: Rounds corners of an element
outline: Shorthand for outline width, style, and color
outline-offset: Space between the outline and the element's border
11. Backgrounds
background: Shorthand for background properties
background-color: Color of the background
background-image: Image to display in the background
background-position: Position of the background image
background-repeat: Defines if the background image repeats
background-size: Defines the size of the background image
background-attachment: Defines whether the background scrolls with the page or is
fixed
12. Box Shadows
box-shadow: Adds shadow to an element (e.g., box-shadow: 10px 10px 5px rgba(0, 0,
0, 0.5))
13. Text Shadows
text-shadow: Adds shadow to text (e.g., text-shadow: 2px 2px 4px rgba(0, 0, 0,
0.5))
14. Opacity
opacity: Defines the transparency level of an element (value between 0 and 1)
15. Media Queries
@media: Defines responsive design rules for specific screen sizes
Example: @media screen and (max-width: 600px) { ... }
16. Custom Properties (CSS Variables)
--var-name: Defines a custom property (e.g., --main-color: blue;)
var(--var-name): Uses the custom property (e.g., color: var(--main-color))
17. Other Properties
cursor: Specifies the mouse cursor (e.g., pointer, default)
visibility: Controls visibility (visible, hidden, collapse)
clip-path: Clips an element to a specific shape