Types of CSS

Learn the three different ways to apply CSS: Inline, Internal, and External

Three Ways to Apply CSS

There are three methods to apply CSS to HTML documents. Each method has its own use cases, advantages, and disadvantages.

CSS Application Methods:

Inline CSS: Applied directly to HTML elements using the style attribute
Internal CSS: Written within <style> tags in the HTML document's head
External CSS: Written in separate .css files and linked to HTML

1. Inline CSS

Inline CSS is applied directly to HTML elements using the style attribute. It has the highest specificity and overrides other CSS rules.

Inline CSS Example:

                            

<h1 style="color: blue; font-size: 28px; text-align: center;">
    Welcome to CodingRider
</h1>

<p style="color: #666; line-height: 1.6; margin-bottom: 20px;">
    This paragraph has inline styling applied directly.
</p>

<div style="background-color: #f0f0f0; padding: 20px; border-radius: 8px;">
    This div has multiple inline styles.
</div>

Inline CSS - Pros and Cons:

Advantages:

Quick and easy for testing
Highest specificity (overrides other styles)
No external file dependencies

Disadvantages:

Not reusable across elements
Makes HTML code messy and hard to maintain
Difficult to update styles site-wide
Poor separation of content and presentation

2. Internal CSS

Internal CSS is written within <style> tags in the HTML document's <head> section. It applies to the entire HTML document.

Internal CSS Example:

                            
<head>
    <style>
        /* Internal CSS styles */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 30px;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        p {
            color: #555;
            line-height: 1.6;
            margin-bottom: 15px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Welcome to Our Website</h1>
        <p>This content is styled with internal CSS.</p>
    </div>
</body>

Internal CSS - Pros and Cons:

Advantages:

Styles are contained within the HTML file
Can style multiple elements with one rule
Good for single-page websites
No external file dependencies

Disadvantages:

Styles cannot be shared across multiple HTML files
Increases HTML file size
Difficult to maintain for large websites
No caching benefits

3. External CSS (Recommended)

External CSS is written in separate .css files and linked to HTML documents using the tag. This is the most commonly used and recommended method.

External CSS Example:

                            
/* styles.css file */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    color: #333;
}

.header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 60px 0;
    text-align: center;
}

.header h1 {
    font-size: 3rem;
    margin: 0;
    font-weight: 300;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.card {
    background: white;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
}

/* HTML file linking to external CSS */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>External CSS Example</title>
    <link rel="stylesheet" href="styles.css"> 
</head>
<body>
    <header class="header">
        <h1>Welcome to CodingRider</h1>
    </header>
    
    <div class="container">
        <div class="card">
            <h2>Learn Web Development</h2>
            <p>Master HTML, CSS, and JavaScript with our courses.</p>
        </div>
    </div>
</body>
</html>

External CSS - Pros and Cons:

Advantages:

Reusable across multiple HTML files
Better organization and maintainability
Smaller HTML file sizes
Browser caching improves performance
Perfect separation of content and presentation
Easy to update styles site-wide

Disadvantages:

Requires additional HTTP request
Styles won't load if CSS file is missing
Slightly more complex setup

CSS Specificity and Priority

When multiple CSS rules target the same element, the browser follows a specificity hierarchy:

Priority Order (Highest to Lowest):

                            
1. Inline CSS (style attribute)
2. IDs (#myId)
3. Classes (.myClass), attributes, and pseudo-classes
4. Elements (h1, p, div)

/* Example of specificity */
p { color: black; }              /* Specificity: 1 */
.intro { color: blue; }          /* Specificity: 10 */
#main-text { color: red; }       /* Specificity: 100 */
        /* Specificity: 1000 */

Best Practices

Recommendations:

Use External CSS for most projects
Use Internal CSS for single-page websites or page-specific styles
Use Inline CSS sparingly, only for quick testing or dynamic styles
Organize CSS files logically (base.css, layout.css, components.css)
Use CSS preprocessors like Sass or Less for large projects