Css Module 61

  Module 61 : master CSS from scratch. 

1. Introduction to CSS

Theory:

What is CSS?

CSS vs HTML

Inline, Internal, and External CSS

CSS syntax: selector { property: value; }

Practice:

Create a basic HTML page and apply all three types of CSS.

Example: Change background color using inline, internal, and external CSS.

Exercise:

html

 code

<!-- Inline --> <p style="color: red;">This is red text using inline CSS</p> <!-- Internal --> <style> .internal-style { color: blue; } </style> <p class="internal-style">This is blue text using internal CSS</p> <!-- External --> <link rel="stylesheet" href="styles.css"> <p class="external-style">This is styled via external CSS</p>

2. CSS Selectors and Combinators

Theory:

Basic selectors: element, class, id

Advanced selectors: attribute, pseudo-classes (:hover, :nth-child), pseudo-elements (::before, ::after)

Combinators: descendant, child (>), adjacent sibling (+), general sibling (~)

Practice:

Style menu lists, input fields, and hover effects.

Exercise:

css

code

input:focus { border-color: green; } ul > li:hover { background-color: #f0f0f0; }

3. CSS Properties: Colors, Units, and Typography

Theory:

Color formats: hex, rgb, rgba, hsl

Units: px, em, rem, %, vh, vw

Fonts, weights, spacing, line-height

Practice:

Style a paragraph with custom fonts and responsive sizes.

Exercise:

css

 code

body { font-family: 'Arial', sans-serif; font-size: 1rem; color: #333; } h1 { font-size: 2.5em; color: hsl(200, 80%, 50%); }

4. The Box Model

Theory:

content → padding → border → margin

width and height behaviors

box-sizing: border-box

Practice:

Create a card component and apply spacing.

Exercise:

css

code

.card { width: 300px; padding: 20px; margin: 15px; border: 1px solid #ddd; box-sizing: border-box; }

5. Positioning and Display

Theory:

Display: block, inline, inline-block, none

Position: static, relative, absolute, fixed, sticky

z-index and stacking contexts

Practice:

Make sticky headers or modals with position: fixed

Exercise:

css

 code

.header { position: sticky; top: 0; background-color: white; z-index: 10; }

6. Flexbox Layout

Theory:

display: flex, main axis, cross axis

Justify and align items

Flex-grow, flex-shrink, flex-basis

Practice:

Build a navbar and a three-column layout.

Exercise:

css

code

.container { display: flex; justify-content: space-between; align-items: center; } .item { flex: 1; }

7. CSS Grid Layout

Theory:

display: grid, grid-template-rows/columns

Grid areas, grid-gap, repeat()

Practice:

Build a photo gallery with CSS Grid

Exercise:

css

 code

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

8. Responsive Design

Theory:

Media queries

Mobile-first vs Desktop-first

Viewport meta tag

Practice:

Build a responsive layout that changes from flex to grid at 768px

Exercise:

css

 code

@media (max-width: 768px) { .container { flex-direction: column; } }

9. Pseudo-Classes & Pseudo-Elements

Theory:

:hover, :active, :checked, :nth-child

::before, ::after, content generation

Practice:

Create tooltips or decorate headings

Exercise:

css

 code

.button::before { content: "→ "; }

10. Transitions and Animations

Theory:

transition: property duration timing-function

@keyframes, animation-name, animation-duration

Practice:

Animate a button hover and a loading spinner

Exercise:

css

 code

.button { transition: background-color 0.3s ease-in; } .button:hover { background-color: teal; } @keyframes spin { to { transform: rotate(360deg); } } .loader { animation: spin 2s linear infinite; }

11. Variables and Custom Properties

Theory:

--variable-name, var()

Theming, inheritance, and reusability

Practice:

Create a light/dark theme toggle

Exercise:

css

 code

:root { --main-color: #3498db; } .button { background-color: var(--main-color); }

12. CSS Best Practices & Debugging

Topics:

Naming conventions (BEM)

Specificity and the cascade

DevTools for debugging

Performance tips

Practice:

Refactor spaghetti CSS to a BEM-structured version

13. Capstone Project

Build a responsive portfolio or blog layout

Must include Flexbox, Grid, media queries, transitions, and custom properties

Deliverables:

HTML + CSS source code

Screenshot or deployment

Tips

Use live coding with CodePen or VSCode + Live Server

Include before/after comparisons for styling

Assign mini projects after each major topic

Provide downloadable  sheets

Evaluation

Quizzes: Selector types, box model, layout logic

Practical Tests: Style a wireframe mockup using CSS

Final Project: A multi-page responsive site using all concepts learned