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

External CSS

Learn how to connect an external CSS file with an HTML document.

What is External CSS?

External CSS means writing CSS rules in a separate .css file and connecting that file to an HTML document.

This method is useful when the same styles need to be used across multiple HTML pages.

External CSS Diagram

HTML File index.html

→

CSS File style.css

→

Browser Styled Page

File Structure

Project
│
├── index.html
│
└── style.css

The HTML file contains the page structure and the CSS file contains the styling rules.

Step 1: Create CSS File

Code in style.css

h1 {
    color: blue;
    font-size: 30px;
}

p {
    color: green;
    font-size: 18px;
}

Simple Explanation

The CSS file contains the styling rules for the HTML elements.

Step 2: Connect CSS File

Code in index.html

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

    <h1>
        Welcome to External CSS
    </h1>

    <p>
        Learn CIIT Institute step by step 👀.
    </p>

</body>

</html>

Simple Explanation

The <link> element connects the HTML file with the external CSS file.

The href attribute specifies the location of the CSS file.

Output

Example Page

Welcome to External CSS

Learn CIIT Institute step by step 👀.

Example 2: Reuse the Same CSS

style.css

h1 {
    color: blue;
}

p {
    color: green;
}

Page 1

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

<h1>
    Home Page
</h1>

<p>
    Welcome to our website.
</p>

Page 2

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

<h1>
    About Page
</h1>

<p>
    Learn more about us.
</p>

Simple Explanation

The same external CSS file can be connected to multiple HTML pages.

Output

Home Page

Welcome to our website.

About Page

Learn more about us.

The <link> Element

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

link connects an external resource.
rel="stylesheet" tells the browser that the file is a CSS stylesheet.
href="style.css" specifies the CSS file location.

Advantages of External CSS

CSS can be reused across multiple HTML pages.
HTML and CSS remain separated.
Websites become easier to maintain.
One CSS file can control the design of many pages.

Limitation of External CSS

The CSS file must be correctly linked to the HTML page.
If the file path is incorrect, the styles will not load.

Remember:

External CSS is written in a separate .css file and connected to HTML using the <link> element.

Summary

External CSS keeps styling in a separate CSS file. The CSS file is connected to an HTML document using the <link> element. It is useful for maintaining consistent styles across multiple web pages.