HTML CSS

Cascading Style Sheets control element presentation through inline attributes, embedded style blocks, and external stylesheet references, separating visual design from document structure.

Quick Answer

How do you add CSS to HTML?

CSS can be added to HTML in three ways: inline styles using the style attribute, internal CSS using <style> tags in the <head>, or external CSS by linking a .css file with <link rel="stylesheet">. External CSS is recommended for maintainability and reusability across multiple pages.

CSS governs how browsers render HTML elements across screens, printers, and alternative media formats. Centralized styling mechanisms reduce maintenance overhead while enforcing consistent visual identity throughout multi-page websites.

Understanding CSS Technology

Cascading Style Sheets dictate visual presentation rules for HTML components. CSS determines element rendering across diverse output environments including displays, printed materials, and specialized media channels.

Strategic CSS Advantages

Establishes clean separation between structure and appearance
Streamlines ongoing site maintenance workflows
Enforces uniform design patterns site-wide
Facilitates adaptive layouts accommodating varied devices
Minimizes markup file weight accelerating page delivery

CSS Integration Methods

Developers employ three distinct approaches for injecting CSS rules into HTML documents:

Direct Inline Styling - Embedding style attributes within individual element tags
Document-Level Styles - Consolidating rules within head section style blocks
External Stylesheets - Linking separate CSS resource files

Direct Element Styling

Inline CSS targets individual elements with specialized appearance rules via embedded style attributes.

Inline Styling Demonstrations
<h1 style="color: navy; text-align: center;">Navy Centered Title</h1
>

<p style="color: crimson; font-size: 18px;"
  >
    Crimson-colored text with enhanced typography.
</p
>

<p
  style="background-color: khaki; padding: 10px; border: 2px solid olive;"
  >
    Khaki backdrop featuring padding and olive borders.
</p
>

<div
  style="width: 200px; height: 100px; background-color: skyblue; margin: 20px;"
  >
    <p style="text-align: center; line-height: 100px; margin: 0;"
    >
        Vertically centered content within colored container
    </p
  >
</div
>

<a
  href="https://htmlfreecodes.com"
  style="color: green; text-decoration: underline; font-weight: bold;"
  >
    Visit HTML Free Codes
</a
>

Result:

Blue Centered Heading

This paragraph has red text and larger font size.

This paragraph has a yellow background with padding and border.

Centered text in a blue box

Visit HTML Free Codes

Internal CSS

Internal CSS is defined in the <head> section using the <style> element. It affects all elements in the same HTML document.

Internal CSS Examples
<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS - HTML Free Codes</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f8ff;
            margin: 0;
            padding: 20px;
        }

        h1 {
            color: #2c3e50;
            text-align: center;
            border-bottom: 3px solid #3498db;
            padding-bottom: 10px;
        }

        .highlight {
            background-color: #ffeb3b;
            padding: 10px;
            border-left: 5px solid #ff9800;
            margin: 15px 0;
        }

        .info-box {
            background-color: #e3f2fd;
            border: 1px solid #2196f3;
            border-radius: 5px;
            padding: 15px;
            margin: 20px 0;
        }

        .website-link {
            color: #e74c3c;
            font-weight: bold;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h1>Welcome to HTML Free Codes</h1>

    <p class="highlight">This paragraph uses the highlight class styling.</p>

    <div class="info-box">
        <h3>CSS Information</h3>
        <p>This box demonstrates internal CSS styling with classes.</p>
    </div>

    <p>Visit <a href="https://htmlfreecodes.com" class="website-link">htmlfreecodes.com</a> for more tutorials.</p>
</body>
</html>

Result:

Welcome to HTML Free Codes

This paragraph uses the highlight class styling.

CSS Information

This box demonstrates internal CSS styling with classes.

Visit htmlfreecodes.com for more tutorials.

External CSS

External CSS uses a separate CSS file that is linked to the HTML document using the <link> element. This is the most common and recommended method.

External CSS Examples

HTML File (index.html):

This example uses two files: index.html and styles.css. The listings remain separate. Try it Yourself opens their bundled HTML and CSS, and Copy HTML includes the styles in one HTML file.

Unavailable or blocked: fragment context “#home”; fragment context “#tutorials”; fragment context “#contact”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<!DOCTYPE html>
<html>
<head>
    <title>External CSS - HTML Free Codes</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="main-header">
        <h1>HTML Free Codes</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#tutorials">Tutorials</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main class="content">
        <section class="hero">
            <h2>Learn Web Development</h2>
            <p>Master HTML, CSS, and JavaScript with our free tutorials.</p>
            <button class="cta-button">Start Learning</button>
        </section>
    </main>

    <footer>
        <p>© 2024 htmlfreecodes.com - All rights reserved.</p>
    </footer>
</body>
</html>

CSS File (styles.css):

/* Global Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: #333;
}

/* Header Styles */
.main-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 1rem 0;
  text-align: center;
}

.main-header h1 {
  margin-bottom: 1rem;
  font-size: 2.5rem;
}

.main-header nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.main-header nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  background-color: #15263f;
}

/* Main Content */
.content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.hero {
  text-align: center;
  background-color: #f8f9fa;
  padding: 3rem 2rem;
  border-radius: 10px;
  margin-bottom: 2rem;
}

.hero h2 {
  color: #2c3e50;
  margin-bottom: 1rem;
  font-size: 2.2rem;
}

.cta-button {
  background-color: #3498db;
  color: #101521;
  border: none;
  padding: 12px 30px;
  font-size: 1.1rem;
  border-radius: 5px;
  cursor: pointer;
}

/* Footer */
footer {
  background-color: #2c3e50;
  color: white;
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
}

Result:

HTML Free Codes

Learn Web Development

Master HTML, CSS, and JavaScript with our free tutorials.

CSS Selectors

CSS selectors are used to target HTML elements. Here are the most common types:

CSS Selector Examples
<style>
/* Element Selector */
h1 {
    color: #2c3e50;
    text-align: center;
}

/* Class Selector */
.highlight {
    background-color: #ffeb3b;
    padding: 10px;
    border-radius: 5px;
}

/* ID Selector */
#special {
    color: #e74c3c;
    font-weight: bold;
    font-size: 1.2em;
}

/* Attribute Selector */
a[href*="htmlfreecodes"] {
    color: #187344;
    text-decoration: none;
    font-weight: bold;
}

/* Multiple Classes */
.box.blue {
    background-color: #3498db;
    color: #101521;
    padding: 15px;
    border-radius: 5px;
}
</style>

<h1>CSS Selectors Demo</h1>
<p class="highlight">This paragraph uses a class selector.</p>
<p id="special">This paragraph has a unique ID.</p>
<div class="box blue">This div has multiple classes.</div>
<p>Visit <a href="https://htmlfreecodes.com">HTML Free Codes</a> for tutorials.</p>

Result:

CSS Selectors Demo

This paragraph uses a class selector.

This paragraph has a unique ID.

This div has multiple classes.

Visit HTML Free Codes for tutorials.

CSS Priority (Specificity)

When multiple CSS rules target the same element, CSS follows a priority order:

Inline styles (highest priority)
IDs
Classes, attributes, and pseudo-classes
Elements and pseudo-elements (lowest priority)

CSS Priority Examples
<style>
/* Element selector (lowest priority) */
p {
    color: blue;
    font-size: 14px;
}

/* Class selector (medium priority) */
.text-style {
    color: green;
    font-size: 16px;
}

/* ID selector (high priority) */
#unique-text {
    color: red;
    font-size: 18px;
}
</style>

<p>Element selector: blue text, 14px</p>
<p class="text-style">Class selector overrides element: green text, 16px</p>
<p id="unique-text" class="text-style">ID overrides class: red text, 18px</p>
<p id="unique-text" class="text-style" style="color: purple; font-size: 20px;">
    Inline style has highest priority: purple text, 20px
</p>

Result:

Element selector: blue text, 14px

Class selector overrides element: green text, 16px

ID overrides class: red text, 18px

Inline style has highest priority: purple text, 20px

Complete CSS Integration Example

Here's a comprehensive example showing how HTML and CSS work together to create styled web pages:

Complete HTML + CSS Example
<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Free Codes - CSS Tutorial</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            background-color: #f4f4f4;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: white;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }

        header {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 1rem;
        }

        .highlight {
            background-color: #ffeb3b;
            padding: 10px;
            border-left: 4px solid #ff9800;
        }

        .btn {
            background-color: #3498db;
            color: #101521;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 5px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>Welcome to HTML Free Codes</h1>
            <p>Learn Web Development for Free</p>
        </header>

        <main>
            <h2>Why Learn HTML and CSS?</h2>
            <p>HTML and CSS are the foundation of web development.</p>

            <div class="highlight">
                <h3>Important Note</h3>
                <p>Practice is key to mastering web development!</p>
            </div>

            <a href="https://htmlfreecodes.com" class="btn">Start Learning</a>
        </main>
    </div>
</body>
</html>

🎯 CSS Best Practices

Use External CSS: Keep CSS in separate files for better organization
Avoid Inline Styles: Use them only for dynamic styling or quick fixes
Use Meaningful Names: Choose descriptive class and ID names
Organize Your CSS: Group related styles together and add comments
Keep Specificity Low: Avoid overly specific selectors
Mobile First: Design for mobile devices first, then enhance for desktop

Try it Yourself

Experiment with different CSS methods and create styled web pages!

Try CSS Example

Test Your Knowledge

5 practice questions are available. Choose Start practice to try them.

A smaller starting example and practical notes

CSS selects elements and assigns presentation rules. HTML should continue to describe the content while CSS controls colors, spacing and layout. For a reusable site, an external stylesheet usually keeps related visual rules easier to maintain.

<link rel="stylesheet" href="/styles/site.css">
<style>
  .note { padding: 20px; background: #edf1ff; color: #18223b; }
  .note a { color: #3658bf; text-decoration: underline; }
  .note a:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
</style>
<section class="note"><h1>A little CSS</h1><p><a href="/examples/">Try a working example</a></p></section>

The external path must exist

The link demonstrates how to load a stylesheet; supply site.css at that path or use the embedded style block. Inspect network responses when styles fail: an HTML error page returned from a CSS path is not a stylesheet. A clear file structure and exact path spelling prevent many confusing visual failures.

Understand which rule wins

The cascade considers origin, importance, layers, specificity and order. Within otherwise comparable rules, a later declaration can override an earlier one. Avoid increasing selector complexity for every adjustment. Group component rules clearly so you can understand their effects without depending on a chain of accidental overrides.

Design interactive states

Include readable default colors, a visible keyboard focus state and deliberate hover/pressed behavior. Motion should have a reduced-motion alternative when it is optional. The focus-button example isolates these states so you can test them before integrating the button into a larger page.

Quick Answer

Understanding CSS Technology

Strategic CSS Advantages

CSS Integration Methods

Direct Element Styling

Inline Styling Demonstrations

Result:

Blue Centered Heading

Internal CSS

Internal CSS Examples

Result:

Welcome to HTML Free Codes

CSS Information

External CSS

External CSS Examples

HTML File (index.html):

CSS File (styles.css):

Result:

Learn Web Development

CSS Selectors

CSS Selector Examples

Result:

CSS Selectors Demo

CSS Priority (Specificity)

CSS Priority Examples

Result:

Complete CSS Integration Example

Complete HTML + CSS Example

🎯 CSS Best Practices

Try it Yourself

Test Your Knowledge

Related Articles

HTML Styles

HTML Colors

HTML Classes

HTML Id Attribute

HTML Layout

Responsive Design

The external path must exist

Understand which rule wins

Design interactive states