BRAINBIT INFOTECH · RANCHI

COMPLETE HTML + CSS COURSE · PART 2 OF 4

CSS Foundations

Make pages beautiful: selectors, colours, fonts, the box model, backgrounds, effects and positioning.

6 modules~17 hours30 practice examplesNeeds Part 1

By the end of this part you can build

Styled notices, badges and price cards
Bilingual (Hindi + English) typography
Hero banners with gradients and shadows
Sticky headers, badges and floating WhatsApp buttons

Every example opens in a live browser preview. Click ✎ Edit on any preview, or press L, to open the Code Lab.

ROADMAP FOR THIS PART

Module 7Introduction to CSS & Selectors2.5 h

Module 8Colours, Units & Typography3 h

Module 9The Box Model3 h

Module 10Backgrounds, Gradients & Effects2.5 h

Module 11Advanced Selectors & the Cascade3 h

Module 12Display, Position & Z-index3 h

HTML + CSSBefore we begin

How to Use This Part

Every module has

1
A "Where is it used?" diagram of a real web page
2
Concept slides with code + live browser preview
3
Animations and playgrounds: click, drag and watch
4
A Live Lab: edit code, see the result instantly
5
5 practice examples with solutions
6
An animated recap + quiz

Controls→ next, ← back, M menu, L Code Lab, F fullscreen. Click ✎ Edit on any preview to change its code.

MODULE 7

Introduction to CSS & Selectors

⏱ 2.5 hours5 practice examplesLive code lab

You will learn

What CSS is and why "Cascading"
Anatomy of a CSS rule
Inline, internal and external CSS
Basic selectors: element, class, id, group, descendant
Colour, background and text basics; DevTools Styles panel

You will build

A styled school notice
One stylesheet for two pages
Status badges with classes

Module 7Real-world use

Where Is This Used on a Web Page?

You will find it here

Every visual detail of a website is CSS: colours, fonts, spacing, layout
One style.css file usually styles the whole website
Changing one line can restyle 100 pages at once
Themes (WordPress, Shopify) are mostly CSS files

Your Part 1 filesOpen the school homepage you built in Module 6. In this part you will make it look professional.

Module 7What is CSS?

CSS = Cascading Style Sheets

↓

Cascading

Rules flow down like a waterfall (think Hundru Falls!): many rules can apply to one element, and CSS decides which one wins.

Style

How things look: colour, size, font, spacing, position, animation.

📄

Sheets

Rules are usually kept in a separate file, a "sheet": style.css.

Switch it offClick CSS ON in the preview to remove all CSS. Same HTML, totally different look.

file:///D:/my-website/school.html

This is the same kind of HTML you wrote in Part 1, plus about 10 lines of CSS.

Module 7CSS syntax

Anatomy of a CSS Rule

h1Selector: WHICH elements

{Start of block

colorProperty: WHAT to change

navyValue: HOW

;Semicolon ends a declaration

font-size: 32px;Another declaration

}End of block

Declaration

property: value; is one instruction. A rule can have many.

Read it aloud

"Select all h1 elements. Make the colour navy and the font size 32 pixels."

Mistakes to avoid

Missing ; or }, using = instead of :, spaces in values like 32 px.

Comments in CSS/* This is a CSS comment */ – different from HTML comments.

Module 7Adding CSS

Three Ways to Add CSS

index.htmlHTML

style.cssCSS

file:///D:/my-website/index.html

Method	Good for	Rating
Inline	Quick test, emails	★
Internal	A single page, demos	★★
External	Real websites (many pages)	★★★

Module 7Adding CSS

Why External CSS Wins: One File Styles Every Page

in the head of EVERY pageHTML

Change the colour once in style.css → all pages update
Browser downloads style.css once and caches it → faster site
HTML stays clean: structure in .html, style in .css
Teams can work on HTML and CSS separately

Not working?Check the file name and path in href, that the file ends in .css (not .css.txt), and press Ctrl+F5 to refresh.

Module 7Selectors

Basic Selectors: Pick Your Elements

Click a selector

Type your own selector

Click a selector to see which elements it matches (yellow).

file:///D:/my-website/selectors.html

Selector	Syntax	Example
Element	`p`	All paragraphs
Class	`.name`	class="name"
ID	`#name`	id="name"
Group	`h1, h2`	comma = "and also"
Descendant	`nav a`	space = "inside"

Module 7First properties

Playground: Colour, Background and Text

Text colour (.title)

Background (.box)

Paragraph colour (.text)

Alignment (.box)

Font size (.title): 24px

Try a bad combinationChoose background #0b1f3a with black text: unreadable! Good contrast matters (Module 8).

file:///D:/my-website/playground.html

.title { color: black; }

.box { background-color: white; }

.text { color: black; }

.box { text-align: left; }

.title { font-size: 24px; }

Module 7Tools

DevTools Styles Panel: Edit CSS Live

1
Right-click any element > Inspect
2
The Styles panel shows every CSS rule that applies
3
Click a value (like a colour) to change it live
4
Untick a checkbox to switch a declaration off
5
Crossed-out lines = rules that lost to a stronger rule
6
Copy your final CSS back into style.css (DevTools changes are not saved!)

Module 7Live Lab

Live Lab: Your First Stylesheet

cafe.html – edit me!

Live preview

TryGive the last paragraph class="offer". Make all p text size 18px. Use a group selector h1, #special to make both italic with font-style: italic;.

Module 7Practice Example 1 of 5

Style the School Notice

BeginnerTake the PTM notice from Module 2 and style it like a printed notice board.

Your tasks

body: light yellow background, Arial font
h1: centred, red colour
h2: navy colour
.important class: dark red text, yellow background
footer text grey and small

Where this is used: Any page with announcements or alerts.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/notice.html

notice.htmlHTML

Module 7Practice Example 2 of 5

One Stylesheet for Two Pages

BeginnerSunrise Coaching has index.html and courses.html. Both must use the same colours from ONE external file.

Your tasks

Create style.css in the same folder
Link it in the head of both pages
Style body, h1, nav a and .note in the CSS file
Check that both pages look the same
Change one colour in style.css and see both pages change

Where this is used: Every multi-page website.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/index.html

index.htmlHTML

style.cssCSS

Module 7Practice Example 3 of 5

Status Badges with Classes

BeginnerA school result portal shows Pass, Fail and Pending status. Make reusable badge classes.

Your tasks

A base class .badge (padding, white text, rounded)
.pass green, .fail red, .pending orange background
Use two classes together: class="badge pass"
Show a list of 4 students with badges
Use span elements so badges stay inline

HintMultiple classes are separated by spaces. The element gets the styles of all its classes.

Where this is used: Order status (Delivered / Cancelled), tags, labels in apps.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/results.html

results.htmlHTML

Module 7Practice Example 4 of 5

ID vs Class: Highlight the Topper

BeginnerIn the merit list, every student row looks the same, but the topper must stand out.

Your tasks

Class .student for all rows (grey border-left, padding)
Give the first student id="topper"
Style #topper with gold background and bold text
Add a star using the entity ★
Explain in a comment why topper is an id

Where this is used: Highlighting the selected item, the active menu link, the best-selling product.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/merit.html

merit.htmlHTML

Module 7Practice Example 5 of 5

Theme Headings with Group Selectors

IntermediateA tourism page has h1, h2 and h3. They should share one font and colour, but have different sizes. Write less CSS by grouping.

Your tasks

Group h1, h2, h3: Georgia font, colour #0b7285
Then separately set font-size for each
Descendant selector: links inside footer are white
Universal * to remove default margin
Body padding 16px

Where this is used: Every site: consistent headings across the whole website.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/netarhat.html

netarhat.htmlHTML

Module 7Module complete

Recap: What You Completed in Module 7

✓CSS controls how HTML looks; "cascading" rules
✓Rule = selector { property: value; }
✓Inline, internal and external CSS (external is best)
✓One style.css for every page via <link>
✓Selectors: element, .class, #id, group, *, descendant
✓color, background-color, text-align, font-size
✓Editing styles live in DevTools

Coming next

Module 8: Colours, Units & Typography – choose beautiful colours and fonts.

Quick quiz – click an answer

Q1. Which selector targets class="price"?

A dot means class.

Q2. Best way to style a 20-page website?

One file, linked from every page.

Q3. What does nav a select?

A space means descendant (inside).

MODULE 8

Colours, Units & Typography

⏱ 3 hours5 practice examplesLive code lab

You will learn

Colour names, HEX, RGB, RGBA and HSL
Contrast and choosing a colour palette
Units: px, %, em, rem, vw, vh
Fonts: font stacks and Google Fonts (incl. Hindi)
Text styling: size, weight, line-height, spacing, shadow

You will build

A sweet-shop brand palette
A bilingual Hindi + English heading
A festival greeting card

Module 8Real-world use

Where Is This Used on a Web Page?

You will find it here

Brand colours: header, buttons and links share 2-3 colours
Fonts give a site personality: playful for kids, serious for banks
Readable text: size, line spacing and contrast decide if people stay or leave
Units decide how text and boxes grow on bigger screens

Module 8Colour

Five Ways to Write a Colour

Format	Example	Notes
Name	`tomato`	140+ names; quick but limited
HEX	`#e34c26`	Most common. #RRGGBB in base 16
Short HEX	`#f00`	Same as #ff0000
RGB	`rgb(227, 76, 38)`	Red, Green, Blue: 0-255 each
RGBA	`rgba(0, 0, 0, 0.5)`	a = alpha (transparency) 0 to 1
HSL	`hsl(14, 77%, 52%)`	Hue (0-360 on a wheel), Saturation, Lightness

Get colours easilyVS Code shows a colour picker when you hover a colour. In Chrome DevTools click the small square next to any colour.

Colour mixer – drag the sliders

R227

G76

B38

A100

Screens make every colour by mixing red, green and blue light. 0,0,0 = black; 255,255,255 = white.

Module 8Colour

Pick a Palette and Check Contrast

file:///D:/my-website/palette.html

60-30-10 rule60% a calm main colour (often white/light), 30% a secondary colour, 10% a bright accent for buttons and highlights.

Accessibility ruleNormal text needs a contrast ratio of at least 4.5 : 1. Check with the DevTools colour picker or webaim.org/resources/contrastchecker.

Free palette toolscoolors.co, colorhunt.co and Adobe Color suggest colours that go well together.

Module 8Units

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

Root font size (html): 16px

Parent font size (.parent): 16px

Window width test (body): 600px

Unit	Relative to	Use for
`px`	Fixed screen pixels	Borders, small details
`%`	Parent element	Widths of boxes
`rem`	Root (html) font size	Font sizes, spacing
`em`	Parent font size	Padding inside buttons
`vw / vh`	1% of window width / height	Full-screen sections

file:///D:/my-website/playground.html

html { font-size: 16px; }

.parent { font-size: 16px; }

body { width: 600px; }

Module 8Fonts

Font Families and Google Fonts (Hindi Too!)

fonts.htmlHTML

Font stackfont-family: 'Poppins', Arial, sans-serif; means: use Poppins; if not available use Arial; otherwise any sans-serif font. Always end with a generic family.

file:///D:/my-website/fonts.html

1
Open fonts.google.com, search "Poppins" or "Noto Sans Devanagari"
2
Select the weights you need (400, 700)
3
Copy the <link> into your head
4
Use the font-family name in CSS

SpeedLoad only 2 fonts and 2-3 weights. Every font file makes the page slower on mobile data.

Module 8Typography

Typography Playground: Size, Weight, Spacing

font-weight (h2)

font-style (h2)

font-size (p): 16px

line-height (p): 24px

letter-spacing (h2): 0px

font-family (p)

file:///D:/my-website/playground.html

#h { font-weight: 700; }

#h { font-style: normal; }

#p { font-size: 16px; }

#p { line-height: 24px; }

#h { letter-spacing: 0px; }

#p { font-family: Arial; }

Module 8Typography

Text Effects: Transform, Decoration, Shadow

text-transform

text-decoration

text-shadow

text-align

text-indent: 0px

Shadow syntaxtext-shadow: x y blur colour; – x right, y down, blur softness.

file:///D:/my-website/playground.html

#t { text-transform: none; }

#t { text-decoration: none; }

#t { text-shadow: none; }

#t { text-align: left; }

#t { text-indent: 0px; }

Module 8Typography

Rules for Readable Text

Long lines tire the eyes. Use max-width: 65ch on paragraphs.

Body text at least 16px (1rem)
line-height: 1.5 to 1.7 for paragraphs
Max 2 font families per site
Headings bold, body regular
Left-align long text (justify can leave ugly gaps)
Dark grey (#333) is softer than pure black on white
Do not write long paragraphs in ALL CAPS

Unitless line-heightline-height: 1.6; (no unit) means 1.6 x the font size, and it scales automatically.

Module 8Live Lab

Live Lab: Brand Colours and Fonts

brand.html – edit me!

Live preview

TryChange html { font-size } to 20px – every rem size grows. Make h1 colour hsl(200, 80%, 40%). Add text-shadow to the Hindi heading.

Module 8Practice Example 1 of 5

Brand Palette Card for a Sweet Shop

BeginnerShree Mithai Bhandar wants a "brand sheet" showing their 4 colours in HEX and RGB.

Your tasks

4 colour boxes using classes .c1 to .c4
Use HEX for two colours and rgb() for two
Each box shows its code in white monospace text
One box uses rgba() with 0.6 transparency
Shop name heading in the primary colour

Where this is used: Brand guidelines, design systems, theme settings.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/palette.html

palette.htmlHTML

Module 8Practice Example 2 of 5

Bilingual Heading with Google Fonts

BeginnerA Jharkhand government scheme page needs headings in Hindi and English with matching styles.

Your tasks

Load Poppins and Noto Sans Devanagari from Google Fonts
English heading in Poppins 700
Hindi heading in Noto Sans Devanagari, slightly bigger
Use a fallback stack for both
A coloured underline using border-bottom

HintIf the internet is off, the fallback fonts (Arial, Mangal) are used. The page still works.

Where this is used: Government portals, news sites, local business sites.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/bilingual.html

bilingual.htmlHTML

Module 8Practice Example 3 of 5

Readable Article Typography

IntermediateA long blog post about Sarhul festival is hard to read. Fix the typography.

Your tasks

Body font 18px, line-height 1.7, colour #333
Paragraph max-width 65ch and centred with margin: auto
Headings in a serif font (Georgia)
First paragraph (class lead) bigger and grey
Quote with italic text and left border

Where this is used: Blogs, news articles, documentation, e-books.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/sarhul.html

sarhul.htmlHTML

Module 8Practice Example 4 of 5

Scalable Page with rem

IntermediateAn e-learning site wants a "text size" setting. If all sizes use rem, changing ONE value scales the page.

Your tasks

Set html { font-size: 16px; }
h1 2.5rem, h2 1.75rem, p 1rem, small 0.8rem
Padding and margins in rem too
Change html font-size to 20px and see everything grow
Write the px equivalents in comments

Where this is used: Accessible sites where users can zoom text; design systems.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/rem-page.html

rem-page.htmlHTML

Module 8Practice Example 5 of 5

Festival Greeting Card

IntermediateMake a Chhath Puja greeting card that families can share on WhatsApp as a link.

Your tasks

Card with a warm background (rgb or hsl)
Big heading with a glowing text-shadow
Hindi line using a Devanagari font
Uppercase small "From" line with letter-spacing
Centre everything with text-align

Where this is used: E-greeting cards, event invitations, social media banners.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/greeting.html

greeting.htmlHTML

Module 8Module complete

Recap: What You Completed in Module 8

✓Colour formats: name, HEX, RGB, RGBA, HSL
✓Palettes (60-30-10) and contrast 4.5:1
✓Units: px, %, rem, em, vw, vh
✓Font stacks and Google Fonts incl. Devanagari
✓font-size, weight, style, line-height, letter-spacing
✓text-transform, decoration, shadow, align
✓Readability: 16px+, 1.5-1.7 line-height, 45-75 characters

Coming next

Module 9: The Box Model – padding, borders and margins around every element.

Quick quiz – click an answer

Q1. Which value is 50% transparent black?

The 4th value (alpha) controls transparency.

Q2. html font-size is 16px. What is 2rem?

rem multiplies the root size: 2 x 16 = 32px.

Q3. Why end a font stack with sans-serif?

The browser always has some sans-serif font.

MODULE 9

The Box Model

⏱ 3 hours5 practice examplesLive code lab

You will learn

Every element is a box: content, padding, border, margin
width, height, min/max-width
box-sizing: border-box (the professional default)
Centring with margin: auto; margin collapse
Borders, border-radius, outline and overflow

You will build

A student profile card
A centred page container
A pricing box and equal-size buttons

Module 9Real-world use

Where Is This Used on a Web Page?

You will find it here

Cards: padding inside, border around, margin between them
Buttons: padding decides how big and clickable they are
Form inputs: borders and padding make them look neat
Spacing everywhere: the gap between sections is margin

Module 9The box model

Every Element Is a Box with 4 Layers

Layer	Property	Think of it as
Content	`width`, `height`	The photo in a frame
Padding	`padding`	The white mount around the photo
Border	`border`	The wooden frame
Margin	`margin`	Space between frames on the wall

Padding vs marginPadding is inside the border and shows the background colour. Margin is outside and is always transparent.

See itIn DevTools > Elements > Computed, the box model diagram shows these exact layers for any element.

Module 9The box model

Box Model Playground: Drag the Sliders

padding: 16px

border-width: 4px

margin: 20px

width: 220px

border-style

WatchMargin pushes the two cards apart. Padding pushes the text away from the border.

file:///D:/my-website/playground.html

.card { padding: 16px; }

.card { border-width: 4px; }

.card { margin: 20px; }

.card { width: 220px; }

.card { border-style: solid; }

Module 9Shorthand

Writing margin and padding: 1, 2, 3 or 4 Values

You write	Means	Clockwise
`padding: 10px;`	All four sides 10px	↻ all
`padding: 10px 20px;`	top/bottom 10, left/right 20	vertical \| horizontal
`padding: 5px 10px 15px;`	top 5, left/right 10, bottom 15
`padding: 1px 2px 3px 4px;`	top, right, bottom, left	Clock: 12, 3, 6, 9
`margin-top: 30px;`	Only one side	-top -right -bottom -left

Remember TRouBLeTop Right Bottom Left – the order for 4 values.

Module 9box-sizing

box-sizing: Why 200px Becomes 252px

file:///D:/my-website/box-sizing.html

style.cssCSS

Professional defaultWith border-box, the width you write is the width you get. Almost every modern website and framework (Bootstrap, Tailwind) uses it.

Module 9Centring

Centring a Box: max-width + margin: auto

Drag the yellow slider to change the window width.

container.cssCSS

margin: 0 auto = top/bottom 0, left/right shared equally
Works only on block elements that have a width or max-width
max-width instead of width lets the box shrink on phones
text-align: center centres the text inside; margin auto centres the box

Real sitesAlmost every website wraps its content in a .container like this, usually 1100-1200px wide.

Module 9Margins

Margin Collapse: 30 + 20 = 30?!

file:///D:/my-website/collapse.html

The ruleWhen two vertical margins touch, they overlap and only the bigger one is used. Horizontal margins never collapse.

Avoid surprisesUse margin in only one direction (e.g. only margin-bottom) for elements that stack. Flexbox and Grid gaps do not collapse.

Module 9Borders

Borders, Rounded Corners and Outline

file:///D:/my-website/borders.html

borders.cssCSS

Property	Example
`border`	`2px solid #ccc`
`border-style`	solid, dashed, dotted, double, none
`border-left`	Only one side
`border-radius`	`10px`, `50%` (circle), `20px 0`
`outline`	Like border but does not change size; used for keyboard focus

AccessibilityNever remove outline on links/buttons without adding another focus style. Keyboard users need to see where they are.

Module 9Overflow

overflow: When Content Is Too Big for the Box

overflow

height: 90px

max-width: 260px

Value	What happens
visible	Spills out (default)
hidden	Cut off
scroll	Always shows scrollbars
auto	Scrollbar only if needed (best)

file:///D:/my-website/playground.html

.msg { overflow: visible; }

.msg { height: 90px; }

.msg { max-width: 260px; }

Module 9Live Lab

Live Lab: Build a Profile Card

profile-card.html – edit me!

Live preview

TryChange padding to 40px. Make the image a rounded square (border-radius: 16px). Add a dashed top border. Remove box-sizing – did the card get wider?

Module 9Practice Example 1 of 5

Student Profile Card

BeginnerThe school app shows each student on a card. Build one card with a round photo.

Your tasks

* { box-sizing: border-box; }
Card: width 240px, padding 20px, white background, 1px grey border, radius 12px
Centre the card with margin: 20px auto
Round photo 80px with a coloured border
Name, class and a small house badge

Where this is used: Team pages, contact cards, social media profiles, ID cards.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/student-card.html

student-card.htmlHTML

Module 9Practice Example 2 of 5

Centred Page Container

BeginnerText on a big monitor stretches too wide. Wrap the page in a centred container.

Your tasks

Body background light grey, margin 0
.container: max-width 600px, margin auto, white background
Padding 24px and border-radius 10px
A header strip that fills the full window width (outside the container)
Check: drag the window narrow in DevTools

Where this is used: Every website layout: Bootstrap .container, blog columns.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/container.html

container.htmlHTML

Module 9Practice Example 3 of 5

Pricing Box

IntermediateBrainBit Infotech shows course fees in three neat boxes.

Your tasks

Three .plan boxes, inline-block, width 180px
Padding 20px, border 2px, radius 12px, margin 8px
The middle plan has class .best: thicker coloured border
Price in big text, features in a list without bullets
Each box has a full-width button

Where this is used: Pricing pages, mobile recharge plans, subscription offers.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/pricing.html

pricing.htmlHTML

Module 9Practice Example 4 of 5

Fix the Overflowing Comment Box

IntermediateLong comments on a news site spill out of their boxes and cover other content. Fix it.

Your tasks

Comment box has fixed height 80px
Add overflow: auto so a scrollbar appears only when needed
Long words/links break with overflow-wrap: anywhere
Use max-width instead of width
Add padding so text does not touch the border

Where this is used: Chat windows, comment sections, notification panels.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/comments.html

comments.htmlHTML

Module 9Practice Example 5 of 5

Equal-Size Buttons with box-sizing

IntermediateA form has an input and a button side by side. With content-box they never line up. Fix them so both are exactly 200px wide and 44px tall.

Your tasks

Both elements: width 200px, height 44px
Different padding and border on each
Use box-sizing: border-box so they match
Use outline on focus for the input
Add a comparison row without border-box to see the difference

HintButtons are border-box by default in many browsers, but inputs are not. That is why they mismatch.

Where this is used: Login forms, search bars, any form row.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/buttons.html

buttons.htmlHTML

Module 9Module complete

Recap: What You Completed in Module 9

✓Content, padding, border, margin
✓Shorthand: 1-4 values, clockwise TRouBLe
✓box-sizing: border-box for predictable sizes
✓max-width + margin: auto to centre
✓Vertical margins collapse (the bigger wins)
✓border, border-radius (50% = circle), outline
✓overflow: visible, hidden, scroll, auto

Coming next

Module 10: Backgrounds, Gradients & Effects – banners, shadows and image filters.

Quick quiz – click an answer

Q1. Which layer shows the element's background colour?

Padding is inside the border and shows the background. Margin is transparent.

Q2. padding: 10px 20px means:

Two values: vertical then horizontal.

Q3. How do you centre a block box with max-width 600px?

Auto left/right margins share the free space.

MODULE 10

Backgrounds, Gradients & Effects

⏱ 2.5 hours5 practice examplesLive code lab

You will learn

background-image, size, position, repeat
Text on images with dark overlays
Linear, radial and conic gradients
box-shadow for depth
opacity, filter (grayscale, blur) and object-fit

You will build

A hero banner with overlay text
Gradient buttons and an offer banner
Round team photos and shadow cards

Module 10Real-world use

Where Is This Used on a Web Page?

You will find it here

Hero banners: a big photo with text on top
Gradient buttons and colourful sections
Card shadows make boxes "float" above the page
Profile photos: round, cropped neatly with object-fit
Hover effects: grayscale to colour, brighten on hover

Module 10Backgrounds

Background Image Playground

background-size

background-position

background-repeat

background-attachment

Most used combobackground-size: cover; background-position: center; fills the box with no gaps and crops the edges.

file:///D:/my-website/playground.html

.hero { background-size: cover; }

.hero { background-position: center; }

.hero { background-repeat: no-repeat; }

.hero { background-attachment: scroll; }

Module 10Backgrounds

Readable Text on Photos: the Dark Overlay Trick

background (.hero)

1
Put a semi-transparent black gradient first (it sits on top)
2
Then the photo, after a comma
3
center / cover = position / size in one line
4
Use alpha 0.4 to 0.6 for good contrast

Click the 2nd optionWithout the overlay, white text on a bright photo is hard to read.

file:///D:/my-website/playground.html

.hero { background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)), url("images/netarhat.jpg") center / cover; }

Module 10Gradients

Gradient Playground: linear, radial, conic

background

Type	Syntax
Linear	`linear-gradient(angle, c1, c2)`
Radial	`radial-gradient(circle, c1, c2)`
Conic	`conic-gradient(c1, c2, ...)`
Hard stops	`red 50%, blue 50%` = sharp line

file:///D:/my-website/playground.html

.g { background: linear-gradient(90deg, #e34c26, #f08c00); }

Module 10Shadows

box-shadow: Make Boxes Float

box-shadow

border-radius: 14px

4pxy

12pxblur

rgba(0,0,0,.15)colour

Subtle winsReal designs use soft, low-opacity shadows. Heavy black shadows look old-fashioned.

file:///D:/my-website/playground.html

.card { box-shadow: none; }

.card { border-radius: 14px; }

Module 10Effects

opacity and filter: Photo Effects in One Line

filter

opacity

Common useLogos of partner companies shown in grayscale(100%), turning colourful on :hover (Module 11).

file:///D:/my-website/playground.html

#pic { filter: none; }

#pic { opacity: 1; }

Module 10Images

object-fit: Fit Any Photo into a Fixed Box

object-fit (all)

object-position

border-radius

Value	Result
fill	Stretched (faces look squashed)
cover	Fills, crops edges (best for avatars, cards)
contain	Whole image visible, may leave gaps (products)

file:///D:/my-website/playground.html

.frame img { object-fit: fill; }

.frame img { object-position: center; }

.frame img { border-radius: 10px; }

Module 10Live Lab

Live Lab: Festival Offer Banner

banner.html – edit me!

Live preview

TryChange the gradient angle to 90deg. Add a background image images/saree.jpg after the gradient with a comma. Try radial-gradient.

Module 10Practice Example 1 of 5

Hero Banner with Background Image

BeginnerThe Jharkhand tourism homepage needs a full-width banner of Hundru Falls with a heading and button.

Your tasks

Section height 280px with background image hundru-falls.jpg
cover + center, no repeat
Dark overlay using a linear-gradient
White heading and paragraph, padding 30px
Orange rounded button

Where this is used: The top of almost every landing page.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/hero.html

hero.htmlHTML

Module 10Practice Example 2 of 5

Gradient Buttons

BeginnerDesign a set of buttons for a mobile recharge website.

Your tasks

Base .btn: padding, white bold text, no border, radius 30px
.b1 orange-to-red gradient
.b2 purple-to-blue gradient at 135deg
.b3 outline style (transparent background, gradient border via box-shadow inset)
Soft shadow under each button

Where this is used: Call-to-action buttons, app stores, payment pages.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/buttons.html

buttons.htmlHTML

Module 10Practice Example 3 of 5

Circular Team Photos with object-fit

IntermediateThe "Our Teachers" section has photos of different shapes. Make them all perfect circles of the same size.

Your tasks

Each img 90px x 90px
object-fit: cover + border-radius: 50%
A white border and soft shadow
Name and subject under each photo
Photos inline in one row

Where this is used: Team pages, testimonials, chat avatars, user profiles.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/teachers.html

teachers.htmlHTML

Module 10Practice Example 4 of 5

Card Elevation with Shadows

IntermediateShow 3 levels of cards for a design guide: flat, raised and floating.

Your tasks

Three cards: .flat, .raised, .float
flat: only a 1px border, no shadow
raised: 0 2px 6px shadow
float: 0 14px 30px shadow
Same padding and radius for all

Where this is used: Material Design, dashboards, e-commerce product cards.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/elevation.html

elevation.htmlHTML

Module 10Practice Example 5 of 5

Festival Offer Banner

AdvancedCreate a Durga Puja offer banner for a Jamshedpur clothing store with layered backgrounds.

Your tasks

Two backgrounds: a radial "glow" gradient on top of a linear gradient
Product image saree.jpg on the right using a second layer
Big heading with text-shadow, discount in a white pill
Rounded banner corners and shadow
Small "T&C apply" text with 0.7 opacity

Where this is used: Sale banners, app home screens, email headers.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/offer.html

offer.htmlHTML

Module 10Module complete

Recap: What You Completed in Module 10

✓background-image with size, position, repeat
✓cover + center for full banners
✓Dark overlay gradient for readable text
✓linear, radial, conic gradients and hard stops
✓box-shadow (x y blur colour, inset)
✓opacity and filter effects
✓object-fit: cover for neat photos

Coming next

Module 11: Advanced Selectors & the Cascade – hover effects, zebra tables and who wins when rules fight.

Quick quiz – click an answer

Q1. Background fills the whole box and crops the photo:

cover fills completely.

Q2. Which shadow is the softest/lightest?

Small offset, small blur, low opacity.

Q3. Make a rectangular photo a circle without squashing it:

Equal size + cover + 50% radius.

MODULE 11

Advanced Selectors & the Cascade

⏱ 3 hours5 practice examplesLive code lab

You will learn

Combinators: descendant, child >, sibling + and ~
Attribute selectors like [type="email"]
Pseudo-classes: :hover, :focus, :nth-child, :not
Pseudo-elements: ::before, ::after, ::first-letter
Cascade, specificity, inheritance and !important

You will build

Zebra-striped tables
Interactive menus and form states
Required-field stars and drop caps

Module 11Real-world use

Where Is This Used on a Web Page?

You will find it here

:hover: menu links and buttons change colour under the mouse
:nth-child: striped rows in tables and lists
:focus / :invalid: form boxes glow or turn red
::before / ::after: icons, required stars, decorative lines without extra HTML

Module 11Combinators

Combinators: Family Relationships

Click a selector

Type your own selector

Click a selector to see which elements it matches (yellow).

file:///D:/my-website/selectors.html

Symbol	Name	Family meaning
`A B` (space)	Descendant	Children, grandchildren...
`A > B`	Child	Only own children
`A + B`	Adjacent sibling	Younger brother right next to you
`A ~ B`	General sibling	All younger brothers/sisters

Module 11Attribute selectors

Attribute Selectors: Select by Attribute Values

Click a selector

Type your own selector

Click a selector to see which elements it matches (yellow).

file:///D:/my-website/selectors.html

Real useAdd a PDF icon to every link ending in .pdf automatically: a[href$=".pdf"]::after { content: " (PDF)"; }

Module 11Pseudo-classes

Pseudo-classes: Styles for STATES

file:///D:/my-website/states.html

InteractHover the links and button, click inside the email box, type a wrong then a right email, tick the checkbox.

Pseudo-class	When it applies
`:hover`	Mouse is over it
`:focus`	Clicked/tabbed into (inputs, links)
`:active`	Being pressed
`:visited`	Link already opened
`:checked`	Checkbox/radio ticked
`:disabled`	Disabled input
`:valid / :invalid`	Passes / fails HTML validation
`:has(...)`	Parent contains something (new, powerful)

LoVe HAteFor links write them in this order: :link :visited :hover :active.

Module 11Pseudo-classes

Structural Pseudo-classes: Pick by Position

Click a selector

Type your own selector

Click a selector to see which elements it matches (yellow).

file:///D:/my-website/selectors.html

The formula:nth-child(an+b) – n counts 0, 1, 2, 3... So 3n = 3, 6, 9 and 2n+1 = 1, 3, 5 (odd).

Module 11Pseudo-elements

Pseudo-elements: Style a PART of an Element

file:///D:/my-website/pseudo.html

pseudo.cssCSS

Pseudo-element	Selects
`::before / ::after`	Fake content before/after (needs `content`)
`::first-letter`	First letter (drop caps)
`::first-line`	First line
`::placeholder`	Placeholder text
`::selection`	Text the user highlights

One colon or two?Pseudo-classes use one colon (:hover). Pseudo-elements use two (::before).

Module 11The cascade

The Cascade: How CSS Decides Who Wins

1
Importance: !important beats normal rules (use rarely!)
2
Specificity: inline style > #id > .class / :hover / [attr] > element
3
Order: if specificity is equal, the rule written later wins

order.cssCSS

DebuggingIn DevTools, losing rules are crossed out. Hover the selector to see its specificity.

Module 11Specificity

Specificity Calculator: Type Any Selector

Type a selector

Selector	Score (a,b,c)
`p`	0, 0, 1
`.note`	0, 1, 0
`p.note`	0, 1, 1
`#tip`	1, 0, 0
`nav ul li a:hover`	0, 1, 4
`style="..."`	beats all selectors

Compare left to rightLike comparing marks subject by subject: one ID (1,0,0) beats any number of classes (0,15,0).

Keep it lowPrefer simple class selectors. Long chains like #main div ul li a are hard to override later.

Module 11Inheritance

Inheritance: What Children Get from Parents

file:///D:/my-website/inherit.html

inherit.cssCSS

Inherited

colorfont-familyfont-sizeline-heighttext-alignvisibilitycursor

Not inherited

marginpaddingborderbackgroundwidthheightdisplay

Why it helpsSet font-family and color once on body and the whole page gets them.

Keyword	Means
`inherit`	Copy the parent's value
`initial`	Browser default for that property
`unset`	inherit if inheritable, otherwise initial

!importantcolor: red !important; beats everything. It is a "last resort" – overusing it creates a war of !importants.

Module 11Live Lab

Live Lab: Hover Menus and Striped Lists

selectors-lab.html – edit me!

Live preview

TryChange odd to 3n. Make the active link's hover darker. Add li:last-child { font-weight: bold; }. Replace the tick with "\2605 " (a star).

Module 11Practice Example 1 of 5

Zebra-Striped Results Table

BeginnerThe JAC result table for a school is hard to read across rows. Stripe it.

Your tasks

Header row dark with white text
Even body rows light grey with tbody tr:nth-child(even)
Row hover highlight with tr:hover
First column bold with td:first-child
Collapse borders and add padding

Where this is used: Admin dashboards, reports, any data table.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/results.html

results.htmlHTML

Module 11Practice Example 2 of 5

Interactive Navigation Menu

BeginnerMake the coaching website menu respond to the mouse and show which page you are on.

Your tasks

Remove underline from nav a
On :hover change background and text colour
Class .active shows the current page
:focus-visible outline for keyboard users
Use nav a + a to add a left border between links

Where this is used: Every website header and sidebar menu.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/menu.html

menu.htmlHTML

Module 11Practice Example 3 of 5

Form Focus and Error States

IntermediateHelp users fill the bank account opening form by showing which field is active and which are wrong.

Your tasks

Inputs with grey border
:focus blue border + soft glow
:invalid red border only after typing (:not(:placeholder-shown))
:valid green border
Disabled field greyed out

Where this is used: Sign-up, checkout and banking forms.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/bank-form.html

bank-form.htmlHTML

Module 11Practice Example 4 of 5

Required Asterisk with ::after

IntermediateMark required fields with a red star automatically, without typing * in the HTML.

Your tasks

Give labels of required fields class="req"
.req::after adds " *" in red
A legend line explains the star using ::before
PDF links get " (PDF)" with a[href$=".pdf"]::after
External links get an arrow ↗

Where this is used: Forms everywhere; automatic file-type labels on download links.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/required.html

required.htmlHTML

Module 11Practice Example 5 of 5

Magazine Drop Cap and Pull Quote

AdvancedStyle a school magazine article like a printed magazine.

Your tasks

First letter of the first paragraph huge and coloured (::first-letter)
First line in small caps (::first-line)
Only the first paragraph gets these: use p:first-of-type
A pull quote with big decorative quote marks via ::before
Custom ::selection colour

Where this is used: Blogs, online magazines, story pages.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/magazine.html

magazine.htmlHTML

Module 11Module complete

Recap: What You Completed in Module 11

✓Combinators: space, >, +, ~
✓Attribute selectors: [attr], =, ^=, $=, *=
✓States: :hover, :focus, :active, :checked, :valid, :has
✓Position: :first-child, :nth-child(odd / 3n / n+5), :not
✓Pseudo-elements ::before ::after ::first-letter ::placeholder
✓Cascade: importance, specificity, order
✓Inheritance; inherit / initial; avoid !important

Coming next

Module 12: Display, Position & Z-index – badges, sticky headers and floating buttons.

Quick quiz – click an answer

Q1. Which selects every 2nd table row?

even = 2, 4, 6...

Q2. Which has higher specificity?

One ID (1,0,0) beats two classes (0,2,0).

Q3. ::after needs which property to show anything?

Without content, ::before/::after are not drawn.

MODULE 12

Display, Position & Z-index

⏱ 3 hours5 practice examplesLive code lab

You will learn

display: block, inline, inline-block, none
Hiding things: display vs visibility vs opacity
position: static, relative, absolute, fixed, sticky
Stacking with z-index
float (old way), and common real-world patterns

You will build

A cart icon with a number badge
A sticky header and a floating WhatsApp button
A photo caption overlay and a dropdown menu

Module 12Real-world use

Where Is This Used on a Web Page?

You will find it here

Sticky header: stays at the top while you scroll
Floating chat button: fixed in the corner
Badges: the red "3" on a cart icon (absolute)
Dropdown menus: hidden until hover (display)
Captions on photos, "SALE" ribbons, popups

Module 12display

display: How a Box Sits in the Flow

display

width: 120px

Value	New line?	Width/height work?
block	Yes	Yes
inline	No	No (ignored)
inline-block	No	Yes – best of both
none	Removed completely	–

Watch widthSet inline and drag width: nothing happens. Switch to inline-block and drag again.

file:///D:/my-website/playground.html

.item { display: inline; }

.item { width: 120px; }

Module 12Hiding

Three Ways to Hide: Which One When?

file:///D:/my-website/hide.html

	Takes space?	Clickable?	Screen readers?
`display: none`	No	No	Hidden
`visibility: hidden`	Yes (gap)	No	Hidden
`opacity: 0`	Yes (gap)	Yes!	Read aloud

Usedisplay: none for menus, tabs, popups. opacity for fade animations (Module 17).

Module 12position

position Playground: Move the Orange Box

position

top: 20px

left: 30px

Value	Behaviour
static	Normal flow. top/left ignored
relative	Moves from its normal spot; gap stays
absolute	Leaves the flow; placed inside nearest positioned parent
fixed	Glued to the window, even when scrolling
sticky	Normal until you scroll past, then sticks

file:///D:/my-website/playground.html

.box { position: static; }

.box { top: 20px; }

.box { left: 30px; }

Module 12position

The Golden Pair: relative Parent + absolute Child

badge.cssCSS

RuleAn absolute element looks up the family tree for the nearest parent with a position other than static. If none, it uses the whole page.

Used forBadges, ribbons, close (×) buttons on popups, captions on images, icons inside input boxes.

Module 12z-index

z-index: Who Is on Top?

#c1 (blue) z-index: 1

#c2 (orange) z-index: 2

#c3 (green) z-index: 3

Higher number = closer to you
Works only on positioned elements (not static) and flex/grid items
Same z-index? The one later in HTML is on top
Use a scale: 10 dropdowns, 100 sticky header, 1000 modals

file:///D:/my-website/playground.html

#c1 { z-index: 1; }

#c2 { z-index: 2; }

#c3 { z-index: 3; }

Module 12float

float: Wrap Text Around an Image (Old but Useful)

file:///D:/my-website/float.html

float.cssCSS

float: left / right pushes the image to one side; text flows around it
clear: both makes an element start below floats
Before 2015, whole page layouts were built with floats

TodayUse Flexbox and Grid (Part 3) for layouts. Use float only for text-wrapping around images, like in a newspaper.

Module 12Patterns

Four Real-World Position Patterns in One Page

file:///D:/my-website/patterns.html

Pattern	CSS
Sticky header	`position: sticky; top: 0; z-index: 10;`
Cart badge	parent `relative`, badge `absolute; top; right`
Caption on photo	parent `relative`, caption `absolute; bottom: 0`
Floating chat button	`position: fixed; right; bottom`

Scroll the previewNotice how sticky and fixed behave differently: the header stays on top of the page area; the WhatsApp icon stays in the window corner.

Module 12Live Lab

Live Lab: Product Card with a Ribbon

ribbon.html – edit me!

Live preview

TryRemove position: relative from .card – where does the ribbon go? Move the ribbon to the top-right. Add a heart icon ♡ in the bottom-right corner with absolute.

Module 12Practice Example 1 of 5

Cart Icon with Notification Badge

BeginnerAn online grocery store in Bokaro needs a cart icon showing how many items are in the cart.

Your tasks

Wrapper .cart with position: relative and inline-block
Cart image 40px
Red circular badge positioned top-right with absolute
Badge text white, bold, 12px
Add a bell icon with a badge too (reuse the class)

Where this is used: E-commerce carts, notification bells, unread message counts.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/badge.html

badge.htmlHTML

Module 12Practice Example 2 of 5

Sticky Header

BeginnerA long news page should keep the menu visible while reading.

Your tasks

Header with site name and menu
position: sticky; top: 0
Background colour and z-index so content goes under it
Small shadow under the header
Add enough paragraphs to scroll

Where this is used: News sites, blogs, e-commerce, documentation.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/sticky.html

sticky.htmlHTML

Module 12Practice Example 3 of 5

Fixed WhatsApp Chat Button

BeginnerEvery page of a Ranchi travel agency should show a WhatsApp button in the bottom-right corner.

Your tasks

Link to https://wa.me/91... with the WhatsApp image
position: fixed; right: 18px; bottom: 18px
Size 56px, round, shadow
A label "Chat with us" that appears on hover
High z-index

Where this is used: Business websites, support chat widgets, "back to top" buttons.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/whatsapp.html

whatsapp.htmlHTML

Module 12Practice Example 4 of 5

Photo Caption Overlay

IntermediateA gallery of Jharkhand waterfalls should show the name on a dark strip at the bottom of each photo.

Your tasks

figure with position relative, inline-block, width 220px
Image width 100%, rounded
figcaption absolute at bottom: 0, full width
Semi-transparent dark background, white text
Remove figure default margin

Where this is used: Galleries, news thumbnails, Netflix-style cards.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/captions.html

captions.htmlHTML

Module 12Practice Example 5 of 5

Dropdown Menu on Hover

AdvancedThe coaching website menu has a "Courses" item with a list of courses that opens on hover.

Your tasks

Menu items inline-block; the item with submenu is position relative
Submenu ul is absolute, top: 100%, hidden with display: none
li:hover > ul shows it with display: block
Submenu has white background, shadow, z-index
Hover colour on submenu links

Where this is used: Menus of large websites (shops, universities, government portals).

Expected result – build this yourself first, then check the solution

file:///D:/my-website/dropdown.html

dropdown.htmlHTML

Module 12Module complete

Recap: What You Completed in Module 12

✓display: block, inline, inline-block, none
✓Hide with display / visibility / opacity
✓position: static, relative, absolute, fixed, sticky
✓relative parent + absolute child for badges and captions
✓z-index stacking (needs position)
✓float + clear for text wrap
✓Patterns: sticky header, cart badge, caption, fixed chat button

Coming next

Part 3: Flexbox – the modern, easy way to line things up in rows and columns.

Quick quiz – click an answer

Q1. Which value keeps an element in the window corner even when scrolling?

fixed is relative to the browser window.

Q2. A badge must sit on the corner of its card. The card needs:

The positioned parent becomes the reference box.

Q3. width does nothing on a span. Why?

Inline elements ignore width/height. Use inline-block.

PART 2 COMPLETE

Well done!

You have finished Part 2 of the Complete HTML + CSS Course.

Continue to Part 3: Layout & Responsive Design ➜ Course index

Modules completed

Module 7: Introduction to CSS & Selectors
Module 8: Colours, Units & Typography
Module 9: The Box Model
Module 10: Backgrounds, Gradients & Effects
Module 11: Advanced Selectors & the Cascade
Module 12: Display, Position & Z-index

Keep all your practice files in D:\my-website. You will reuse them in the capstone projects.