====== 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.

===== Text and Font Styling =====
  * **[[css:properties:color|color]]** - Sets the text color. Example: `color: red;`
  * **[[css:properties:font-size|font-size]]** - Sets the size of the font. Example: `font-size: 16px;`
  * **[[css:properties:font-family|font-family]]** - Specifies the font. Example: `font-family: Arial, sans-serif;`
  * **[[css:properties:font-style|font-style]]** - Sets font style (e.g., `normal`, `italic`). Example: `font-style: italic;`
  * **[[css:properties:font-weight|font-weight]]** - Defines the font thickness. Example: `font-weight: bold;`
  * **[[css:properties:text-align|text-align]]** - Aligns text horizontally. Example: `text-align: center;`
  * **[[css:properties:line-height|line-height]]** - Sets the height between lines of text. Example: `line-height: 1.5;`
  * **[[css:properties:text-decoration|text-decoration]]** - Adds decoration to text (e.g., `underline`, `line-through`). Example: `text-decoration: underline;`

===== Box Model =====
  * **[[css:properties:width|width]]** - Sets the width of an element. Example: `width: 100px;`
  * **[[css:properties:height|height]]** - Sets the height of an element. Example: `height: 50px;`
  * **[[css:properties:margin|margin]]** - Creates space around an element. Example: `margin: 20px;`
  * **[[css:properties:padding|padding]]** - Creates space inside an element’s border. Example: `padding: 15px;`
  * **[[css:properties:border|border]]** - Sets the border of an element. Example: `border: 1px solid black;`
  * **[[css:properties:border-radius|border-radius]]** - Rounds the corners of an element. Example: `border-radius: 10px;`

===== Background Styling =====
  * **[[css:properties:background-color|background-color]]** - Sets the background color. Example: `background-color: #f0f0f0;`
  * **[[css:properties:background-image|background-image]]** - Sets a background image. Example: `background-image: url('image.jpg');`
  * **[[css:properties:background-size|background-size]]** - Specifies the size of the background image. Example: `background-size: cover;`
  * **[[css:properties:background-position|background-position]]** - Specifies the position of the background image. Example: `background-position: center;`
  * **[[css:properties:background-repeat|background-repeat]]** - Specifies whether the background image should repeat. Example: `background-repeat: no-repeat;`

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

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