Menu
Complete CSS Course

Master CSS Styling

From Basics to Advanced - Learn to Create Beautiful Websites 🎨

View Contents
01

Introduction to CSS

What is CSS?

CSS stands for Cascading Style Sheets. CSS describes how HTML elements are displayed on screen, paper, or in other media.

  • CSS saves work - controls layout of multiple pages at once
  • External stylesheets stored in CSS files
  • CSS controls colors, fonts, spacing, and layout
  • CSS makes websites responsive and beautiful
Why Use CSS?
Separation of Concerns Maintainability Reusability
Performance Responsive Design
History of CSS

1996 CSS1 - First specification

1998 CSS2 - Added positioning, z-index

2011 CSS3 - Modular, animations, new selectors

Present CSS continues to evolve

02

CSS Syntax and Selectors

CSS Syntax

A CSS rule consists of a selector and a declaration block:

selector { property: value; property: value; } /* Example */ p { color: red; font-size: 16px; }

CSS Selectors

Element: p { color: blue; }
ID: #header { background: gray; }
Class: .intro { font-weight: bold; }
Universal: * { margin: 0; }
Grouping: h1, h2, h3 { color: navy; }
Descendant: div p { color: red; }
Child: div > p { color: green; }
Adjacent: h1 + p { margin-top: 0; }
Sibling: h1 ~ p { color: purple; }
Attribute: a[target="_blank"] { }
03

CSS How To (Adding CSS)

Three Ways to Insert CSS

1. External CSS (Recommended)
<!-- In HTML head --> <link rel="stylesheet" href="styles.css"> /* styles.css */ body { background-color: lightblue; }
2. Internal CSS
<style> body { background-color: lightblue; } </style>
3. Inline CSS
<p style="color: red; font-size: 20px;">Text</p>
CSS Precedence (Specificity)
  1. Inline styles - Highest priority
  2. Internal and External - Last one wins
  3. Browser default - Lowest priority
/* !important overrides everything */ color: red !important;
04

CSS Colors

Color Values

Color Names: red, blue, green
HEX: #ff0000, #f00
RGB: rgb(255, 0, 0)
RGBA: rgba(255, 0, 0, 0.5)
HSL: hsl(0, 100%, 50%)
HSLA: hsla(0, 100%, 50%, 0.5)
Color Properties:
color background-color border-color opacity
05

CSS Backgrounds

Background Properties

/* Individual Properties */ background-color: lightblue; background-image: url('image.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; /* Shorthand */ background: #fff url('bg.jpg') no-repeat center/cover; /* Multiple Backgrounds */ background-image: url('img1.jpg'), url('img2.jpg'); background-position: left top, right bottom;
Background Values:
repeat repeat-x repeat-y no-repeat cover contain fixed scroll
06

CSS Borders

Border Properties

/* Border Width */ border-width: 5px; border-width: 5px 10px 15px 20px; /* top right bottom left */ /* Border Style */ border-style: solid; /* Values: solid, dashed, dotted, double, groove, ridge, inset, outset, none, hidden */ /* Border Color */ border-color: red; /* Shorthand */ border: 2px solid red; /* Individual Sides */ border-top: 1px solid black; border-right: 2px dashed red; border-bottom: 3px dotted blue; border-left: 4px double green; /* Border Radius */ border-radius: 10px; /* Rounded corners */ border-radius: 50%; /* Circle */ border-radius: 10px 20px 30px 40px;
Solid
Dashed
Dotted
Double
Rounded
07

CSS Margins and Padding

CSS Margins

Margins create space around elements, outside borders:

/* All sides */ margin: 25px; /* Top/Bottom, Left/Right */ margin: 25px 50px; /* Top, Left/Right, Bottom */ margin: 25px 50px 75px; /* Top Right Bottom Left */ margin: 25px 50px 75px 100px; /* Individual Sides */ margin-top: 25px; margin-right: 50px; margin-bottom: 75px; margin-left: 100px; /* Auto Centering */ margin: 0 auto;

CSS Padding

Padding creates space around content, inside borders:

/* Same syntax as margin */ padding: 25px; padding: 25px 50px; padding: 25px 50px 75px; padding: 25px 50px 75px 100px; /* Individual Sides */ padding-top: 25px; padding-right: 50px; padding-bottom: 75px; padding-left: 100px;
08

CSS Box Model

Understanding the Box Model

Every HTML element is a box consisting of:

Margin (Outside)
Border
Padding
Content
Box Sizing
/* Default */ box-sizing: content-box; /* Width/height = content only */ /* Recommended */ box-sizing: border-box; /* Width/height = content + padding + border */ /* Global Reset */ * { box-sizing: border-box; }
Width and Height
width: 300px;
height: 200px;
max-width: 100%;
min-width: 200px;
max-height: 500px;
min-height: 100px;
09

CSS Text Styling

Text Properties

color: red; text-align: center; /* left, right, center, justify */ text-decoration: underline; /* none, underline, overline, line-through */ text-transform: uppercase; /* uppercase, lowercase, capitalize */ text-indent: 50px; letter-spacing: 2px; word-spacing: 5px; line-height: 1.6; white-space: nowrap; /* normal, nowrap, pre, pre-wrap */ text-shadow: 2px 2px 5px gray;
Underlined
Uppercase
Spaced
Shadow
Text Overflow
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
10

CSS Fonts

Font Properties

font-family: Arial, sans-serif; font-size: 16px; /* px, em, rem, %, vw */ font-weight: bold; /* normal, bold, 100-900 */ font-style: italic; /* normal, italic, oblique */ font-variant: small-caps; /* Shorthand */ font: italic bold 16px/1.5 Arial, sans-serif;
Web Fonts (Google Fonts)
<!-- In HTML head --> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> /* In CSS */ body { font-family: 'Roboto', sans-serif; }
Custom Fonts (@font-face)
@font-face { font-family: 'MyFont'; src: url('myfont.woff2') format('woff2'); } body { font-family: 'MyFont', sans-serif; }
11

CSS Position

Position Values

static (Default)

Follows normal document flow

relative
position: relative; top: 10px; left: 20px;

Positioned relative to normal position

absolute
position: absolute; top: 0; right: 0;

Positioned relative to nearest positioned ancestor

fixed
position: fixed; bottom: 20px; right: 20px;

Positioned relative to viewport, stays on scroll

sticky
position: sticky; top: 0;

Toggles between relative and fixed based on scroll

Z-Index
z-index: 1; /* Higher = front */ z-index: -1; /* Behind */ /* Only works with positioned elements */
12

CSS Flexbox

Flexbox Basics

Flexbox is a one-dimensional layout method:

.container { display: flex; }
Container Properties
flex-direction: row; /* row, row-reverse, column, column-reverse */ flex-wrap: wrap; /* nowrap, wrap, wrap-reverse */ justify-content: center; /* flex-start, flex-end, center, space-between, space-around, space-evenly */ align-items: center; /* stretch, flex-start, flex-end, center, baseline */ gap: 10px;
Item Properties
flex-grow: 1; /* Grow to fill space */ flex-shrink: 1; /* Can shrink */ flex-basis: 200px; /* Initial size */ flex: 1; /* Shorthand */ align-self: flex-start; order: 2;
Flexbox Demo:
Item 1
Item 2 (flex: 2)
Item 3
13

CSS Grid

Grid Basics

.container { display: grid; }
Container Properties
grid-template-columns: 200px 200px 200px; grid-template-columns: 1fr 2fr 1fr; /* Fractional units */ grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px 200px; gap: 20px; justify-items: center; align-items: center;
Item Properties
grid-column: 1 / 3; /* Span from line 1 to 3 */ grid-column: span 2; /* Span 2 columns */ grid-row: 1 / 3; grid-area: 1 / 1 / 3 / 3; /* row-start / col-start / row-end / col-end */
Grid Demo:
1
2
3
4 (spans 2)
5
14

CSS Transitions

Transition Properties

transition-property: all; /* Which property */ transition-duration: 0.3s; /* How long */ transition-timing-function: ease; /* ease, linear, ease-in, ease-out */ transition-delay: 0.2s; /* Delay */ /* Shorthand */ transition: all 0.3s ease; /* Example */ .button { background-color: blue; transition: background-color 0.3s ease; } .button:hover { background-color: red; }
Hover to see transition:
Hover Me!
15

CSS Animations

Creating Animations

@keyframes slide { 0% { transform: translateX(0); } 50% { transform: translateX(100px); } 100% { transform: translateX(0); } } .element { animation-name: slide; animation-duration: 2s; animation-timing-function: ease; animation-delay: 1s; animation-iteration-count: infinite; animation-direction: alternate; animation-fill-mode: forwards; } /* Shorthand */ animation: slide 2s ease-in-out 1s infinite alternate;
Animation Properties
animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode
16

CSS Transforms

2D Transforms

/* Individual Transforms */ transform: translate(50px, 100px); transform: rotate(45deg); transform: scale(2); transform: skew(20deg, 10deg); /* Multiple Transforms */ transform: translate(50px, 100px) rotate(45deg) scale(2);
3D Transforms
transform: rotateX(45deg); transform: rotateY(45deg); transform: perspective(500px) rotateY(45deg); /* Transform Origin */ transform-origin: center center; /* Default */ transform-origin: top left;
Transform Examples:
Rotated
Scaled
Skewed
17

CSS Media Queries

Responsive Design

Mobile First Approach
/* Base styles for mobile */ @media (min-width: 576px) { /* Small devices */ } @media (min-width: 768px) { /* Tablets */ } @media (min-width: 992px) { /* Desktops */ } @media (min-width: 1200px) { /* Large desktops */ }
Desktop First Approach
@media (max-width: 1199px) { /* Medium devices */ } @media (max-width: 991px) { /* Tablets */ } @media (max-width: 767px) { /* Mobile */ }
Other Media Features
@media (orientation: portrait) { } @media (prefers-color-scheme: dark) { } @media print { }
18

CSS Variables

Custom Properties

/* Define Variables */ :root { --primary-color: #3498db; --secondary-color: #2ecc71; --font-size: 16px; --spacing: 20px; } /* Use Variables */ .button { background-color: var(--primary-color); font-size: var(--font-size); padding: var(--spacing); } /* With Fallback */ color: var(--text-color, black);
Benefits
  • Easy to maintain and update
  • Can be changed with JavaScript
  • Scoped to specific elements
  • Support fallback values
19

Pseudo-classes & Pseudo-elements

Pseudo-classes

:link - Unvisited link
:visited - Visited link
:hover - Mouse over
:active - Clicked
:focus - Focused element
:first-child
:last-child
:nth-child(2)
:nth-child(odd)
:not(.class)

Pseudo-elements

::before { content: ""; } ::after { content: ""; } ::first-letter { } ::first-line { } ::selection { }
20

CSS Units and Values

Absolute Units
px Pixels
pt Points
cm Centimeters
mm Millimeters
in Inches
Relative Units
% Percentage
em Relative to font-size
rem Relative to root
vw Viewport width
vh Viewport height
vmin Smaller dimension
vmax Larger dimension
21

CSS Best Practices

Organization
  • Use external CSS files
  • Organize with comments
  • Group related properties
  • Consistent naming
Performance
  • Minimize CSS files
  • Avoid @import
  • CSS sprites for icons
  • Optimize selectors
Maintainability
  • Use CSS variables
  • Follow BEM convention
  • Mobile-first approach
  • box-sizing: border-box
Accessibility
  • Sufficient color contrast
  • Focus indicators
  • Readable font sizes
  • Skip to content links
22

CSS Frameworks & Preprocessors

Popular CSS Frameworks

Bootstrap

Most popular, comprehensive framework

Components Grid System Utilities
Tailwind CSS

Utility-first CSS framework

Utility Classes Customizable
Foundation

Professional responsive framework

Enterprise Flexible
Bulma

Modern CSS framework based on Flexbox

Pure CSS No JS

CSS Preprocessors

Sass/SCSS
Most popular, feature-rich
Less
Simple and easy
Stylus
Flexible syntax
PostCSS
Transform CSS with JS

Congratulations! 🎉

You've completed the comprehensive CSS course!

You now have a solid foundation in CSS, from basic styling to advanced layout techniques.

Next Steps
  • Practice building real layouts
  • Learn CSS frameworks
  • Explore preprocessors (Sass)
  • Master animations & transitions
  • Build responsive websites
  • Keep learning new features

Happy Styling! 🎨