CSS Notes
CSS (Cascading Style Sheets):
------------------------------
- Stylesheet language used to control the presentation of HTML elements.
- CSS describes how elements should be rendered on screen or other media.
Basic Syntax:
1. Selectors: Target HTML elements to apply styles.
- Element selector: p { ... }
- Class selector: .classname { ... }
- ID selector: #idname { ... }
2. Properties: Define how the elements are styled.
- Color: color, background-color.
- Font: font-size, font-family, font-weight.
- Box model: width, height, padding, margin, border.
- Positioning: position (static, relative, absolute, fixed), top, left, right, bottom.
- Display: block, inline, inline-block, none.
- Flexbox/Grid: display: flex, grid for advanced layouts.
3. Specificity and Inheritance:
- More specific selectors override less specific ones (ID > class > element).
- Styles cascade, meaning the last defined rule in the stylesheet applies.
4. Pseudo-classes & Pseudo-elements:
- Pseudo-class: a:hover, :focus, :nth-child(n).
- Pseudo-element: ::before, ::after.
5. Responsive Design:
- Media queries: @media screen and (max-width: 768px) { ... }
- Flexbox/Grid layout: Adapt layouts based on screen size.
6. Box Model:
- Content -> Padding -> Border -> Margin (controls the layout and spacing).
7. CSS Units:
- Absolute units: px, pt.
- Relative units: em, rem, vw, vh, %, etc.
CSS Frameworks:
- Bootstrap, Tailwind, Bulma are popular frameworks to speed up development.
