Summary of Main CSS Commands

CSS (Cascading Style Sheets) is used to style and layout web pages. Below is a summary of the most commonly used CSS properties and rules.

• color - Sets the text color. Example: `color: red;`
• font-size - Sets the size of the font. Example: `font-size: 16px;`
• font-family - Specifies the font. Example: `font-family: Arial, sans-serif;`
• font-style - Sets font style (e.g., `normal`, `italic`). Example: `font-style: italic;`
• font-weight - Defines the font thickness. Example: `font-weight: bold;`
• text-align - Aligns text horizontally. Example: `text-align: center;`
• line-height - Sets the height between lines of text. Example: `line-height: 1.5;`
• text-decoration - Adds decoration to text (e.g., `underline`, `line-through`). Example: `text-decoration: underline;`

• width - Sets the width of an element. Example: `width: 100px;`
• height - Sets the height of an element. Example: `height: 50px;`
• margin - Creates space around an element. Example: `margin: 20px;`
• padding - Creates space inside an element’s border. Example: `padding: 15px;`
• border - Sets the border of an element. Example: `border: 1px solid black;`
• border-radius - Rounds the corners of an element. Example: `border-radius: 10px;`

• background-color - Sets the background color. Example: `background-color: #f0f0f0;`
• background-image - Sets a background image. Example: `background-image: url('image.jpg');`
• background-size - Specifies the size of the background image. Example: `background-size: cover;`
• background-position - Specifies the position of the background image. Example: `background-position: center;`
• background-repeat - Specifies whether the background image should repeat. Example: `background-repeat: no-repeat;`

• display - Defines the display type of an element. Example: `display: block;` or `display: flex;`
• flex - A shorthand for flex-grow, flex-shrink, and flex-basis. Example: `flex: 1;`
• align-items - Aligns items along the cross-axis (for flexbox). Example: `align-items: center;`
• justify-content - Aligns items along the main axis (for flexbox). Example: `justify-content: space-between;`
• position - Specifies the positioning type (e.g., `static`, `absolute`, `relative`, `fixed`). Example: `position: absolute;`
• top, right, bottom, left - Specifies the position of an element relative to its parent. Example: `top: 10px;`

• transition - Specifies how changes to properties are animated. Example: `transition: all 0.3s ease-in-out;`
• transform - Applies transformations like rotation, scaling, or translation. Example: `transform: rotate(45deg);`
• opacity - Sets the transparency level. Example: `opacity: 0.5;`
• box-shadow - Adds a shadow to an element. Example: `box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);`
• filter - Applies visual effects (e.g., bl