Master CSS From Scratch

Clear, interactive, and structured CSS lessons designed for beginners.

COURSE SYLLABUS
1. Introduction to CSS
Introduction to CSS How CSS Works CSS vs HTML Adding CSS
2. CSS Basics
CSS Basics CSS Syntax Inline CSS Internal CSS External CSS CSS Comments
3. CSS Selectors
CSS Selectors Element Selector Class Selector ID Selector Attribute Selector Descendant Selector Child Selector Pseudo-Class Selector Pseudo-Element Selector
4. Colors & Backgrounds
Colors & Backgrounds Color Values Background Color Background Image Background Repeat Background Attachment Multiple Backgrounds
5. Text & Fonts
Text & Fonts Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow Font Family Font Size Font Style Font Weight Web Fonts
6. CSS Box Model
CSS Box Model Width & Height Padding Margin Border Border Radius Box Sizing Box Shadow Overflow
7. Flexbox
Flexbox Flex Container Flex Direction Flex Wrap Justify Content Align Items Align Content Gap Flex Items Order Flex Grow Flex Shrink Flex Basis
8. CSS Grid
CSS Grid Grid Container Grid Rows & Columns Grid Template Columns Grid Template Rows Grid Gap Grid Column Grid Row Grid Area Grid Alignment Responsive Grid
9. Responsive Design
Responsive Design Responsive Web Design Viewport Media Queries Breakpoints Mobile First Responsive Images Responsive Typography
10. Advanced CSS
Advanced CSS CSS Pseudo-Classes CSS Pseudo-Elements CSS Transforms CSS Transitions CSS Animations CSS Variables CSS Functions CSS Specificity CSS Best Practices

Adding CSS

Learn the three common ways to add CSS to an HTML document: Inline CSS, Internal CSS, and External CSS.

Ways to Add CSS

CSS can be added to an HTML page in three common ways.

  • Inline CSS - CSS is written directly inside an HTML element.
  • Internal CSS - CSS is written inside a <style> section in the HTML page.
  • External CSS - CSS is written in a separate .css file.

Three Ways to Add CSS

Inline CSS

Style directly inside an HTML element

→
Internal CSS

Style inside the HTML page

→
External CSS

Style in a separate CSS file

1 Inline CSS

Inline CSS is written directly inside the style attribute of an HTML element. 

<p style="color: blue;">
    WELCOME TO CIIT TRAINING INSTITUTE 🤓🌍..!
</p>
Output

WELCOME TO CIIT TRAINING INSTITUTE 🤓🌍..!

The text appears in blue because the color: blue; style is applied directly to the paragraph.

2 Internal CSS

Internal CSS is written inside a <style> element, normally inside the HTML document's <head> section. 

<style>
h1 {
    color: purple;
    font-size: 28px;
}
</style>

<h1>WELCOME TO CIIT TRAINING INSTITUTE 🤓🌍..! </h1>
Output

WELCOME TO CIIT TRAINING INSTITUTE 🤓🌍..!

The heading appears purple and larger because the styles are defined inside the page.

3 External CSS

External CSS is written in a separate .css file and linked to the HTML document. 

/* style.css */

h1 {
    color: green;
    font-size: 28px;
}

Connect the CSS file to the HTML page: 

<link rel="stylesheet" href="style.css">
<h1>WELCOME TO CIIT TRAINING INSTITUTE 🤓🌍..! </h1>
Output

WELCOME TO CIIT TRAINING INSTITUTE 🤓🌍..!

The heading becomes green because the browser loads the style from the external CSS file.

When Can You Use Each Method?

  • Inline CSS: Useful for a specific element or quick styling.
  • Internal CSS: Useful when styles are mainly needed for one page.
  • External CSS: Useful when styles need to be reused across multiple pages.
Best practice:

External CSS is commonly preferred for larger websites because it keeps styling separate from HTML and makes styles easier to maintain and reuse.

Summary

CSS can be added using Inline CSS, Internal CSS, or External CSS. Inline CSS is written inside an HTML element, Internal CSS is written inside a style section, and External CSS is stored in a separate CSS file.

← Previous: CSS vs HTML
Next: CSS Basics →