Complete CSS Notes
Master Cascading Style Sheets with Comprehensive Notes, Clean CSS Syntax & Live Rendered Outputs for Every Property.
1. CSS Selectors & Syntax
A CSS rule consists of a Selector and a Declaration Block.
The selector targets the HTML element you want to design, while each declaration contains a CSS property name and its value separated by a colon.
This paragraph is styled using an element & class selector.
2. CSS Color & Background
The color property sets foreground text color, while background-color defines the background fill color of any element.
Colors can be set with color names, Hex codes (#dc2626), or RGB/RGBA functions.
3. CSS Font Properties
font-size controls text size, font-family specifies the font face, and font-weight adjusts thickness (e.g., bold, 600, normal).
Bold, Italic 22px Segoe UI Font Example
4. Text Alignment, Decoration & Transform
text-align aligns text horizontally (center, left, right).
text-decoration adds lines like underlines, and text-transform changes capitalization (uppercase, lowercase, capitalize).
Centered Underlined Uppercase Heading
5. Letter Spacing, Word Spacing & Line Height
letter-spacing adjusts character spacing, word-spacing controls spaces between words, and line-height sets vertical line height for comfortable reading.
CSS provides fine-grained control over letter spacing, word separation, and comfortable line heights for clean typography.
6. CSS Border & Border Radius
border defines the stroke width, style (solid, dashed, dotted), and color around an element.
border-radius softens box sharp corners into rounded edges.
7. Width & Height Dimensions
width and height explicitly set the dimensional bounds of elements using units like px, %, vw, or vh.
8. Margin & Padding
Margin creates space outside the border, pushing nearby elements away.
Padding creates breathing room inside the border around the content.
9. The CSS Box Model
Every element is rendered as a box composed of four concentric layers:
1. Content: Text and media inside the element.
2. Padding: Transparent space around content.
3. Border: Outline enclosing the padding.
4. Margin: Transparent space separating the box from neighbors.
10. CSS Display & Visibility
display: block begins on a new line and takes full width.
display: inline-block flows inline while retaining custom width and height.
display: none removes an element from the flow entirely, whereas visibility: hidden hides it while reserving its layout space.
11. CSS Opacity & Overflow
opacity sets transparency from 0.0 (transparent) to 1.0 (solid).
overflow: auto or scroll adds scrollbars when content exceeds container boundaries.
12. CSS Lists & Table Styling
list-style-type: square; changes list bullet markers.
border-collapse: collapse; combines table borders into a single clean border grid.
| Subject | Score |
|---|---|
| Computer Science | 100 |
13. Links & Pseudo Classes / Elements
:hover applies styles when a user points their mouse cursor over an element.
::first-letter styles the first character of a block of text specifically.
14. CSS Positioning & Z-Index
position: relative anchors child elements positioned with position: absolute.
z-index controls the layering order of overlapping elements (higher numbers appear in front).
15. CSS Float & Clear
float: left pushes an element to the left side and allows following text to wrap neatly around it.
16. CSS Flexbox (1D Layout System)
Flexbox simplifies distributing space and aligning items horizontally and vertically along a single direction (row or column).
17. Flex Direction & Column Layout
flex-direction: column; stacks flex children vertically while maintaining alignment control.
18. CSS Grid (2D Layout System)
CSS Grid handles both columns and rows simultaneously, allowing complex two-dimensional structured web layouts.
19. Linear & Radial Gradients
linear-gradient blends colors along a directional angle.
radial-gradient radiates color transitions outward from a central circular or elliptical point.
20. Box Shadow & Text Shadow
box-shadow adds elevation depth behind containers.
text-shadow renders subtle shadows underneath typography.
21. CSS 2D Transforms
The transform property rotates, scales, moves (translate), and skews elements without disrupting surrounding document layout.
22. CSS Transitions
CSS Transitions allow smooth property animations over time instead of abrupt jumps when hovering or changing states.
23. Keyframe Animations
@keyframes creates complex multi-step animated sequences. The animation shorthand defines name, duration, and iteration count.
24. CSS Custom Properties (Variables)
Variables store reusable values declared with double dashes (--primary-color) and accessed with var(--primary-color).
25. CSS calc() Function
calc() enables mathematical computations directly in CSS properties, blending relative and absolute units freely.
26. CSS Media Queries (Responsive Design)
Media queries apply conditional styles depending on viewport width, adapting layouts across mobile phones, tablets, and desktop displays.
27. CSS Cursor Styles
The cursor property defines what mouse pointer icon is displayed when hovering over an element (pointer, grab, not-allowed).
28. CSS Object-Fit & Image Filters
object-fit: cover scales an image to fill its parent without stretching distortion.
filter applies effects like grayscale(), blur(), and brightness().
29. CSS Clip-Path (Geometric Masking)
clip-path cuts an element into custom geometric forms such as circles, polygons, or stars.
30. CSS Glassmorphism Effect
Glassmorphism produces a translucent frosted glass aesthetic by combining semi-transparent background alpha values with backdrop-filter: blur().
31. Modern Card UI Component
Combining padding, subtle border-radius, elevation box shadows, and hover transitions produces modern interactive card components.
Interactive Card
Hover over this card to observe elevation and lifting motion.
32. Modern Button Design
Clean button designs utilize custom padding, active transitions, rounded borders, and cursor styling for superior user experience.
33. Responsive Navigation Bar
Navigation bars leverage Flexbox with space-between to position branding and navigation links cleanly along opposite ends.
34. Responsive Auto-Fit Grid
The auto-fit with minmax() technique generates responsive grid columns that adapt without requiring manual media query breakpoints.
35. CSS Summary & Key Takeaways
Syntax Formula: selector { property: value; }
Box Model Order: Content $\rightarrow$ Padding $\rightarrow$ Border $\rightarrow$ Margin
Layout Selection: Use Flexbox for 1D rows/columns and CSS Grid for 2D matrix layouts.
Responsive Principle: Always use * { box-sizing: border-box; } and media queries for mobile-friendly designs.
Congratulations! 🚀
You have mastered CSS styling fundamentals, Flexbox & Grid systems, animations, variables, and responsive layout designs.
Keep building creative web pages and practicing CSS regularly! 🎨💻
No comments:
Post a Comment