Selectors

• .class: Targets elements with a specific class.
• #id: Targets an element with a specific id.
• element: Targets all instances of a specific element.
• element.class: Targets elements that are both an element and have a specific class.
• element > child: Targets direct children of an element.
• element ~ sibling: Targets siblings following an element.

Properties

Box Model

• width: Sets the width of an element.
• height: Sets the height of an element.
• margin: Sets the margin around an element.
• padding: Sets the padding inside an element.
• border: Sets the border around an element.

Backgrounds

• background-color: Sets the background color of an element.
• background-image: Sets a background image for an element.
• background-repeat: Controls the repetition of a background image.
• background-position: Sets the position of a background image.

Typography

• font-family: Sets the font family of text.
• font-size: Sets the size of the text.
• color: Sets the color of the text.
• font-weight: Sets the weight (thickness) of the text.
• line-height: Sets the height of lines of text.

Layout

• display: Specifies the display behavior of an element.
• position: Sets how an element is positioned in a document.
• float: Floats an element to the left or right side of its container.
• clear: Clears floats.

Flexbox

• display: flex;: Turns an element into a flex container.
• justify-content: Aligns items horizontally.
• align-items: Aligns items vertically.
• flex-direction: Determines the direction of the main axis.
• flex-wrap: Allows items to wrap onto multiple lines.

Grid

• display: grid;: Turns an element into a grid container.
• grid-template-columns: Defines column sizes.
• grid-template-rows: Defines row sizes.
• grid-gap: Sets gaps between grid items.

Text

• text-align: Aligns the text inside an element.
• text-decoration: Adds decorations to text, such as underlines.
• text-transform: Changes the capitalization of text.

Column

• column-count: Specifies the number of columns in a multi-column layout.
• break-inside: Prevents page breaks inside an element.

Border

• border-style: Sets the style of the border.
• border-width: Sets the width of the border.
• border-color: Sets the color of the border.

Inline vs Block vs Inline-Block Elements

• display: inline;: Makes an element behave like an inline element.
• display: block;: Makes an element behave like a block-level element.
• display: inline-block;: Combines features of inline and block elements.

Position and Layout

• position: static;: Default positioning method.
• position: relative;: Positions an element relative to its normal position.
• position: fixed;: Positions an element relative to the viewport.
• position: absolute;: Positions an element relative to its nearest positioned ancestor.
• position: sticky;: Positions an element based on the user's scroll position.

Z-Index

• z-index: Specifies the stack order of an element.

Pseudo Classes Like Hover, Focus, Valid

• :hover: Styles an element when the mouse hovers over it.
• :focus: Styles an element when it has focus.
• :valid: Styles an input field with a valid value.

Responsive Design

• media queries: Apply styles based on device characteristics, such as screen width.
• max-width, min-width, max-height, min-height: Control the maximum and minimum dimensions of an element.