CSS Practical Workbook

75 HTML and CSS demonstrations

This note uses internal CSS. This text uses inline CSS. The rest of this workbook uses external CSS.

1-10: CSS foundations

1. Inline, internal and external CSS

External style

Internal style

Inline style

2. CSS selectors

Element, class, ID and attribute selectors.

ID selector

3. Colors, backgrounds and borders

Named color
Gradient background

4. Fonts and text formatting

Bold, italic, uppercase and spaced text.

5. CSS box model

Content
Padding
Border
Margin

6. Width, height and sizing

width: min(100%, 220px); height: 70px

7. Positioning

RelativeAbsoluteStatic
Fixed

Sticky element (scroll to observe)

8. Float and clear

FLOAT

Text flows around a floated element.

This block clears the float.

11-20: Components and layouts

11. Pseudo-elements

First letter and first line have special styles.

12. CSS lists and tables

  • HTML
  • CSS
TopicDone
SelectorsYes

13. Styled registration form

14. Flexbox

OneTwoThree

15. Grid layout

ABCD

16. Media queries

Resize this page

17. Transitions and transformations

Hover me

18. CSS animations

Pulse

20. Personal portfolio

Alex Developer

Frontend student • HTML • CSS

21-30: Selectors, backgrounds and effects

21. College/student profile

JS

Jayanthi Student

CSE, Year 2

22. Login page

23. Product card

PRODUCT

Design Kit

$24

24. Responsive photo gallery

Photo 1
Photo 2
Photo 3

25. Complete homepage

Build Better Websites

26. Inheritance and specificity

Inherited font, specific color wins.

27. Universal, element, class, ID, attribute, grouping

All selector types are represented here.

28. Combinator selectors

Descendant

Child

Adjacent/general sibling

29. CSS variables

Custom properties control this card.

30. Background images and position

center / cover

31-40: Visual techniques

31. Linear and radial gradients

32. Box and text shadows

Shadow text and card

33. Border-radius shapes

34. Opacity and transparency

100%50%20%

35. Overflow

This content is clipped with overflow hidden. More words continue beyond the fixed box.

36. z-index and stacking

BackFront

37. Display properties

block inline inline-block

38. Visibility and hiding

VisibleHidden spaceDisplay none

39. Dropdown menu

40. Image hover effect

Hover image

41-50: Interaction and media

41. Tooltip

Hover meHelpful tooltip

42. CSS-only button animation

43. CSS filters

BlurGrayBrightContrast

44. Object-fit and object-position

Object fit demo

45. Responsive image gallery

1
2
3
4

46. Card layout with Flexbox

Card A
Card B
Card C

47. Dashboard with Grid

MenuStatsChart

48. Two-column Grid

Main content

49. Three-column Flexbox

One
Two
Three

50. Sticky header

I stick while my container scrolls

51-60: Responsive website designs

51. Fixed sidebar

Fixed
Sidebar

Content stays visible beside a fixed panel.

52. Responsive footer

AboutLinksContact

53. Responsive login and signup

54. Responsive contact form

55. Responsive college homepage

Bright Future College

Learn, lead, serve.

56. Restaurant webpage

Spice Garden

Fresh food, warm memories.

57. Online shopping page

Headphones
$35
Backpack
$42

58. Travel homepage

Discover the World

59. News/blog Grid

HeadlineArticleArticle

60. Multi-section portfolio

AboutWorkSkillsContact

61-75: Advanced CSS and final website

61. Grid template areas

Header
Main
Footer

62. Flexbox alignment and ordering

Order 2Order 1Order 3

63. Grid with media queries

A
B
C

64. Mobile-first layout

Starts as one column, expands at 700px.

65. CSS transitions

Hover for a smooth transition

66. 2D and 3D transformations

Rotate

67. Keyframe animation

Move

68. Loading spinner

69. Sliding card animation

Sliding card

71. Dark mode variables

Dark theme card

72. Responsive typography

This text uses responsive font sizing.

73. clamp(), min() and max()

Flexible sizing functions

74. calc()

Width uses calc(100% - 2rem)

75. Complete responsive HTML5/CSS3 website

Nova Studio

Design for everyone

HTML5, CSS3, Flexbox, Grid and media queries.