CSS stands for Cascading Style Sheets. It is a language used to describe the style of an HTML document. CSS controls how HTML elements appear on screen, including layout, colors, fonts, spacing, and responsiveness. It separates content from design, making websites easier to maintain and customize. CSS can be written inline (within HTML tags), internally (in a <style> block), or externally (via a . css file).
🔷 1. CSS Selectors
| Selector | Description |
|---|---|
| * | Universal selector (selects all elements) |
| element | Type selector (e.g., div, p) |
| .class | Class selector |
| #id | ID selector |
| element, element | Group selector |
| element element | Descendant selector |
| element > element | Child selector |
| element + element | Adjacent sibling selector |
| element ~ element | General sibling selector |
| [attribute] | Attribute selector |
| :hover | Pseudo-class for hover |
| :nth-child(n) | Selects the nth child |
| ::before / ::after | Pseudo-elements for adding content |
🔷 2. CSS Keywords
| Keyword | Use |
|---|---|
| inherit | Inherit value from parent element |
| initial | Default value as defined by the browser |
| unset | Resets property to inherited or default |
| auto | Let the browser calculate the value |
| none | Often used to disable a property (e.g., display, border) |
| block | Display type |
| inline | Display type |
| flex | Display type |
| grid | Display type |
| relative | Position type |
| absolute | Position type |
| fixed | Position type |
| sticky | Position type |
| transparent | Color keyword |
🔷 3. Common CSS Properties
| Property | Description |
|---|---|
| color | Text color |
| background-color | Element background color |
| background-image | Sets an image as background |
| width / height | Size of element |
| padding | Space inside element border |
| margin | Space outside element border |
| border | Border of the element |
| font-size | Size of text |
| font-family | Font type |
| font-weight | Boldness of text |
| text-align | Horizontal alignment of text |
| vertical-align | Vertical alignment |
| line-height | Line spacing |
| display | Display behavior (block, inline, flex, etc.) |
| position | Positioning method |
| top, right, bottom, left | Position offsets |
| z-index | Stack order of elements |
| overflow | Controls content overflow (hidden, scroll) |
| visibility | Visibility of element (visible, hidden) |
| opacity | Transparency (0 to 1) |
| box-shadow | Adds shadow to element |
| text-shadow | Adds shadow to text |
| transition | Adds animation between property changes |
| transform | Rotate, scale, skew, move |
| animation | Defines keyframe animation |
🔷 4. CSS Value Units
| Unit | Description |
|---|---|
| px | Pixels (absolute unit) |
| % | Percentage (relative unit) |
| em | Relative to parent font size |
| rem | Relative to root font size |
| vh / vw | Viewport height/width |
| fr | Fractional unit (used in grid) |
🔷 5. Media Queries (Responsive CSS)
| Syntax | Description |
|---|---|
| @media screen and (max-width: 600px) | Applies CSS on small screens |
| @media print | Applies when printing |
| @media only screen and (min-width: 768px) | Tablet or desktop view |
Click to go back on notes page.