Learn CSS for Web Development

Getting Started

Now that you understand HTML structure, let's learn how to make it look great with CSS (Cascading Style Sheets). CSS controls the visual presentation of your web pages.

CSS allows you to control:

  • Colors and backgrounds
  • Fonts and text styles
  • Layout and positioning
  • Spacing and borders
  • Responsive design for different screen sizes

CSS Syntax

selector {
  property: value;
  property: value;
}

Selector identifies the element whose style should be changed

Property is a specific style to be changed (e.g., font-size, background-color)

Value is assigned to the property (e.g., 20px, green)

Example

Styled Heading

h1 {
    color: navy;
    text-align: center;
    font-family: Arial, sans-serif;
}

3 Ways to Add CSS to HTML

1. Inline CSS

Add CSS directly to HTML elements using the style attribute.

This text is red and large.

<p style="color: red; font-size: 20px;">
    This text is red and large.
</p>

2. Internal CSS

Add CSS in the <head> section within <style> tags.

This paragraph uses internal CSS styling.

<head>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>

3. External CSS (Recommended)

Create a separate CSS file and link to it. This is best for larger projects and organization.

This uses external CSS from a separate file.

<head>
    <link rel="stylesheet" href="styles.css">
</head>

<!-- styles.css -->
p {
color: green;
font-size: 18px;
}

Selectors

Element Selectors

Target all elements of a specific type.

Every paragraph is blue

Including this one

This heading is gray

p {
    color: darkblue;
}

h2 {
color: gray;
}

Class Selectors (starts with .)

Target elements with a specific class. Classes can be reused multiple times.

Important text

Card content
<p class="important-info">Important text</p>
<div class="card">Card content</div>
.important-info {
    color: red;
    font-weight: bold;
}

.card {
border: 1px solid #ccc;
padding: 20px;
}

ID Selectors (starts with #)

Target a unique element with a specific ID. IDs should only be used once per page.

Header content
<div id="header">Header content</div>
#header {
    background-color: lightblue;
    height: 100px;
}

Important: IDs should be unique (use only once per page), classes can be reused multiple times.

Multiple Classes

Elements can have multiple classes separated by spaces.

<button class="btn btn-primary btn-large">
    Large Primary Button
</button>
.btn { padding: 10px 20px; border-radius: 6px; }
.btn-primary { background: #007bff; color: white; }
.btn-large { font-size: 18px; }

Colors & Text

Text Colors

CSS supports multiple color formats.

Named color: blue

Hex code: #336699

RGB: rgb(255, 0, 0)

RGBA with opacity: rgba(0, 0, 0, 0.5)

color: blue;
color: #336699;
color: rgb(255, 0, 0);
color: rgba(0, 0, 0, 0.5);

Background Colors

Solid background
Gradient background
background-color: lightgray;

background: linear-gradient(to right, red, blue);

Background on Different Elements

Background on div

Here is some text to fill the div

div {
    background-color: #e3f2fd;
}

Background on body (entire page)

Entire page background 
body {
    background-color: #c15089;
}

Font Families

Arial font

Times New Roman font

Courier New font

Georgia font

font-family: Arial, sans-serif;
font-family: 'Times New Roman', serif;
font-family: 'Courier New', monospace;
font-family: Georgia, serif;

Font Sizes

12px text

16px text (default)

20px text

24px text

font-size: 12px;
font-size: 16px;
font-size: 20px;
font-size: 24px;

Font Weights

Light (300)

Normal (400)

Semi-bold (600)

Bold (700)

Black (900)

font-weight: 300;    /* Light */
font-weight: 400;    /* Normal */
font-weight: 600;    /* Semi-bold */
font-weight: bold;   /* Bold (700) */
font-weight: 900;    /* Black */

Text Alignment

Left aligned

Center aligned

Right aligned

Justified text spreads content evenly across the full width of the container.

text-align: left;
text-align: center;
text-align: right;
text-align: justify;

Text Decoration

No decoration

Underlined text

Strikethrough text

Overlined text

text-decoration: none;
text-decoration: underline;
text-decoration: line-through;
text-decoration: overline;

Line Height

Line height 1.0
Creates tight spacing
Between lines

Line height 2.0
Creates loose spacing
Between lines

line-height: 1;      /* Tight */
line-height: 1.5;    /* Normal */
line-height: 2;      /* Loose */

Box Model

Every HTML element is a rectangular box with these components: content, padding, border, and margin.

Box Model Visualization

Content
↑ Padding (inside border)
↑ Border
↑ Margin (outside border)
div {
    width: 200px;
    height: 100px;
    padding: 20px;      /* Inside space */
    border: 2px solid black;
    margin: 30px;       /* Outside space */
    background-color: lightblue;
}

Padding (Inside Spacing)

Small padding (5px)
Large padding (20px)
Different padding (10px 40px)
/* All sides */
padding: 20px;

/* Top/Bottom Left/Right */
padding: 10px 20px;


/* Top Right Bottom Left (clockwise) */
padding: 5px 10px 15px 20px;


/* Individual sides */
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;

Borders

Solid border
Dashed border
Dotted border
Double border
Rounded corners
border: 2px solid black;
border: 3px dashed blue;
border: 3px dotted green;
border: 4px double red;

/* Rounded corners */
border-radius: 10px;


/* Individual sides */
border-top: 1px solid black;
border-right: 2px dashed blue;
border-bottom: 3px dotted green;
border-left: 4px double orange;

Margins (Outside Spacing)

Small margin (5px)
Large margin (20px)
Custom margins (30px 10px)
/* All sides */
margin: 10px;

/* Top/Bottom Left/Right */
margin: 10px 20px;


/* Top Right Bottom Left (clockwise) */
margin: 5px 10px 15px 20px;


/* Individual sides */
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;

Width and Height

150px × 60px
200px × 40px
div {
    width: 200px;
    height: 100px;
}

Display & Layout

Display Types

The display property controls how elements behave in the layout.

Block Elements

Block elements take up the full width available and start on a new line.

Block 1 (full width)
Block 2 (full width)
Block 3 (full width)
.block-element {
    display: block;
    /* Takes up full width */
    /* Starts on new line */
}

Inline Elements

Inline elements flow with text and only take up as much width as needed.

Inline 1 Inline 2 Inline 3 
.inline-element {
    display: inline;
    /* Flows with text */
    /* Width/height ignored */
}

Inline-Block Elements

Inline-block elements flow with text but respect width and height.

Box 1
Box 2
Box 3
.inline-block-element {
    display: inline-block;
    /* Flows with text */
    /* Respects width/height */
}

Hidden Elements

Elements with display: none are completely removed from the layout.

.hidden-element {
    display: none;
    /* Completely removed */
    /* Takes up no space */
}

Layout Example

A complete layout with header, sidebar, content area, and footer.

Header
Sidebar
Main Content Area
Footer
<div class="header">Header</div>
<div class="main">
    <div class="sidebar">Sidebar</div>
    <div class="content">Main Content</div>
</div>
<div class="footer">Footer</div>
.header, .footer {
    background: #333;
    color: white;
    padding: 20px;
    text-align: center;
}

.sidebar {
background: #f4f4f4;
width: 200px;
float: left;
padding: 15px;
}


.content {
margin-left: 220px;
padding: 15px;
}

Units & Specificity

CSS Units

Absolute Units (Fixed)

Pixels (px) are the most common absolute unit.

100px wide
200px wide
width: 100px;
height: 50px;
font-size: 16px;

Relative Units

These units scale based on context.

50% of parent
80% of parent
/* Percentage of parent */
width: 50%;

/* Relative to root font size */
font-size: 2rem;


/* Relative to parent font size */
font-size: 1.5em;


/* Viewport units /
width: 50vw;     / 50% of viewport width /
height: 100vh;   / 100% of viewport height */

Font Size Units Comparison

12px - Fixed size

1em - Relative to parent

1rem - Relative to root

1.5rem - Scaled up

font-size: 12px;   /* Absolute */
font-size: 1em;    /* Parent-relative */
font-size: 1rem;   /* Root-relative */
font-size: 1.5rem; /* 1.5x root size */

CSS Specificity

When multiple CSS rules target the same element, specificity determines which rule wins.

Specificity Hierarchy (Lowest to Highest)

* { } ← Lowest
element { }
.class { }
.class element { }
#id { }
inline style ← High
!important ← Highest
/* From lowest to highest specificity */

    

  • { color: gray; }           /* Universal */
    • 



p { color: blue; }           /* Element */


.text { color: green; }      /* Class */


#main { color: orange; }     /* ID */


<p style="color: red">      /* Inline */


p { color: pink !important; } /* Wins! */

Specificity Example

This paragraph is blue because inline style wins

/* CSS file */
p { color: red; }
.paragraph { color: green; }

/* HTML */
<p class="paragraph" style="color: blue">
This paragraph is blue
</p>


/* Inline style (highest specificity) wins! */

Order Matters

When specificity is equal, the last rule wins.

This text is green because it comes last

p { color: blue; }
p { color: red; }
p { color: green; }  /* This wins! */

Using !important (Use Sparingly)

The !important flag gives a rule the highest priority, but should be avoided when possible.

This will always be red due to !important

p { color: red !important; }

/* This will be overridden /
#special-text { color: blue; }
<p style="color: green">  / Overridden */

Avoid overusing !important - it makes CSS harder to maintain