LAST UPDATED: August 25, 2025

CSS Hello World

Hello Everyone!

In this tutorial, we will learn how to write a basic Hello World styling using CSS.

 /* Save this as style.css */

body { background-color: #f0f0f0; font-family: Arial, sans-serif; }

h1 { color: #2c3e50; text-align: center; margin-top: 50px; }

Explanation:

Let's break down the CSS code above.

1. `body` Selector

This targets the entire page and sets a light gray background and a clean sans-serif font.

2. `h1` Selector

This styles the main heading:

color: Sets the text color to a dark blue-gray.
text-align: Centers the heading horizontally.
margin-top: Adds space above the heading.

3. Running the Code

To see the result:

Create an HTML file (e.g., index.html) with a <h1>Hello World!</h1> inside the body.
Link the CSS file using <link rel="stylesheet" href="style.css"> in the HTML <head>.
Open the HTML file in a browser to view the styled output.

Introduction to CSS

1.1 What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of HTML documents. It controls layout, colors, fonts, spacing, and overall visual design of web pages.

h1 {
    color: blue;
    text-align: center;
}

p {
    font-size: 16px;
    line-height: 1.5;
}

Task: Style a heading and paragraph using CSS to personalize your webpage.

1.2 CSS Syntax

CSS syntax consists of selectors and declaration blocks:

Selector: Targets the HTML element (e.g., h1, p)
Declaration Block: Contains one or more property-value pairs inside curly braces

selector {
    property: value;
}

1.3 CSS Selectors

Selectors define which HTML elements the styles apply to:

element selector: targets all elements of a type (e.g., p)
.class selector: targets elements with a specific class
#id selector: targets a specific element with an ID

.highlight {
    background-color: yellow;
}

#main-title {
    font-size: 24px;
}

1.4 CSS Properties

CSS properties define the styles applied to elements. Common properties include:

color: text color
background-color: background color
font-size: size of text
margin, padding: spacing around elements
border: outlines around elements

div {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 20px;
}

1.5 Inline, Internal, External CSS

CSS can be applied in three ways:

Inline CSS: added directly to HTML elements using the style attribute
Internal CSS: placed within a <style> tag in the HTML <head>
External CSS: written in a separate .css file and linked via <link>

<!-- Inline CSS -->
<h1 style="color: red;">Welcome</h1>

<!-- Internal CSS -->
<style>
    h1 { color: green; }
</style>

<!-- External CSS -->
<link rel="stylesheet" href="styles.css">

1.6 CSS Best Practices

Use external stylesheets for cleaner code and reusability
Organize styles using comments and consistent formatting
Use semantic class names for clarity
Minimize inline styles to separate content from presentation
Test across browsers for compatibility

/* Good practice */
.navbar {
    background-color: #333;
    color: white;
}

CSS Comments

1.1 Syntax of CSS Comment (`/* ... */`)

CSS comments are used to explain code, organize stylesheets, and temporarily disable rules. They do not affect how the page is rendered.

/* This is a CSS comment */
body {
    background-color: #fff; /* Sets background to white */
}

1.2 Single-line Comment

A single-line comment is written on one line using /* ... */. It’s useful for brief notes.

/* Set font size */
p {
    font-size: 16px;
}

1.3 Multi-line Comment

Multi-line comments span across several lines and are helpful for detailed explanations or section headers.

/*
    Header styles
    Includes logo and navigation
*/
.header {
    padding: 20px;
    background-color: #eee;
}

1.4 Best Practices for Comments

Use comments to explain complex or non-obvious code
Organize sections with clear comment headers
Avoid excessive commenting of obvious styles
Use comments to temporarily disable styles during testing
Keep comments concise and relevant

/* === Typography === */
h1, h2, h3 {
    font-family: 'Segoe UI', sans-serif;
}

CSS Selectors

1.1 Universal Selector (`*`)

The universal selector targets all elements on the page. It's useful for applying global styles.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

<body>
    <h1>Welcome</h1>
    <p>This is a paragraph.</p>
</body>

1.2 Type Selector (element)

Targets all instances of a specific HTML element.

p {
    font-size: 16px;
    color: #333;
}

<p>This is styled using a type selector.</p>

1.3 Class Selector (`.class`)

Targets elements with a specific class attribute.

.highlight {
    background-color: yellow;
}

<p class="highlight">This paragraph is highlighted.</p>

1.4 ID Selector (`#id`)

Targets a single element with a specific ID. IDs must be unique within a page.

#main-header {
    font-size: 24px;
    text-align: center;
}

<h1 id="main-header">Main Heading</h1>

1.5 Group Selector (`,`)

Applies the same styles to multiple selectors.

h1, h2, h3 {
    font-family: 'Arial', sans-serif;
}

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

1.6 Descendant Selector (space)

Targets elements that are nested inside another element.

div p {
    color: blue;
}

<div>
    <p>This paragraph is inside a div.</p>
</div>

1.7 Child Selector (`>`)

Targets direct children of an element.

ul > li {
    list-style-type: square;
}

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

1.8 Adjacent Sibling Selector (`+`)

Targets an element that immediately follows another.

h2 + p {
    font-style: italic;
}

<h2>Subheading</h2>
<p>This paragraph is adjacent to h2.</p>

1.9 General Sibling Selector (`~`)

Targets all siblings that follow a specified element.

h2 ~ p {
    color: gray;
}

<h2>Title</h2>
<p>First sibling paragraph.</p>
<p>Second sibling paragraph.</p>

1.10 Attribute Selectors

Targets elements based on the presence or value of an attribute.

input[type="text"] {
    border: 1px solid #ccc;
}

<input type="text" placeholder="Enter your name">

1.11 Pseudo-classes (`:hover`, `:nth-child`, etc.)

Targets elements in a specific state or position.

a:hover {
    color: red;
}

li:nth-child(2) {
    font-weight: bold;
}

<a href="#">Hover over me</a>
<ul>
    <li>First item</li>
    <li>Second item</li>
</ul>

1.12 Pseudo-elements (`::before`, `::after`)

Targets parts of an element that don’t exist in the DOM, allowing you to insert content.

p::before {
    content: "Note: ";
    font-weight: bold;
}

<p>This is a paragraph with a pseudo-element.</p>

CSS Color Properties

1.1 Color Names

CSS supports over 140 named colors like red, blue, green, and orange.

h1 {
    color: blue;
}

<h1>This heading is blue</h1>

1.2 HEX, RGB, RGBA

These formats allow precise color control:

HEX: #ff0000 for red
RGB: rgb(255, 0, 0)
RGBA: adds transparency, e.g. rgba(255, 0, 0, 0.5)

p {
    color: #ff0000;
    background-color: rgba(0, 0, 0, 0.1);
}

<p>This paragraph uses HEX and RGBA colors</p>

1.3 HSL, HSLA

HSL stands for Hue, Saturation, Lightness. HSLA adds Alpha (transparency).

div {
    background-color: hsl(120, 100%, 50%);
    color: hsla(0, 100%, 50%, 0.8);
}

<div>This uses HSL and HSLA colors</div>

1.4 Text & Background Colors

Use color for text and background-color for backgrounds.

body {
    background-color: #f0f0f0;
}

h2 {
    color: darkgreen;
}

<body>
    <h2>Styled heading</h2>
</body>

1.5 Gradients (Linear, Radial)

Gradients create smooth transitions between colors. CSS supports linear and radial gradients.

Linear Gradient

.linear-box {
    background: linear-gradient(to right, red, yellow);
    padding: 20px;
    color: white;
}

<div class="linear-box">Linear Gradient Background</div>

Radial Gradient

.radial-box {
    background: radial-gradient(circle, blue, white);
    padding: 20px;
    color: black;
}

<div class="radial-box">Radial Gradient Background</div>

1.6 Transparent & CurrentColor

transparent makes an element see-through. currentColor uses the element’s text color for other properties like borders or outlines.

.transparent-box {
    background-color: transparent;
    border: 2px solid currentColor;
    color: teal;
    padding: 10px;
}

<div class="transparent-box">Transparent background with teal border</div>

CSS Text Properties

Text properties in CSS allow you to control how text appears on your webpage — including color, alignment, spacing, decoration, and more. Below are the most commonly used text-related CSS properties explained in simple terms.

1.1 Text Color

The color property changes the color of text. You can use:

Named colors like red, blue, green
HEX codes like #ff0000
RGB values like rgb(255, 0, 0)
HSL values like hsl(0, 100%, 50%)

p { color: darkblue; }

<p>This text is dark blue.</p>

1.2 Text Alignment

The text-align property controls horizontal alignment of text inside its container.

left (default)
center
right
justify (spreads text evenly)

h1 { text-align: center; }

<h1>Centered Heading</h1>

1.3 Text Decoration

The text-decoration property adds or removes lines from text.

none – removes underline from links
underline
overline
line-through

a { text-decoration: none; }

<a href="#">Link without underline</a>

1.4 Text Transformation

The text-transform property changes the case of text.

uppercase
lowercase
capitalize (first letter of each word)

p { text-transform: uppercase; }

<p>this will appear in uppercase</p>

1.5 Text Indentation

The text-indent property adds space at the beginning of the first line of a paragraph.

p { text-indent: 30px; }

<p>This paragraph starts with an indent.</p>

1.6 Letter Spacing & Word Spacing

These properties control spacing between letters and words.

letter-spacing: space between characters
word-spacing: space between words

h2 { letter-spacing: 2px; word-spacing: 10px; }

<h2>Spaced out heading text</h2>

1.7 Line Height

The line-height property sets the vertical space between lines of text. It improves readability.

p { line-height: 1.8; }

<p>This paragraph has increased line spacing for better readability.</p>

1.8 White Space & Word Wrap

These properties control how text behaves when it reaches the edge of its container.

white-space: nowrap – prevents text from wrapping
word-wrap: break-word – breaks long words to fit

.box { white-space: nowrap; word-wrap: break-word; }

<div class="box">ThisIsAVeryLongWordThatWillBreakIfNeeded</div>

1.9 Text Shadow

The text-shadow property adds shadow behind text. You can control:

Horizontal offset
Vertical offset
Blur radius
Shadow color

h1 { text-shadow: 2px 2px 5px gray; }

<h1>Shadowed Heading</h1>

Try It Yourself

To test these properties, create a file named style.css and link it to your HTML file using:

<link rel="stylesheet" href="style.css">

Then open your HTML file in a browser to see the styles in action!

CSS Font Properties

Fonts define the look and feel of text on a webpage. CSS gives you powerful tools to control font family, size, style, weight, spacing, and more. This guide walks you through each font-related property with examples.

1.1 Font Family

The font-family property sets the typeface for text. You can list multiple fonts as fallbacks.

p {
  font-family: "Segoe UI", Arial, sans-serif;
}

<p>This paragraph uses a modern font stack.</p>

1.2 Font Size

The font-size property controls how big or small the text appears. Common units include:

px – pixels
em – relative to parent
rem – relative to root
% – percentage

h1 {
  font-size: 36px;
}

<h1>Large Heading</h1>

1.3 Font Style (normal, italic, oblique)

The font-style property changes the slant of text.

normal
italic
oblique

em {
  font-style: italic;
}

<em>This text is italicized.</em>

1.4 Font Weight (bold, lighter, 100–900)

The font-weight property controls how thick or thin the text appears.

normal, bold, lighter
Numeric values: 100 (thin) to 900 (extra bold)

strong {
  font-weight: bold;
}

h2 {
  font-weight: 300;
}

<strong>Bold text</strong>
<h2>Lightweight heading</h2>

1.5 Font Variant (small-caps)

The font-variant property displays text in small capital letters.

p {
  font-variant: small-caps;
}

<p>This text appears in small caps.</p>

1.6 Line Height

The line-height property sets vertical spacing between lines of text. It improves readability.

p {
  line-height: 1.6;
}

<p>This paragraph has extra line spacing.</p>

1.7 Font Shorthand Property

The font shorthand lets you set multiple font properties in one line: font-style font-variant font-weight font-size/line-height font-family

p {
  font: italic small-caps bold 16px/1.5 "Georgia", serif;
}

<p>Styled using font shorthand.</p>

1.8 Web Safe Fonts & Fallbacks

Web-safe fonts are commonly available across devices. Always include fallback fonts to ensure compatibility.

body {
  font-family: "Verdana", "Tahoma", sans-serif;
}

<body>Text using web-safe fonts</body>

1.9 Google Fonts & Custom Fonts

You can use fonts from Google Fonts or host your own. To use Google Fonts:

Visit fonts.google.com
Select a font and copy the import link
Paste it in your HTML <head>

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

body {
  font-family: 'Roboto', sans-serif;
}

<body>Text styled with Google Fonts</body>

CSS Background Properties

CSS background properties allow you to control the appearance of an element’s background. You can set colors, images, gradients, and control how they behave. This guide explains each background property with examples for beginners.

1.1 Background Color

Sets the background color of an element using named colors, HEX, RGB, or HSL values.

div {
  background-color: lightblue;
}

<div>This box has a light blue background.</div>

1.2 Background Image

Displays an image as the background of an element.

body {
  background-image: url('background.jpg');
}

<body>Page with background image</body>

1.3 Background Repeat

Controls whether the background image repeats.

repeat – default, repeats both directions
no-repeat – shows image once
repeat-x – repeats horizontally
repeat-y – repeats vertically

div {
  background-image: url('pattern.png');
  background-repeat: no-repeat;
}

<div>Pattern shown once</div>

1.4 Background Position

Sets the starting position of the background image.

div {
  background-image: url('logo.png');
  background-position: top right;
}

<div>Logo positioned at top-right</div>

1.5 Background Size

Controls the size of the background image.

cover – fills the container
contain – fits inside the container
Custom values like 100px 200px

div {
  background-image: url('banner.jpg');
  background-size: cover;
}

<div>Banner fills the box</div>

1.6 Background Attachment

Determines whether the background scrolls with the page or stays fixed.

scroll – default
fixed – stays in place
local – scrolls with element content

body {
  background-image: url('stars.jpg');
  background-attachment: fixed;
}

<body>Stars stay fixed while scrolling</body>

1.7 Multiple Backgrounds

You can layer multiple background images using commas.

div {
  background-image: url('texture.png'), url('overlay.png');
  background-repeat: no-repeat, repeat;
  background-position: center, top left;
}

<div>Two layered backgrounds</div>

1.8 Background Shorthand

Combines multiple background properties into one line.

div {
  background: url('image.jpg') no-repeat center/cover;
}

<div>Styled using background shorthand</div>

1.9 CSS Gradients (linear, radial, conic)

Gradients create smooth transitions between colors without using images.

Linear: to right, to bottom
Radial: circles from center
Conic: rotates around a point

.linear {
  background: linear-gradient(to right, red, yellow);
}

.radial {
  background: radial-gradient(circle, blue, white);
}

.conic {
  background: conic-gradient(from 0deg, red, green, blue);
}

<div class="linear">Linear Gradient</div>
<div class="radial">Radial Gradient</div>
<div class="conic">Conic Gradient</div>

CSS Box Model

The CSS Box Model is the foundation of layout and spacing in web design. Every HTML element is treated as a rectangular box made up of four layers: content, padding, border, and margin. Understanding how these layers interact helps you control spacing and alignment precisely.

1.1 Content Area

This is the innermost part of the box where text, images, or other content appears. Its size is controlled by properties like width and height.

div {
  width: 200px;
  height: 100px;
}

<div>This is the content area.</div>

1.2 Padding

Padding is the space between the content and the border. It pushes the content inward.

div {
  padding: 20px;
}

<div>This box has padding around the content.</div>

1.3 Border

The border wraps around the padding and content. You can style it with color, width, and type.

div {
  border: 2px solid black;
}

<div>This box has a black border.</div>

1.4 Margin

Margin is the space outside the border. It separates the element from others around it.

div {
  margin: 30px;
}

<div>This box has space around it.</div>

1.5 Outline

Outline is similar to border but does not affect layout. It sits outside the border and is often used for accessibility or focus styling.

div {
  outline: 2px dashed red;
}

<div>This box has a red dashed outline.</div>

1.6 Box-Sizing (content-box vs border-box)

The box-sizing property controls how the total width and height of an element are calculated.

content-box (default): width includes only content
border-box: width includes content + padding + border

div {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 5px solid gray;
}

<div>This box uses border-box sizing.</div>

1.7 Box Shadow

Adds shadow effects around the box for depth and emphasis. You can control:

Horizontal and vertical offset
Blur radius
Shadow color

div {
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}

<div>This box has a subtle shadow.</div>

CSS Positioning

CSS positioning helps you move elements around on a webpage. You can place boxes exactly where you want them — at the top, bottom, center, or even make them stay in place while scrolling. Let’s look at each type of positioning one by one.

1.1 Static

This is the default. The element stays in its normal spot on the page. You can't move it using top, left, right, or bottom.

div {
  position: static;
}

<div>This box stays in its natural place.</div>

1.2 Relative

The element stays in its normal spot, but you can nudge it around using top, left, right, or bottom.

div {
  position: relative;
  top: 20px;
  left: 10px;
}

<div>This box moves 20px down and 10px right.</div>

1.3 Absolute

The element is taken out of the normal flow and placed exactly where you want it. It’s positioned based on its nearest parent that has positioning.

div {
  position: absolute;
  top: 50px;
  right: 20px;
}

<div>This box is placed 50px from the top and 20px from the right.</div>

1.4 Fixed

The element stays in the same spot on the screen, even when you scroll. Great for sticky buttons or headers.

div {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

<div>This box stays at the bottom-right corner.</div>

1.5 Sticky

The element acts like relative at first, but when you scroll past it, it sticks to the top (or wherever you set it).

div {
  position: sticky;
  top: 0;
}

<div>This box sticks to the top when scrolling.</div>

1.6 Z-Index

Z-index controls which box appears on top when elements overlap. Bigger numbers come to the front.

div {
  position: absolute;
  z-index: 5;
}

<div>This box appears above others with lower z-index.</div>

CSS Float, Clear & Visibility

These CSS properties help you control how elements move and appear on the page. Float lets elements sit side by side, Clear helps avoid overlap, and Visibility controls whether something is shown or hidden.

10.1 Float Left

Moves the element to the left side, letting other content wrap around it.

img {
  float: left;
}

<img src="photo.jpg"> Text wraps around this image on the right.

10.2 Float Right

Moves the element to the right side, and other content wraps on the left.

img {
  float: right;
}

<img src="photo.jpg"> Text wraps around this image on the left.

10.3 Float None

Removes any floating. The element stays in its normal position.

img {
  float: none;
}

<img src="photo.jpg"> This image does not float.

10.4 Clear Left

Prevents the element from sitting next to floated elements on the left.

div {
  clear: left;
}

<div>This box moves below any left-floated items.</div>

10.5 Clear Right

Prevents the element from sitting next to floated elements on the right.

div {
  clear: right;
}

<div>This box moves below any right-floated items.</div>

10.6 Clear Both

Moves the element below any floated items on both sides.

div {
  clear: both;
}

<div>This box clears both left and right floats.</div>

10.7 Visibility: Visible

The element is shown on the page. This is the default.

p {
  visibility: visible;
}

<p>This paragraph is visible.</p>

10.8 Visibility: Hidden

The element is hidden but still takes up space.

p {
  visibility: hidden;
}

<p>This paragraph is hidden but still affects layout.</p>

10.9 Visibility: Collapse

Used mostly with table rows. It hides the element and removes its space.

tr {
  visibility: collapse;
}

<tr>This table row is collapsed and doesn’t take space.</tr>

CSS Display Properties

The display property in CSS controls how elements are shown on the page — whether they take up full width, sit side by side, or are hidden. Let’s explore the most common display types with simple examples.

11.1 Display: Block

Block elements take up the full width available and start on a new line. Examples: <div>, <p>, <h1>.

div {
  display: block;
}

<div>This box stretches across the page.</div>

11.2 Display: Inline

Inline elements sit next to each other and only take up as much space as needed. Examples: <span>, <a>.

span {
  display: inline;
}

<span>This text flows inline.</span>

11.3 Display: Inline-Block

Like inline, but you can set width and height. It sits next to other elements but behaves like a block.

div {
  display: inline-block;
  width: 100px;
  height: 50px;
}

<div>This box is inline but sized.</div>

11.4 Display: Flex

Flex makes a container flexible. It helps arrange items in rows or columns and control spacing easily.

.container {
  display: flex;
}

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

11.5 Display: Inline-Flex

Works like flex but the container behaves like an inline element — it sits beside other content.

.container {
  display: inline-flex;
}

<div class="container">Inline-flex box</div>

11.6 Display: Grid

Grid lets you create rows and columns easily. It’s great for building layouts.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

<div class="grid">
  <div>Column 1</div>
  <div>Column 2</div>
</div>

11.7 Display: Inline-Grid

Like grid, but the container behaves like an inline element.

.grid {
  display: inline-grid;
}

<div class="grid">Inline-grid layout</div>

11.8 Display: None

Hides the element completely — it won’t show up and won’t take any space.

p {
  display: none;
}

<p>This paragraph is hidden.</p>

CSS Flexbox

Flexbox is a powerful layout tool in CSS. It helps you arrange items in rows or columns, control spacing, and make your design responsive. Flexbox has two parts: Flex Container (the parent) and Flex Items (the children).

Flex Container

flex-direction

Sets the direction of items: row, column, or reversed.

.box {
  display: flex;
  flex-direction: row;
}

<div class="box"><div>Item 1</div><div>Item 2</div></div>

flex-wrap

Allows items to wrap onto the next line if needed.

.box {
  flex-wrap: wrap;
}

justify-content

Controls horizontal alignment: left, center, space-between, etc.

.box {
  justify-content: center;
}

align-items

Controls vertical alignment of items inside the container.

.box {
  align-items: flex-start;
}

align-content

Aligns multiple rows of items when wrapping is used.

.box {
  align-content: space-around;
}

gap

Adds space between items.

.box {
  gap: 20px;
}

Flex Items

flex-grow

Makes an item grow to fill available space.

.item {
  flex-grow: 1;
}

flex-shrink

Makes an item shrink if space is tight.

.item {
  flex-shrink: 1;
}

flex-basis

Sets the starting size of an item before it grows or shrinks.

.item {
  flex-basis: 150px;
}

align-self

Overrides vertical alignment for one item.

.item {
  align-self: center;
}

order

Changes the order of items without changing the HTML.

.item {
  order: 2;
}

CSS Grid Layout

CSS Grid is a layout system that lets you arrange items in rows and columns. It’s great for building clean, organized designs. Grid has two parts: the Grid Container (the parent) and Grid Items (the children).

Grid Container

grid-template-columns

Defines how many columns you want and their sizes.

.grid {
  display: grid;
  grid-template-columns: 100px 100px 100px;
}

<div class="grid"><div>1</div><div>2</div><div>3</div></div>

grid-template-rows

Defines how many rows you want and their sizes.

.grid {
  grid-template-rows: 50px 50px;
}

gap / row-gap / column-gap

Adds space between grid items.

.grid {
  gap: 20px;
  row-gap: 10px;
  column-gap: 15px;
}

justify-items

Aligns items horizontally inside their grid cells.

.grid {
  justify-items: center;
}

align-items

Aligns items vertically inside their grid cells.

.grid {
  align-items: start;
}

justify-content

Aligns the whole grid horizontally inside the container.

.grid {
  justify-content: space-between;
}

align-content

Aligns the whole grid vertically inside the container.

.grid {
  align-content: center;
}

grid-auto-rows

Sets the height for rows that are created automatically.

.grid {
  grid-auto-rows: 100px;
}

grid-auto-columns

Sets the width for columns that are created automatically.

.grid {
  grid-auto-columns: 150px;
}

Grid Items

grid-column

Controls how many columns an item spans.

.item {
  grid-column: 1 / 3;
}

grid-row

Controls how many rows an item spans.

.item {
  grid-row: 1 / 2;
}

grid-area

Lets you name areas and place items in them.

.item {
  grid-area: header;
}

justify-self

Aligns one item horizontally inside its cell.

.item {
  justify-self: end;
}

align-self

Aligns one item vertically inside its cell.

.item {
  align-self: center;
}

CSS Transform Properties

The transform property in CSS lets you move, rotate, resize, or distort elements. It’s great for adding visual effects and animations. Below are the most common transform functions explained simply.

translate(x, y)

Moves an element from its original position. x moves it left/right, y moves it up/down.

.box {
  transform: translate(50px, 20px);
}

<div class="box">This box is moved right and down.</div>

rotate(angle)

Rotates the element by a given angle. Use deg for degrees.

.box {
  transform: rotate(45deg);
}

<div class="box">This box is rotated 45 degrees.</div>

scale(x, y)

Changes the size of an element. x is width, y is height. Use values like 1.5 to grow or 0.5 to shrink.

.box {
  transform: scale(1.5, 1.2);
}

<div class="box">This box is stretched wider and taller.</div>

skew(x, y)

Tilts the element along the X and Y axes. It creates a slanted effect.

.box {
  transform: skew(20deg, 10deg);
}

<div class="box">This box is skewed diagonally.</div>

matrix()

Combines multiple transformations into one. It uses six values: scale, skew, and translate. This is more advanced and rarely used by beginners.

.box {
  transform: matrix(1, 0.5, 0.5, 1, 30, 20);
}

<div class="box">This box uses a complex matrix transform.</div>

perspective()

Adds depth to 3D transforms. It makes elements look closer or farther away.

.scene {
  perspective: 500px;
}

<div class="scene"><div class="box">3D effect box</div></div>

CSS Transitions

CSS transitions let you smoothly animate changes in style — like fading colors, moving boxes, or resizing elements. Instead of changing instantly, transitions make things change gradually over time. Let’s look at the key properties that control transitions.

transition-property

This tells the browser which CSS property you want to animate — like background-color, width, or transform.

.box {
  transition-property: background-color;
}

<div class="box">Hover to change color smoothly</div>

transition-duration

This sets how long the transition takes. Use seconds (s) or milliseconds (ms).

.box {
  transition-duration: 0.5s;
}

<div class="box">Color changes in half a second</div>

transition-timing-function

This controls the speed curve — how fast or slow the transition happens. Common values:

ease – starts slow, speeds up, then slows down
linear – same speed throughout
ease-in – starts slow
ease-out – ends slow
ease-in-out – slow at start and end

.box {
  transition-timing-function: ease-in-out;
}

transition-delay

This sets how long to wait before the transition starts.

.box {
  transition-delay: 1s;
}

<div class="box">Transition starts after 1 second</div>

Shorthand transition

You can combine all transition settings into one line using shorthand: property duration timing-function delay

.box {
  transition: background-color 0.5s ease-in 0.2s;
}

<div class="box">Smooth color change with delay</div>

CSS Animations

CSS animations let you bring elements to life by changing their styles over time. You can move, fade, rotate, or resize things smoothly. Animations are made using @keyframes and controlled with animation properties.

@keyframes

This defines what happens during the animation — like starting and ending styles.

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

<div class="box">This box will slide right.</div>

animation-name

This tells the browser which keyframe animation to use.

.box {
  animation-name: slide;
}

animation-duration

Sets how long the animation takes to complete. Use seconds (s) or milliseconds (ms).

.box {
  animation-duration: 2s;
}

animation-timing-function

Controls the speed pattern of the animation. Common values:

ease – starts and ends slowly
linear – same speed throughout
ease-in – starts slow
ease-out – ends slow
ease-in-out – slow at both ends

.box {
  animation-timing-function: ease-in-out;
}

animation-delay

Sets how long to wait before the animation starts.

.box {
  animation-delay: 1s;
}

animation-iteration-count

Controls how many times the animation runs. Use a number or infinite.

.box {
  animation-iteration-count: infinite;
}

animation-direction

Sets the direction of the animation. Options:

normal – forward
reverse – backward
alternate – forward then backward
alternate-reverse – backward then forward

.box {
  animation-direction: alternate;
}

animation-fill-mode

Controls how styles are applied before and after the animation. Common values:

none
forwards – keeps end style
backwards – applies start style before animation begins
both – applies both start and end styles

.box {
  animation-fill-mode: forwards;
}

animation-play-state

Controls whether the animation is running or paused.

.box {
  animation-play-state: paused;
}

animation (shorthand)

You can combine all animation settings into one line: name duration timing-function delay iteration-count direction fill-mode

.box {
  animation: slide 2s ease-in 0.5s infinite alternate forwards;
}

CSS Media Queries

Media queries help your website look good on all devices — phones, tablets, laptops, and big screens. They let you apply different styles depending on screen size, orientation, or device type.

@media syntax

The basic format starts with @media followed by a condition and then the CSS rules.

@media (condition) {
  /* CSS rules here */
}

min-width

Applies styles when the screen is at least a certain width. Great for larger screens.

@media (min-width: 600px) {
  body {
    background-color: lightblue;
  }
}

max-width

Applies styles when the screen is smaller than a certain width. Perfect for mobile devices.

@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
}

Combining queries (and, ,)

You can combine conditions using and or commas:

and – both conditions must be true
, – either condition can be true

@media (min-width: 600px) and (orientation: landscape) {
  body {
    background-color: peachpuff;
  }
}

Orientation (portrait, landscape)

Detects if the device is held vertically (portrait) or horizontally (landscape).

@media (orientation: portrait) {
  .menu {
    display: none;
  }
}

Media types (all, screen, print)

Targets different kinds of devices:

all – applies to everything
screen – for monitors, phones, tablets
print – for printed pages

@media print {
  body {
    color: black;
    background: white;
  }
}

Example usage

Here’s a full example that changes layout based on screen size:

/* Default styles */
.container {
  display: block;
}

/* Tablet and up */
@media (min-width: 768px) {
  .container {
    display: flex;
  }
}

Advanced CSS

Advanced CSS helps you create smarter, more interactive, and flexible designs. It includes special selectors, reusable variables, and dynamic calculations. Let’s break it down into easy parts.

Pseudo-classes

:hover

Styles an element when the mouse is over it.

button:hover {
  background-color: lightblue;
}

:active

Applies styles when the element is being clicked.

button:active {
  transform: scale(0.95);
}

:focus

Targets an input or button when it's selected or typed into.

input:focus {
  border-color: green;
}

:first-child / :last-child

Targets the first or last child inside a parent.

li:first-child {
  font-weight: bold;
}

:nth-child()

Targets specific children by number or pattern.

li:nth-child(2n) {
  background-color: #f0f0f0;
}

:not()

Excludes elements from styling.

p:not(.highlight) {
  color: gray;
}

Pseudo-elements

::before

Adds content before an element.

h2::before {
  content: "★ ";
}

::after

Adds content after an element.

h2::after {
  content: " ✔";
}

::first-letter

Styles the first letter of a block of text.

p::first-letter {
  font-size: 200%;
  color: red;
}

::first-line

Styles the first line of a paragraph.

p::first-line {
  font-weight: bold;
}

CSS Variables

--variable syntax

Define reusable values using --name.

:root {
  --main-color: #3498db;
}

var() function

Use a variable with var(--name).

h1 {
  color: var(--main-color);
}

Scope and inheritance

Variables can be global or local. Children inherit from parents unless overridden.

.section {
  --text-color: darkgreen;
}
p {
  color: var(--text-color);
}

Other Advanced Concepts

calc()

Performs math inside CSS.

.box {
  width: calc(100% - 50px);
}

clamp()

Sets a flexible value with a minimum and maximum.

h1 {
  font-size: clamp(1rem, 2vw, 3rem);
}

CSS Functions (min(), max(), etc.)

Choose the smallest or largest value from a list.

.box {
  width: min(300px, 80%);
}

Custom Fonts (@font-face)

Load your own fonts from a file.

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2");
}

Advanced Selectors (>, +, ~)

Target elements based on their relationship:

> – direct child
+ – next sibling
~ – all following siblings

ul > li {
  color: blue;
}
h2 + p {
  margin-top: 0;
}

CSS Counters

Automatically number items using counters.

ol {
  counter-reset: item;
}
li::before {
  counter-increment: item;
  content: counter(item) ". ";
}

CSS Tasks & Projects for Practice

The best way to learn CSS is by doing! Below are small tasks, mini projects, and bigger challenges that help you apply CSS concepts in fun and useful ways.

Small Tasks

Style a Navigation Bar

Create a horizontal menu with links. Add spacing, hover effects, and background color.

nav a {
  padding: 10px;
  text-decoration: none;
  color: white;
  background-color: navy;
}

Create Buttons with Hover Effects

Design buttons that change color or size when hovered over.

button:hover {
  background-color: green;
  transform: scale(1.1);
}

Design a Simple Card Layout

Make a card with an image, title, and description using borders and padding.

.card {
  border: 1px solid #ccc;
  padding: 15px;
  width: 250px;
}

Mini Projects

Profile Card with Flexbox

Use Flexbox to align a profile picture and user info side by side.

.profile {
  display: flex;
  align-items: center;
}

Photo Gallery with Grid Layout

Create a responsive image gallery using CSS Grid.

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

Responsive Pricing Table

Design a pricing table that adjusts layout on smaller screens.

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

Bigger Projects

Portfolio Website

Build a personal site with sections for About, Projects, and Contact. Use Flexbox and media queries.

Landing Page with Animations

Create a stylish landing page with animated headings, buttons, and scroll effects.

h1 {
  animation: fadeIn 2s ease-in;
}

CSS-Only E-commerce Product Page

Design a product listing page with cards, filters, and hover effects — all using pure CSS.