Welcome to CSS Mastery Hub! 🚀 Comprehensive interactive demos for CSS properties, selectors, layouts, and mini projects. Hands-on learning for all levels.
- 50+ Property Demos (Core + Backgrounds, Fonts, Transforms...)
- 17 Mini Projects (Hotel, Netflix, Profiles, Resumes...)
- Layouts: Flexbox, Grid, Position, Float
- Assets: 13 Images | Fully Responsive | Zero Setup
- Interactive hands-on demos
- Self-contained HTML/CSS files
- Organized by CSS topics
💡 Pro Tip: Use Ctrl+F to search this README for any property/project!
| Category | Key Links |
|---|---|
| 🧱 Core Properties | Box Model | Display | Margin/Padding |
| 🎨 Visual Effects | Box Shadow | Text Shadow | Transforms |
| 📐 Layouts | Flexbox | Grid | Position |
| 🎭 Selectors | Class/ID | Pseudo |
| 🔤 Typography | Fonts | Text Properties |
| 🌈 Backgrounds | Gradients | BG Properties |
| 🎯 Mini Projects | Hotel | Netflix | All |
Root Level Files (Core Properties Demos) 🧱
| File | Description |
|---|---|
| animation_property.html | Demonstrates CSS @keyframes and animation properties with moving elements. |
| border_property.html | Explores border styles, width, color for elements. |
| border_radius.html | Shows rounded corners using border-radius. |
| Box_model.html | Complete box model explanation: content, padding, border, margin. |
| Box_shadow.html | CSS box-shadow for drop shadows, glows, 3D effects. |
| [CSS contents](CSS contents) | Overview of CSS linking methods (inline, internal, external). |
| CSS_layout_Flexbox.html | Flexbox layout tutorial with alignment examples. |
| CSS_layout_grid.html | CSS Grid layout basics and properties. |
| display_property.html | display: block, inline, inline-block, none, flex, grid. |
| Float_property.html | Legacy float for layouts (left/right/clear). |
| grid_item_allignment.html | Grid item alignment (justify-items, align-items). |
| index.html | Main index page, likely project overview/home. |
| inline.html | Inline CSS styling demo (style attribute). |
| internalcss.html | Internal CSS using <style> tags. |
| Letter_spacing.html | letter-spacing for text kerning adjustments. |
| line_height.html | line-height for vertical text rhythm. |
| Margin_property.html | margin shorthand and individual sides. |
| media_property.html | Media queries for responsive design. |
| outline_property.html | outline for focus rings, similar to border. |
| outline_offset.html | outline-offset spacing from element edge. |
| OverFlow_property.html | overflow: hidden, scroll, auto, visible. |
| Padding_property.html | padding inner spacing shorthand/properties. |
| style.css | Shared external stylesheet for multiple pages. |
| text_alignment.html | text-align: left, center, right, justify. |
| Text_decoration.html | text-decoration underline, line-through. |
| Text_indent.html | text-indent for first line indentation. |
| text_shadow.html | text-shadow for glowing/drop shadow text. |
| Text_transform.html | text-transform: uppercase, lowercase, capitalize. |
| textandbox_shadow.html | Combined text and box shadow effects. |
| Transform_property1.html | 2D transforms: rotate, scale, skew, translate. |
| Transform_property2.html | Advanced 3D transforms and perspective. |
| Transition_property.html | Smooth transition on hover/state changes. |
| visibility_property.html | visibility: hidden, visible, collapse. |
| word_spacing.html | word-spacing for tracking between words. |
📂 Box sizing/ (Box Model Variants)
| File | Description |
|---|---|
| border_box.html | box-sizing: border-box – total width includes padding/border. |
| content_box.html | box-sizing: content-box – default, width excludes padding/border. |
📂 css properties/ (Background & Color Demos)
| File | Description |
|---|---|
| bg_attachment.html | background-attachment: scroll, fixed, local. |
| bg_color.html | background-color with colors, rgba, hsla. |
| bg_image.html | background-image using images/gradients. |
| bg_position.html | background-position alignment/control. |
| bg_repeat.html | background-repeat: repeat, no-repeat, space. |
| bg_size.html | background-size: cover, contain, length. |
| color_property.html | Text color properties and named/hex values. |
📂 css selector/ (Selector Types)
| File | Description |
|---|---|
| attribute_selector.html | [attr], [attr=value] attribute selectors. |
| class_selector.html | .class class selectors. |
| Descendant_selector.html | Space-separated descendant selectors. |
| element_selector.html | Tag name selectors (div, p, h1). |
| grouping_selector.html | Comma-separated grouped selectors. |
| ID_selector.html | #id unique ID selectors. |
| Pseudo_class.html | :hover, :active, :nth-child pseudo-classes. |
| universal_selector.html | * universal selector for all elements. |
| rooms.jpg | Sample image used in selector demos. |
📂 CSS_position/ (Position Values)
| File | Description |
|---|---|
| CSS_position_property1.html | position: static (default). |
| CSS_position_property2.html | position: relative with offset. |
| CSS_position_property3.html | position: absolute relative to parent. |
| CSS_position_property4.html | position: fixed viewport-based. |
| CSS_position_property5.html | position: sticky hybrid scroll behavior. |
📂 font property/ (Typography Suite)
| File | Description |
|---|---|
| font_color.html | Font color application. |
| font_family.html | font-family web-safe and custom fonts. |
| font_size.html | font-size px/em/rem/keywords. |
| font_style.html | font-style: italic, oblique, normal. |
| font_variantandweight.html | font-weight (bold), font-variant (small-caps). |
📂 Gradient property/
| File | Description |
|---|---|
| conic_gradient.html | Conic gradients from center point. |
| Linear_gradient.html | Linear gradients with angles/stops. |
| Radial_gradient.html | Radial/elliptical gradients. |
🖼️ images/ (Assets)
Contains 12 images: arrow.jpg, burger.jpg, cs.jpeg.jpeg, dhee.jpg, dining.jpg, heroimg.jpg, menu-bar.jpg, phoenix-logo.png, pool.jpg, rooms.jpg, stage.jpg, street.jpg, table.jpg. Used in demos/projects for backgrounds/heroes.
🎯 mini projects/ (Practical Examples)
| File | Description |
|---|---|
| grid_project1.html | Simple CSS Grid layout project. |
| grid_project2.html | Advanced Grid showcase. |
| hotel_project.html | Full hotel landing page with images/sections. |
| loginpage.html | Responsive login form. |
| miniproject1.html - miniproject6.html | Series of small CSS practice projects (cards, buttons, etc.). |
| netflix.html | Netflix-style landing with grid/carousel. |
| Product_landing.html | Product page with hero, features. |
| Profile_card.html | Hoverable profile card demo. |
| profile.html | User profile page layout. |
| resumemaking.html | Resume/CV template with sections. |
| tables.html | Styled data tables. |
| visiting_card.html | Visiting/business card design. 🎴 |
- Clone/Download this repo
- Double-click any
.htmlfile to open in browser 🎉 - No setup needed – all files are self-contained!
Commands (Windows):
# Open main index
start index.html
# List all demos
dir *.html
# Open folder in Explorer
explorer .
# Open all mini projects folder
start "Mini Projects" "mini projects"- Fork the repo
- Add new CSS demos/projects in relevant folders
- Update README tables with your additions
- Submit PR with description of changes 🎉
License: MIT License – Free to use/modify/share!
⭐ Star if helpful! Found a bug? Open an issue!
Created by CHALUVA RAJ N