Site icon Cyber & Web Development Code Lab

Internal, Inline, and External CSS Explained with Examples – Complete Beginner Guide

akshayhomkar

Internal, Inline, and External CSS – Complete Guide

CSS (Cascading Style Sheets) is used to design and style webpages.
It controls:

There are three major ways to apply CSS:

  1. Inline CSS
  2. Internal CSS
  3. External CSS

Understanding these methods is essential for every frontend developer.

What is CSS?

CSS is used to control the appearance of HTML elements.

Without CSS, webpages look plain and unstructured.

Example:

<h1>Hello World</h1>

With CSS:

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

Types of CSS

CSS TypeDescription
Inline CSSApplied directly inside HTML elements
Internal CSSWritten inside <style> tag
External CSSStored in separate .css file
  1. Inline CSS

Inline CSS is applied directly inside an HTML tag using the style attribute.

Syntax:

<tag style="property:value;">

1. Inline CSS Example

<!DOCTYPE html>
<html>

<head>
    <title>Inline CSS Example</title>
</head>

<body>

<h1 style="color:blue; text-align:center;">
    Welcome to CSS Tutorial
</h1>

<p style="font-size:20px; color:green;">
    This paragraph uses inline CSS styling.
</p>

<button style="background:red; color:white; padding:10px;">
    Click Here
</button>

</body>
</html>

Advantages of Inline CSS

Disadvantages of Inline CSS

2. Internal CSS

Internal CSS is written inside the <style> tag within the <head> section.

Syntax:

<style>

selector{
    property:value;
}

</style>

Internal CSS Example:

<!DOCTYPE html>
<html>

<head>

<title>Internal CSS Example</title>

<style>

body{
    font-family:Arial;
    background:#f4f4f4;
}

h1{
    color:#0a192f;
    text-align:center;
}

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

.card{
    background:white;
    width:300px;
    padding:20px;
    margin:auto;
    border-radius:10px;
}

</style>

</head>

<body>

<div class="card">

<h1>Internal CSS</h1>

<p>
This webpage is styled using internal CSS.
</p>

</div>

</body>
</html>

Advantages of Internal CSS

Disadvantages of Internal CSS

3. External CSS

External CSS is stored in a separate .css file and linked using the <link> tag.

This is the most professional and widely used method.

Step 1: Create HTML File

index.html

<!DOCTYPE html>
<html>

<head>

<title>External CSS Example</title>

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

</head>

<body>

<header>
    <h1>External CSS Tutorial</h1>
</header>

<section class="container">

<h2>Frontend Development</h2>

<p>
External CSS helps maintain clean and reusable code.
</p>

<button>Read More</button>

</section>

</body>
</html>

Step 2: Create CSS File

style.css

body{
    margin:0;
    font-family:Arial;
    background:#f4f4f4;
}

header{
    background:#0a192f;
    color:white;
    text-align:center;
    padding:20px;
}

.container{
    width:80%;
    margin:auto;
    background:white;
    padding:20px;
    margin-top:20px;
    border-radius:10px;
}

h2{
    color:#112240;
}

button{
    background:#0a192f;
    color:white;
    border:none;
    padding:10px 20px;
    cursor:pointer;
}

Advantages of External CSS

BenefitDescription
ReusableSame CSS for multiple pages
Cleaner HTMLBetter readability
Faster maintenanceUpdate one file
Professional approachIndustry standard

Layout Design Using CSS

CSS is heavily used for webpage layouts.

Example: Flexbox Layout

.container{
    display:flex;
    justify-content:space-between;
}

Example: Grid Layout

.grid-layout{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:20px;
}

Typography in CSS

Typography controls:

Typography Example:

h1{
    font-size:40px;
    font-family:Verdana;
    text-transform:uppercase;
}

p{
    line-height:1.8;
    letter-spacing:1px;
}

CSS Colors and Backgrounds

body{
    background:#f5f5f5;
}

h1{
    color:#0a192f;
}

CSS Animations

Animations improve user experience and website engagement.

Basic Animation Example:

<div class=”box”></div>

.box{
    width:100px;
    height:100px;
    background:red;
    animation:movebox 3s infinite;
}

@keyframes movebox{

0%{
    transform:translateX(0px);
}

50%{
    transform:translateX(200px);
}

100%{
    transform:translateX(0px);
}

}

Hover Animation Example

button{
    background:#0a192f;
    color:white;
    transition:0.5s;
}

button:hover{
    background:#ff6600;
}

Responsive CSS Design

Modern websites must work on:

Media Query Example

@media(max-width:768px){

.container{
    width:95%;
}

h1{
    font-size:28px;
}

}

CSS Selectors

SelectorExample
Element Selectorh1
Class Selector.box
ID Selector#header
Universal Selector*

Complete CSS Priority Order

CSS priority works like this:

Inline CSS > Internal CSS > External CSS

Example:

<p style=”color:red;”>

This overrides internal and external CSS.

Best Practices for CSS

Best PracticeBenefit
Use external CSSBetter maintenance
Keep code organizedEasier debugging
Use meaningful class namesBetter readability
Avoid excessive inline CSSCleaner structure
Use responsive designMobile compatibility

Common Mistakes Beginners Make

Mistake

Solution

Mixing all CSS types randomly

Use proper structure

No responsive design

Use media queries

Repeated styles

Use reusable classes

Large inline CSS

Shift to external CSS

Click Here to Download Examples

 

Sample Output of Example of Flexbox

Summary

CSS is the foundation of modern web design.
By understanding:

you can create professional, responsive, and visually attractive websites.

For real-world development, developers mostly use:

After mastering CSS basics, you can move toward:

Practice regularly by creating:

The more you build, the stronger your frontend development skills become.

Exit mobile version