CSS Card Styling Workshop:-by-Step Guide
Step 1: Create and Link Your CSS File
What to do
1. Create a new file called [Link] in the same folder as your HTML file.
2. Open your HTML file and find the <head> section.
3. Inside the <head> tags, add a link element that connects your HTML file to [Link].
Expected result
The HTML file is now connected to your stylesheet. (There are no visual changes yet, but the
connection is made.)
Step 2: Style the Body and Page Background
What to do
In your [Link] file, target the body element and:
• Set a modern sans-serif font family (for example, “Segoe UI” or a similar system font).
• Apply a diagonal gradient background that goes from a bluish purple to a deeper purple.
• Remove the default margins from the page.
• Add padding around the page (40px on top and bottom, 20px on left and right).
• Make sure the page height is at least as tall as the browser window.
Expected result
Your page now has a purple gradient background.
1
Step 3: Style the Page Container and Heading
What to do
In [Link]:
• Target the .page class and:
– Limit its width to a narrow column so it does not stretch across the whole screen.
– Center it horizontally in the middle of the page.
• Then target the h1 inside .page and:
– Make the heading text white and large.
– Center the heading text.
– Add space below the heading.
– Add a subtle dark text shadow so the text stands out from the background.
What each property does
• Limiting the width keeps the content easy to read.
• Centering the container makes the card sit in the middle of the page.
• White, large, centered text is easier to read on a dark background.
• A text shadow adds depth and improves readability.
Expected result
You see a white centered heading on the gradient background (for example, “Meet Our Team”).
Step 4: Create the Main Card Container
What to do
Target the .card class and:
• Give it a white background.
• Round all of its corners.
• Add a soft drop shadow so it looks like a floating card.
• Ensure any content that sticks out of the card is hidden so the rounded corners look clean.
What each property does
• A white background separates the card from the colorful page.
• Rounded corners make the card feel modern and friendly.
• A drop shadow makes the card feel elevated from the background.
• Hiding overflow keeps the rounded edges neat when content reaches the edges.
2
Expected result
You now see a white rounded card with a shadow on the gradient background.
Step 5: Style the Card Header (Top Section)
What to do
Target the .cardh eader classand :
Apply a purple gradient background that fits with the overall page colors.
Add extra padding, with more space at the top than at the bottom.
Center any content inside this header.
Make this header act as a positioning context so you can place elements like
a badge in its corners.
What each property does
• The gradient background visually connects the header to the page.
• Padding creates breathing room around the avatar and text.
• Centered content looks balanced and intentional.
• A positioning context allows absolutely positioned elements (like badges) to sit in the
header.
Expected result
The top part of the card has a purple gradient background where the image and badge will
appear.
Step 6: Style the Profile Avatar (Image)
What to do
Target the .carda vatar elementand :
Give it the same fixed width and height so it forms a square.
Make it perfectly circular.
Add a thick white border around it.
Add a soft shadow so the avatar stands out from the header background.
3
What each property does
• Equal width and height create a consistent avatar size.
• A 100
• A white border frames the image and makes it pop.
• A shadow adds depth and focus to the avatar.
Expected result
The profile image is a circular photo with a white border and shadow on the gradient background.
Step 7: Add the “Senior” Badge
What to do
Target the .cardb adge elementand :
Place it in the top-right corner of the card header.
Give it a gold-colored background with dark text.
Add horizontal and vertical padding so it looks like a pill.
Round the corners into a pill shape.
Use a small font size, bold weight, and transform the text to uppercase.
What each property does
• Positioning it in the corner makes the badge feel like a label.
• Gold color suggests importance or seniority.
• Padding and rounding create a compact badge shape.
• Small, bold, uppercase text makes the label readable and strong.
Expected result
A gold badge (for example, “SENIOR”) appears in the top-right corner of the header.
Step 8: Style the Card Body (Content Area)
What to do
Target the .cardb ody elementand :
Add comfortable padding on all sides.
Center all text inside this section.
4
What each property does
• Padding separates the text from the card edges.
• Centered text keeps the layout consistent with the header.
Expected result
The name, role, and bio are centered with comfortable spacing.
Step 9: Style the Name
What to do
Target the .cardn ame elementand :
Increase the font size so the name is the most prominent text in the body.
Use a dark blue-gray color for the text.
Remove any top margin and add a small margin below the name.
What each property does
• A large font size draws attention to the person’s name.
• Dark blue-gray gives a professional feel.
• Margin below creates separation from the role/title.
Step 10: Style the Role/Title
What to do
Target the .cardr ole elementand :
Use a medium font size that is smaller than the name.
Use a medium gray text color.
Add extra margin below to separate it from the bio text.
Use a slightly heavier font weight for emphasis.
What each property does
• A smaller size than the name shows a visual hierarchy.
• Gray color makes the role softer but still readable.
• Extra spacing below improves readability before the bio.
• Medium weight highlights the role without overpowering the name.
5
Step 11: Style the Bio Text
What to do
Target the .cardb io elementand :
Use a small, readable font size.
Choose a dark gray color for text.
Increase the line height for more spacing between lines.
Add a larger margin below the bio to separate it from the stats.
What each property does
• A smaller font size suits longer text.
• Dark gray is easy on the eyes for reading.
• Extra line height makes paragraphs more comfortable to read.
• Spacing below the bio creates a clear break before the stats section.
Step 12: Create the Stats Grid (Three Columns)
What to do
Target the .cards tats containerand :
Arrange the stats horizontally in a single row.
Spread the three stats evenly across the available width.
Add vertical padding inside the stats area.
Draw light top and bottom borders to separate the stats from other sections.
Add space below the stats area before the skills section.
What each property does
• A horizontal layout makes it easy to compare stats.
• Even spacing keeps the layout balanced.
• Borders visually group the stats together.
• Margin below keeps the card sections clearly separated.
6
Step 13: Style Each Individual Stat
What to do
For each stat:
• Target the .stat wrapper and center its content.
• Target .statn umber and :
• Make it a block-level element so it sits above the label.
• Use a large, bold font size.
• Choose a purple color that matches the card accents.
• Add a small margin below the number.
Target .statl abel and :
Make it a block-level element below the number.
Use a very small font size.
Choose a light gray color.
Transform the text to uppercase.
What each property does
• Centered content keeps stats tidy.
• Large, bold numbers highlight the key metric.
• Light, small, uppercase labels act as subtle captions under each number.
Step 14: Create the Skills Tags Section
What to do
Target the .cards kills containerand :
Arrange the skill tags in a horizontal row that can wrap onto multiple lines.
Allow the tags to move to new lines when there is not enough space.
Add a uniform gap between the tags.
Center the group of skill tags within the card.
What each property does
• A flexible row layout adapts well to different screen widths.
• Wrapping keeps tags visible instead of overflowing.
• Gaps keep tags from sticking together.
• Centering the group maintains a balanced layout.
7
Step 15: Style Individual Skill Tags
What to do
Target the .skill elements and:
• Give each tag a light gray background and dark text color.
• Add vertical and horizontal padding inside the tag.
• Round the corners enough to create a pill shape.
• Use a small, medium-weight font.
What each property does
• Light backgrounds with dark text are easy to read.
• Padding makes each tag feel like a clickable chip.
• Rounded corners create a modern pill look.
• A small but slightly bold font keeps tags compact but readable.
Step 16: Style the Card Footer (Buttons Area)
What to do
Target the .cardf ooter containerand :
Add padding on all sides, with slightly more at the bottom.
Arrange the buttons next to each other in a row.
Add space between the two buttons.
What each property does
• Padding separates the footer from the rest of the card.
• A row layout places the buttons side by side.
• Gaps prevent the buttons from touching each other.
Step 17: Style the Buttons (Base Styles)
What to do
Target the base .btn class and:
• Allow each button to grow so both buttons share equal width.
• Center the text inside each button.
8
• Add padding to define a comfortable button size.
• Round the button corners.
• Remove the default underline from the links.
• Use a small-medium font size with semi-bold weight.
• Add a smooth transition so any hover changes animate nicely.
What each property does
• Equal width buttons look balanced.
• Centered text is easier to scan.
• Padding and rounded corners create modern, tappable buttons.
• Transitions make hover effects feel smooth and polished.
Step 18: Style the Primary Button (View Profile)
What to do
Target the .btn--primary button and:
• Give it a solid purple background.
• Make the text color white.
Then define a hover state for .btn--primary that:
• Darkens the purple background slightly.
• Moves the button a little upwards.
• Adds a soft purple shadow under the button.
What each property does
• A filled purple button looks like the main action.
• Hover movement and shadow make the button feel interactive.
Step 19: Style the Secondary Button (Message)
What to do
Target the .btn--secondary button and:
• Give it a white background.
9
• Use purple for the text color and border.
Then define a hover state for .btn--secondary that:
• Fills the button with purple.
• Switches the text color to white.
• Moves the button slightly upwards to match the primary button on hover.
What each property does
• An outlined style distinguishes the secondary action from the primary one.
• Hover inversion of colors creates a satisfying interactive effect.
Step 20: Final Check and Celebration
How to test your work
1. Open your HTML file in a browser.
2. Check that the layout, colors, and spacing match the screenshots or description.
3. Hover over the buttons to see the interactive effects.
Your card now features a gradient background, circular profile image with a badge, name and
role, a readable bio, stats grid, skill tags, and two interactive buttons with professional spacing
and colors throughout.
10