Home / HTML / CSS

HTML CSS

What is CSS in HTML?

CSS (Cascading Style Sheets) is used to style HTML elements. CSS can be added to HTML in three ways: inline styles, internal stylesheets, and external stylesheets. This page explains how to integrate CSS with HTML documents.

1. Inline CSS

Inline CSS uses the style attribute within HTML elements. Styles are applied directly to individual elements:

Example

<h1 style="color: blue; font-size: 30px;">Styled Heading</h1>
<p style="color: red; background-color: yellow;">Styled Paragraph</p>

Pros: Quick and easy for single elements

Cons: Hard to maintain, not reusable, mixes content with presentation

2. Internal CSS

Internal CSS is placed in the <head> section of an HTML document using the <style> tag:

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        h1 {
            color: #4b3190;
            text-align: center;
        }
        p {
            color: #333;
            font-size: 16px;
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <h1>My Heading</h1>
    <p>This is a paragraph styled with internal CSS.</p>
</body>
</html>

Pros: Styles are separated from HTML, reusable within the page

Cons: Not reusable across multiple pages

3. External CSS

External CSS is stored in a separate .css file and linked to HTML documents using the <link> tag in the <head> section:

HTML File (index.html)

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>My Heading</h1>
    <p>This is a paragraph styled with external CSS.</p>
</body>
</html>

CSS File (styles.css)

Example

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 20px;
}

h1 {
    color: #4b3190;
    text-align: center;
    font-size: 32px;
}

p {
    color: #333;
    font-size: 16px;
    line-height: 1.5;
}

Pros: Best practice, reusable across multiple pages, easier to maintain, better performance (can be cached)

Cons: Requires an additional file

CSS Link Syntax

The <link> tag is used to link external CSS files. The rel attribute specifies the relationship, and href specifies the path to the CSS file:

Example

<!-- Same directory -->
<link rel="stylesheet" href="styles.css">

<!-- In a subdirectory -->
<link rel="stylesheet" href="css/styles.css">

<!-- In parent directory -->
<link rel="stylesheet" href="../styles.css">

<!-- Absolute URL -->
<link rel="stylesheet" href="https://example.com/styles.css">

Multiple Stylesheets

You can link multiple external stylesheets to a single HTML document:

Example

<head>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="components.css">
</head>

Combining Methods

You can combine inline, internal, and external CSS. The order of precedence is:

Inline styles (highest priority)
Internal CSS
External CSS (lowest priority)

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles.css"> <!-- External CSS -->
    <style>
        /* Internal CSS */
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <p style="color: red;">This paragraph is red (inline overrides internal and external)</p>
</body>
</html>

CSS @import Rule

You can also import CSS files using the @import rule inside a <style> tag or in a CSS file:

Example - In HTML

<style>
    @import url('styles.css');
    @import url('components.css');
</style>

Example - In CSS File

@import url('reset.css');
@import url('base.css');

/* Your CSS rules here */
body {
    font-family: Arial;
}

Note: @import is generally slower than <link> tags because imports are loaded sequentially, while links can be loaded in parallel.

CSS in HTML5

In HTML5, you can omit the type="text/css" attribute when linking stylesheets, as CSS is the default:

Example - HTML5 (Recommended)

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

Example - HTML4 (Still Works)

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

Best Practices

Use external CSS: For most projects, external stylesheets are the best choice
Keep styles separate: Don't mix HTML structure with CSS styling
Organize CSS files: Use logical file names (e.g., main.css, layout.css, components.css)
Avoid inline styles: Use inline styles only for dynamic styles or quick testing
Use internal CSS sparingly: Only for single-page sites or page-specific styles
Minify CSS for production: Remove whitespace and comments to reduce file size

CSS File Organization

For larger projects, organize CSS files by function:

Example Structure

<head>
    <!-- Reset/Normalize -->
    <link rel="stylesheet" href="css/reset.css">
    
    <!-- Base styles -->
    <link rel="stylesheet" href="css/base.css">
    
    <!-- Layout -->
    <link rel="stylesheet" href="css/layout.css">
    
    <!-- Components -->
    <link rel="stylesheet" href="css/components.css">
    
    <!-- Utilities -->
    <link rel="stylesheet" href="css/utilities.css">
</head>

← HTML Comments HTML Elements →