Basic Selectors Element Selector: Targets elements by tag name. `p { color: blue; }` Class Selector: Targets elements with a specific class. ` .highlight { background-color: yellow; }` ID Selector: Targets an element with a specific ID (unique). ` #main-title { font-size: 36px; }` Universal Selector: Applies to all elements. ` * { margin: 0; padding: 0; }` Attribute Selector: Targets elements with specific attributes or attribute values. `[type="text"] { border: 1px solid black; }`
Combinators Descendant Combinator (Space): Selects elements that are descendants of another element. ` div p { color: red; }` Child Combinator ( ): Selects direct children of an element. ` ul li { font-weight: bold; }` Adjacent Sibling Combinator (+): Selects the element immediately following another element. ` h1 + p { margin-top: 20px; }` General Sibling Combinator (~): Selects all siblings that follow another element. ` h2 ~ p { font-style: italic; }`
Box Model Margin: The space outside the border. ``` margin: 10px; margin-top: 20px; margin-left: 30px; margin-right: 40px; margin-bottom: 50px; ``` Padding: The space inside the border. ``` padding: 10px; padding-top: 20px; padding-left: 30px; padding-right: 40px; padding-bottom: 50px; ``` Border: The line around an element. ``` border: 1px solid black; border-width: 2px; border-style: dashed; border-color: red; ``` Width/Height: Sets the width and height of an element. ``` width: 300px; height: 200px; ```
Typography Font Family: Specifies the font family for text. `font-family: Arial, sans-serif;` Font Size: Sets the size of the font. `font-size: 16px;` Font Weight: Controls the boldness of the font. ` font-weight: bold;` Text Align: Aligns text within an element. ` text-align: center;`
Background Background Color: Sets the background color of an element. `background-color: #f0f0f0;` Background Image: Sets a background image for an element. `background-image: url('image.jpg');` Background Repeat: Controls how the background image is repeated. `background-repeat: no-repeat;` Background Position: Positions the background image within an element. ` background-position: center;`
Display Display Block: Makes an element take up the full width available and start on a new line. ` display: block;` Display Inline: Allows elements to sit next to each other horizontally. ` display: inline;` Display Inline-Block: Combines both inline and block properties. ` display: inline-block;` Display Flex: Creates a flex container for child elements. `display: flex;` Display Grid: Creates a grid container for child elements. ` display: grid;`
Positioning Position Static: Default value. Elements are positioned according to the normal flow of the document. ` position: static;` Position Relative: Moves an element relative to its normal position. ``` position: relative; top: 20px; left: 30px; ``` Position Absolute: Positions an element relative to the nearest positioned ancestor (not static). ``` position: absolute; top: 50px; right: 100px; ```
Position Fixed: Keeps an element in a fixed position even when scrolling. ``` position: fixed; bottom: 20px; left: 30px; ```
Flexbox Flex Direction: Defines the direction of the main axis (row or column). ``` flex-direction: row; /* Default */ flex-direction: column; ``` Justify Content: Aligns items along the main axis. ``` justify-content: flex-start; /* Default */ justify-content: center; justify-content: flex-end; justify-content: space-between; justify-content: space-around; ``` Align Items: Aligns items along the cross axis. ``` align-items: stretch; /* Default */ align-items: flex-start; align-items: center; align-items: flex-end; ```
Grid Grid Template Columns: Defines the number and size of columns in a grid container. ` grid-template-columns: repeat(3, 1fr);` Grid Template Rows: Defines the number and size of rows in a grid container. ` grid-template-rows: auto;` Justify Items: Aligns items along the row axis within their grid area. ``` justify-items: start; /* Default */ justify-items: center; justify-items: end; justify-items: stretch; ``` Align Items: Aligns items along the column axis within their grid area. ``` align-items: start; /* Default */ align-items: center; align-items: end; align-items: stretch; ```
Other Useful Properties Color: Sets the color of text. ` color: #333333;` Opacity: Sets the opacity level of an element. ` opacity: 0.5;` Margin/Padding: Controls the space around or inside an element. ``` margin: 10px; padding: 20px; ``` Box Shadow: Adds a shadow effect to an element. ` box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.5);` Transform: Applies 2D or 3D transformations to an element. ` transform: rotate(90deg);`