■ CSS (Cascading Style Sheets) – Detailed Notes
1. Introduction to CSS
- CSS = Cascading Style Sheets.
- Used to style HTML documents (colors, fonts, layout).
- HTML handles structure, CSS handles design.
2. Features of CSS
- Separates content & style.
- Reusability – one stylesheet for multiple pages.
- Consistency across pages.
- Faster loading, cross-platform compatibility.
3. Types of CSS
- Inline CSS – inside style attribute in HTML.
- Internal CSS – inside <style> tag in <head>.
- External CSS – written in a .css file and linked.
4. CSS Syntax
- selector { property: value; }
- Selector → HTML element, Property → style type, Value → assigned style.
5. CSS Selectors
- Element Selector: p, h1.
- Class Selector: .classname.
- ID Selector: #idname.
- Universal Selector: * { }.
- Group Selector: h1, h2, p { }.
- Descendant Selector: div p { }.
6. CSS Colors
- Named colors (red, blue).
- Hex codes (#FF0000).
- RGB (rgb(255,0,0)).
- RGBA (rgba(255,0,0,0.5)).
7. CSS Fonts & Text
- font-family: Arial; font-size: 16px; font-weight: bold.
- color: blue; text-align: center; text-decoration: underline.
8. CSS Box Model
- Every element has: Content → Padding → Border → Margin.
- Example: div { margin:10px; padding:20px; border:2px solid black; }
9. CSS Layouts
- Display: block, inline, inline-block, none.
- Position: static, relative, absolute, fixed, sticky.
- Flexbox: flexible alignment.
- Grid: advanced 2D layout.
- Float: move element left/right.
10. CSS Backgrounds
- background-color, background-image, background-repeat, background-position, background-size.
11. CSS Borders & Shadows
- border: 2px solid red; border-radius: 10px;
- box-shadow: 5px 5px 10px gray;
12. CSS Transitions & Animations
- Transitions → smooth property changes.
- Animations → keyframes for effects.
13. CSS Advantages
- Easy styling, saves time, consistency, responsive designs.
14. CSS Disadvantages
- Browser compatibility issues.
- Complex in large projects.
- Requires practice for layouts.
