CSS Practice - Styling for ReactJS

CSS Selectors

Selectors are used to target HTML elements so you can style them. CSS provides a wide range of selectors.

Universal Selector: Targets all elements → *
Type Selector: Targets elements by tag name → div, p
Class Selector: Targets elements with a specific class → .btn
ID Selector: Targets an element with a specific ID → #header
Group Selector: Targets multiple elements → h1, h2, h3
Descendant Selector: Targets elements inside others → .card p
Child Selector: Direct child only → .container > p
Adjacent Sibling Selector: Immediate next sibling → h2 + p
General Sibling Selector: Any next siblings → h2 ~ p
Attribute Selector: Target by attribute → input[type="text"]
Pseudo-classes: Based on state → a:hover, :nth-child(2)
Pseudo-elements: Style parts → p::first-line, ::before

/* Examples */
* {
  margin: 0;
}
.container {
  padding: 1rem;
}
#main-title {
  font-size: 2rem;
}
.card p {
  color: gray;
}
.card > h2 {
  color: teal;
}
a:hover {
  text-decoration: underline;
}
p::first-line {
  font-weight: bold;
}

<div class="container">
  <h1 id="main-title">Selectors Demo</h1>
  <div class="card">
    <h2>Heading</h2>
    <p>Some text inside card.</p>
  </div>
  <a href="#">Hover me</a>
</div>

Box Model

Every HTML element is a rectangular box. The box model describes the spacing around and inside elements using:

Content: The actual text or child elements inside the box.
Padding: Space between the content and the border.
Border: The edge around the padding and content.
Margin: Space outside the border, separating it from other elements.

/* CSS */
.box {
  width: 200px;
  padding: 20px;
  border: 4px solid teal;
  margin: 30px;
  background-color: lightyellow;
}

<div class="box">
  Box Model Example
</div>

Shadows & Borders

Shadows and borders help highlight elements and add depth or visual separation in your UI design.

`border`

border-width: Thickness (e.g., 2px)
border-style: Style (e.g., solid, dashed, dotted)
border-color: Color (e.g., #333)
border-radius: Rounds corners (e.g., 10px)

`box-shadow`

Adds shadow around an element. Syntax: offset-x offset-y blur-radius color

box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
You can add multiple shadows with commas
Use inset for inner shadows

Examples

/* CSS */
.shadow-box {
  padding: 1rem;
  background: white;
  border: 2px solid #444;
  border-radius: 12px;
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);
}

<div class="shadow-box">
  I have a border and a shadow!
</div>

CSS Units

CSS units define how sizes like width, padding, margin, and font-size are measured. They can be either absolute (fixed) or relative (flexible).

Common Units

px – Pixels (absolute unit, fixed size)
em – Relative to the font-size of the parent
rem – Relative to the root element’s font-size
% – Percentage, relative to the parent element
vw – Viewport width
vh – Viewport height
fr – Fraction of available space (for Grid layout)
ch – Width of the “0” character (used in typography)

Examples

/* CSS */
.unit-demo {
  padding: 1rem;
  font-size: 1.5em;
  width: 50%;
  height: 20vh;
  background: #4caf50;
  color: white;
  margin: 2ch;
}

<div class="unit-demo">
  Resize the screen or adjust font-size to see changes!
</div>

Display Property

The display property controls how elements are displayed in the layout. Common values include:

block: Takes full width, starts on a new line (e.g., <div>).
inline: Takes only as much width as needed, stays in line (e.g., <span>).
inline-block: Like inline but allows setting width and height.
none: Completely hides the element from layout.
flex: Enables Flexbox layout for flexible, responsive designs.
grid: Enables Grid layout for 2D positioning.

/* CSS */
.block {
  display: block;
  background: lightblue;
  margin: 1rem 0;
}

.inline {
  display: inline;
  background: lightgreen;
  padding: 0.2rem;
}

.flex-container {
  display: flex;
  gap: 1rem;
}

<div class="block">Block Element</div>

<span class="inline">Inline A</span>
<span class="inline">Inline B</span>

<div class="flex-container">
  <div>Flex 1</div>
  <div>Flex 2</div>
</div>

Overflow & Visibility

These properties control how content behaves when it overflows the boundaries of its container or whether it's visible at all.

`overflow`

Controls what happens to content that overflows its container.

visible (default) – content spills out
hidden – excess content is clipped
scroll – always adds scrollbars
auto – adds scrollbars only when needed

`visibility`

Controls whether an element is visible or not, without removing it from the layout.

visible – element is shown
hidden – element is invisible but still takes up space

Examples

/* CSS */
.overflow-box {
  width: 200px;
  height: 20px;
  border: 2px solid #333;
  overflow: auto;
  padding: 0.5rem;
}

.invisible-box {
  background: coral;
  padding: 1rem;
  visibility: hidden;
}

<div class="overflow-box">
  This box has more content than it can fit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut...
</div>

<div class="invisible-box">
  You can't see me, but I take up space!
</div>

Position Property

The position property defines how an element is positioned in the document. Common values:

static: Default positioning (no special layout behavior).
relative: Moves element relative to its normal spot.
absolute: Removes element from flow; positions it relative to nearest positioned ancestor.
fixed: Fixed to the viewport. Stays in place when scrolling.
sticky: Acts like relative, but sticks in place when it reaches a scroll threshold.

/* CSS */
.static-box {
  position: static;
  background: lightgray;
  padding: 1rem;
  margin-bottom: 1rem;
}

.relative-box {
  position: relative;
  top: 10px;
  left: 10px;
  background: lightblue;
  padding: 1rem;
}

.container {
  position: relative;
  height: 120px;
  background: #f1f1f1;
  margin-bottom: 2rem;
}

.absolute-box {
  position: absolute;
  top: 10px;
  left: 10px;
  background: salmon;
  padding: 1rem;
}

.fixed-box {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: gold;
  padding: 1rem;
  z-index: 100;
}

.sticky-box {
  position: sticky;
  top: 0;
  background: palegreen;
  padding: 1rem;
  margin-bottom: 2rem;
  z-index: 10;
}

<div class="static-box">Static Position (default)</div>

<div class="relative-box">Relative Position</div>

<div class="container">
  <div class="absolute-box">Absolute inside relative container</div>
</div>

<div class="sticky-box">Sticky Position (scroll to test)</div>

<p>Scroll down to see fixed box stay in place.</p>
<div style="height: 400px"></div>

<div class="fixed-box">Fixed to Bottom Right</div>

Colors & Backgrounds

CSS gives you control over how elements look by letting you set colors and background styles. Let's understand some key properties:

color: Changes the text color.
background-color: Sets the background color of an element.
background-image: Adds an image as the background.
background-size: Defines how the image scales (e.g., cover, contain).
background-repeat: Determines if the image repeats.
background: A shorthand to combine multiple background properties.
opacity: Controls transparency of the entire element (not just the background).

Color Formats

/* CSS */
.named-color {
  color: red; /* Named color */
  background-color: lightgray;
  padding: 1rem;
  margin-bottom: 1rem;
}

.hex-color {
  color: #2ecc71; /* HEX color */
  background-color: #ecf0f1;
  padding: 1rem;
  margin-bottom: 1rem;
}

.rgb-color {
  color: rgb(44, 62, 80); /* RGB */
  background-color: rgb(220, 248, 198);
  padding: 1rem;
  margin-bottom: 1rem;
}

.rgba-color {
  color: white;
  background-color: rgba(231, 76, 60, 0.8); /* RGB + Alpha (transparency) */
  padding: 1rem;
  margin-bottom: 1rem;
}

.hsl-color {
  color: hsl(210, 100%, 40%); /* Hue, Saturation, Lightness */
  background-color: hsl(60, 100%, 90%);
  padding: 1rem;
  margin-bottom: 1rem;
}

<div class="named-color">Named Color Example</div>
<div class="hex-color">HEX Color Example</div>
<div class="rgb-color">RGB Color Example</div>
<div class="rgba-color">RGBA with Transparency</div>
<div class="hsl-color">HSL Color Example</div>

Background Styles

/* CSS */
.bg-solid {
  background-color: skyblue;
  padding: 1rem;
  margin-bottom: 1rem;
}

.bg-image {
  background-image: url('https://via.placeholder.com/300x100');
  background-size: cover;
  background-repeat: no-repeat;
  height: 100px;
  margin-bottom: 1rem;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg-gradient {
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 6px;
}

<div class="bg-solid">Solid Background Color</div>

<div class="bg-image">Background Image</div>

<div class="bg-gradient">Linear Gradient Background</div>

Typography

Typography in CSS deals with how text appears on the page — including its font, size, weight, spacing, alignment, and more.

font-family: Sets the typeface (e.g., Arial, Georgia, sans-serif).
font-size: Controls the size of the text (e.g., 16px, 1.2em, 120%).
font-weight: Defines thickness (e.g., normal, bold, 100–900).
line-height: Sets spacing between lines of text.
letter-spacing: Controls spacing between letters.
text-align: Aligns text (left, center, right, justify).
text-transform: Changes case (uppercase, lowercase, capitalize).
text-decoration: Adds decoration like underline or line-through.
font-style: Italicizes text (normal, italic, oblique).

/* CSS */
.typography-example {
  font-family: 'Georgia', serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 1px;
  text-align: justify;
  text-transform: capitalize;
  text-decoration: underline;
  font-style: italic;
  padding: 1rem;
  background: #f4f4f4;
  border-left: 4px solid #4caf50;
  margin-bottom: 1rem;
}

<div class="typography-example">
this is a sample text demonstrating font styles and spacing in css.
</div>

Quick Font Families Demo

/* CSS */
.sans-serif {
  font-family: Arial, Helvetica, sans-serif;
}

.serif {
  font-family: 'Times New Roman', Georgia, serif;
}

.monospace {
  font-family: 'Courier New', monospace;
}

<p class="sans-serif">This is Sans-Serif font</p>
<p class="serif">This is Serif font</p>
<p class="monospace">This is Monospace font</p>

Flexbox

Flexbox is a one-dimensional layout system in CSS that makes it easy to align and distribute space among items in a container. It works either in rows or columns.

display: flex – Enables flex layout on a container.
flex-direction – Defines direction: row (default), column, row-reverse, column-reverse.
justify-content – Aligns items along the main axis (e.g., center, space-between).
align-items – Aligns items along the cross axis (e.g., center, flex-start).
gap – Adds spacing between flex items.
flex – Controls how a flex item grows/shrinks inside its container.

/* CSS */
.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background: #f0f0f0;
  padding: 1rem;
}

.flex-item {
  background: #4caf50;
  color: white;
  padding: 1rem;
  border-radius: 6px;
  flex: 1;
  text-align: center;
}

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

Other Useful Properties

align-self: Override alignment for one specific item.
flex-wrap: Allow items to wrap onto multiple lines (e.g., `wrap`, `nowrap`).
order: Change the order of items in layout (without changing HTML).

/* CSS */
.flex-wrap-example {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

<div class="flex-wrap-example">
  <div class="flex-item">One</div>
  <div class="flex-item">Two</div>
  <div class="flex-item">Three</div>
  <div class="flex-item">Four</div>
  <div class="flex-item">Five</div>
</div>

CSS Grid

CSS Grid is a powerful two-dimensional layout system for web design. It allows you to layout content in rows and columns with full control over alignment, spacing, and placement.

display: grid: Turns an element into a grid container.
grid-template-columns: Defines the number and size of columns.
grid-template-rows: Defines the number and size of rows.
gap: Adds spacing between grid items (both rows and columns).
grid-column & grid-row: Controls how items span columns/rows.
place-items: Shorthand for align-items and justify-items.

/* CSS */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  background: #f9f9f9;
  padding: 1rem;
}

.grid-item {
  background: #4caf50;
  color: white;
  padding: 1rem;
  border-radius: 6px;
  text-align: center;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

Spanning Rows and Columns

/* CSS */
.grid-span-example {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.grid-span-example .item1 {
  grid-column: span 2;
}

.grid-span-example .item4 {
  grid-row: span 2;
}

<div class="grid-span-example">
  <div class="grid-item item1">Span 2 cols</div>
  <div class="grid-item">2</div>
  <div class="grid-item item4">Span 2 rows</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
</div>

Transitions & Animations

CSS allows you to create smooth effects using transitions for simple state changes (like hover), and animations for more complex keyframe-based motion.

CSS Transitions

Transitions let you smoothly animate property changes over time.

transition: Sets which property to animate and how long it takes.
Commonly used with :hover, :focus, etc.

/* CSS */
.box {
  background: steelblue;
  color: white;
  padding: 1rem;
  border-radius: 6px;
  transition: background 0.3s ease, transform 0.3s ease;
}

.box:hover {
  background: darkorange;
  transform: scale(1.1);
}

<div class="box">Hover over me!</div>

CSS Animations

Animations use keyframes to describe how an element should move or change over time.

@keyframes: Define steps of an animation.
animation-name, animation-duration, animation-iteration-count, etc.

/* CSS */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.bouncer {
  background: #4caf50;
  color: white;
  padding: 1rem;
  border-radius: 6px;
  animation: bounce 0.8s ease infinite;
}

<div class="bouncer">I'm bouncing!</div>

Other Useful Properties

animation-delay: Start animation after a delay.
animation-fill-mode: Controls styles after animation ends.
transition-delay, transition-timing-function: More control for transitions.

Responsive & Resizable Design

Media queries allow your website to adapt to different screen sizes and devices by applying CSS conditionally based on the viewport’s width, height, resolution, and more. You can also allow users to resize certain elements using the resize property.

@media: Applies styles based on screen conditions.
Resize helps users adjust element size manually (works best with overflow).
Great for building flexible, user-friendly interfaces.

Basic Media Query

/* CSS */
@media (max-width: 600px) {
  .box {
    background: orange;
    font-size: 1rem;
  }
}

<div class="box">Resize the screen!</div>

Common Breakpoints

max-width: 480px → Mobile phones
max-width: 768px → Tablets
max-width: 1024px → Small laptops
min-width: 1025px → Desktops

Responsive + Resizable Box

/* CSS */
.responsive-box {
  background: #f0f0f0;
  padding: 1rem;
  text-align: center;
  overflow: auto;
  min-width: 200px;
  min-height: 100px;
  max-width: 100%;
  border: 2px dashed #555;
}

/* Tablet */
@media (max-width: 768px) {
  .responsive-box {
    background: lightcoral;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .responsive-box {
    background: lightgreen;
    font-size: 0.9rem;
  }
}

<div class="responsive-box">
  Resize me on different screens!
</div>

Z-Index and Stacking Context

The z-index property in CSS controls the vertical stacking order of elements. It determines which element appears on top when elements overlap.

Higher z-index = on top.
Only works on positioned elements (position: relative, absolute, fixed, or sticky).
Each stacking context is isolated—children are stacked relative to their closest stacking parent.

Basic Example

/* CSS */
.box {
  position: absolute;
  width: 120px;
  height: 120px;
  opacity: 0.8;
}

.box1 {
  top: 20px;
  left: 20px;
  background: red;
  z-index: 1;
}

.box2 {
  top: 50px;
  left: 50px;
  background: blue;
  z-index: 2;
}

.box3 {
  top: 80px;
  left: 80px;
  background: green;
  z-index: 3;
}

<div class="box box1">z-index: 1</div>
<div class="box box2">z-index: 2</div>
<div class="box box3">z-index: 3</div>

Stacking Context Triggers

A new stacking context is created when an element has:

position with z-index
opacity < 1
transform, filter, perspective, will-change, etc.

Visual Explanation

Try changing the z-index values and see which box appears on top!

CSS Variables (Custom Properties)

CSS variables allow you to store values (like colors, spacing, fonts, etc.) in reusable names. They make your stylesheets more maintainable and dynamic.

Defined using --variable-name syntax inside a selector (often :root).
Accessed with the var(--variable-name) function.
Support fallback values: var(--color, black)
They follow the cascade and inheritance rules of CSS.

Basic Example

/* CSS */
:root {
  --main-color: #3498db;
  --padding: 1rem;
}

.variable-box {
  background-color: var(--main-color);
  padding: var(--padding);
  color: white;
  border-radius: 8px;
  font-weight: bold;
}

<div class="variable-box">
  This box uses CSS variables!
</div>

Benefits

Update theme or layout by changing just one variable.
Can be re-declared in specific elements for scoped overrides.
Great for dark mode, spacing systems, and reusable themes.

Override Example

/* CSS */
:root {
  --main-color: teal;
}

.override {
  --main-color: crimson;
}

<div class="variable-box">Global Color (teal)</div>
<div class="variable-box override">Overridden Color (crimson)</div>

Pseudo-classes & Pseudo-elements

Pseudo-classes and pseudo-elements allow you to style elements based on their state or parts of them that aren’t directly in the HTML.

Pseudo-classes

Used to define a special state of an element.

:hover – when the mouse is over an element
:active – when the element is being clicked
:focus – when the element is focused (e.g., input field)
:nth-child(n) – selects the nth child of a parent
:first-child, :last-child
:checked, :disabled, :required, etc.

Pseudo-elements

Used to style specific parts of an element.

::before – insert content before an element
::after – insert content after an element
::first-letter – style the first letter
::first-line – style the first line
::selection – style selected text

Examples

/* CSS */
.pseudo-box {
  padding: 1rem;
  border: 2px solid teal;
  position: relative;
}

.pseudo-box:hover {
  background-color: #e0f7fa;
}

.pseudo-box::before {
  content: "★ ";
  color: gold;
}

<div class="pseudo-box">
  Hover me! I have a star before me.
</div>

CSS Specificity

CSS Specificity determines which style rules are applied when multiple rules target the same element. It's a hierarchy based on how specifically an element is selected.

Specificity Rules (from low to high)

Type selectors (e.g., div, p)
Class, attribute, and pseudo-class selectors (e.g., .class, [type="text"], :hover)
ID selectors (e.g., #header)
Inline styles (e.g., style="..." in HTML)
!important overrides everything (use with caution!)

Specificity Comparison

/* Type selector (low specificity) */
p {
  color: gray;
}

/* Class selector (medium specificity) */
.text {
  color: blue;
}

/* ID selector (high specificity) */
#mainText {
  color: red;
}

/* Inline style (highest) */
<p style="color: green;">Inline wins!</p>

<p id="mainText" class="text">This is a paragraph.</p>

Specificity Score

Think of specificity as a 4-digit score: (a, b, c, d)

a: Inline styles
b: ID selectors
c: Classes, attributes, pseudo-classes
d: Element selectors and pseudo-elements

Example: #nav ul li a:hover → (0,1,2,3)

Resource Quiz HTML JavaScript

Practice CSS

Try it Yourself Press ctrl+s to run

HTML

CSS

Live Preview