How to Link a Connect External CSS to HTML

Today, I’m excited to share with you how I connected an external CSS to HTML file using Flask. This project was a significant learning experience for me, as it clarified how to structure a Flask application efficiently while keeping my code clean and organized. Let me take you through the complete process from project setup to code implementation and finally, some thoughts on why this approach makes life so much easier when building web applications.

The Blueprint for Success

In my Flask projects, I always begin by organizing everything into clear and purposeful directories. For this project, I followed the standard approach:

/
├── app.py
├── static/
│   └── style.css
└── templates/
    ├── home.html
    ├── about.html
    └── contact.html

app.py: The main Python file containing the Flask app logic.
static/: This folder stores all static assets like CSS files, images, and JavaScript. I placed my style.css here.
templates/: This folder holds my HTML templates. I separated different pages (home.html, about.html, and contact.html) for a modular approach.

Code Files and How Everything Comes Together

The Flask Application (app.py)

Below is the complete code of my Flask application. What I love about this approach is how it separates the application logic from the presentation layer. Using the render_template() function helps manage the HTML content as separate template files.

os
from flask import Flask, render_template

app = Flask(__name__)

# Home route: displays the home page with connected external CSS.
@app.route('/')
def home():
    return render_template("home.html")

# About route: provides an extra page to practice navigation and see CSS applied.
@app.route('/about')
def about():
    return render_template("about.html")

# Additional practice: a simple contact route that demonstrates handling more endpoints.
@app.route('/contact')
def contact():
    return render_template("contact.html")

if __name__ == "__main__":
    # Run the application on all IP addresses (host="0.0.0.0") at port 8080.
    app.run(host="0.0.0.0", port=8080, debug=True)

I built multiple routes for my project. Not only does this illustrate a well-structured Flask app, but it also gave me the opportunity to see how the same CSS styles apply seamlessly across different pages.

HTML Templates

home.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Connecting external CSS to HTML - Home</title>
  <!-- Flask's url_for helps generate the correct URL for the CSS file in the static folder -->
  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
  <header>
    <h1>Welcome to the Home Page</h1>
    <nav>
      <a href="/">Home</a> |
      <a href="/about">About</a> |
      <a href="/contact">Contact</a>
    </nav>
  </header>
  <main>
    <p>This is a sample home page where external CSS is applied. I built this page to learn how external styling works with Flask!</p>
  </main>
  <footer>
    <p>&copy; 2025 My Flask App</p>
  </footer>
</body>
</html>

about.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About Page - Connecting external CSS to HTML</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
  <header>
    <h1>About This Project</h1>
    <nav>
      <a href="/">Home</a> |
      <a href="/about">About</a> |
      <a href="/contact">Contact</a>
    </nav>
  </header>
  <main>
    <p>This page explains how I connected an external CSS file to an HTML template using Flask. It’s a simple yet powerful approach for any Flask application!</p>
  </main>
  <footer>
    <p>&copy; 2025 My Flask App</p>
  </footer>
</body>
</html>

contact.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Us - Connecting external CSS to HTML</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
  <header>
    <h1>Contact Us</h1>
    <nav>
      <a href="/">Home</a> |
      <a href="/about">About</a> |
      <a href="/contact">Contact</a>
    </nav>
  </header>
  <main>
    <p>For inquiries, please email us at example@example.com. I appreciate your interest in my project!</p>
  </main>
  <footer>
    <p>&copy; 2025 My Flask App</p>
  </footer>
</body>
</html>

Each template includes a <link> tag that uses Flask’s url_for helper function. This function generates the correct URL for the CSS file stored in the static folder, ensuring my styles are correctly applied across all pages.

The External CSS File (static/style.css)

My CSS file plays a crucial role in designing the look and feel of the website. Here’s the content of the CSS file:

/* Apply styling for html and body elements */
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  font-family: Arial, sans-serif;
}

/* Header styling */
header {
  background-color: #333;
  color: white;
  padding: 10px 0;
  text-align: center;
}

/* Navigation styling */
nav a {
  color: #fff;
  margin: 0 10px;
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
}

/* Main content styling */
main {
  padding: 20px;
  text-align: center;
}

/* Footer styling */
footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 5px 0;
  position: fixed;
  bottom: 0;
  width: 100%;
}

/* Practice additional styling: style for paragraph text */
p {
  font-size: 18px;
  line-height: 1.6;
  color: #555;
}

This CSS file is straightforward but effective. It styles the basic elements (header, nav, main, footer) and ensures a clean, consistent presentation for all pages. Changing any style here immediately updates every page that links to it—an ideal setup for any scalable web project.

How It All Works

As I built this project, the process unfolded as follows:

Setting Up the Project Structure:
I organized the project into separate folders for static files and templates. This separation keeps my application modular and easier to maintain.
Creating the Flask Application:
In app.py, I defined routes (/, /about, /contact) that use render_template() to render the HTML files. This allowed me to centralize all routing logic in one place while keeping the presentation layer in individual files.
Linking the CSS File:
In each HTML template, the <link> tag with {{ url_for('static', filename='style.css') }} was essential. It dynamically creates the URL for the CSS file, ensuring consistency and reliability in linking static assets.
Styling the Pages:
The static/style.css file applied styles to the entire site. Its role was vital in maintaining a cohesive look, and it saved me from the redundancy of inlining styles within each HTML file.

Running the Application

To see everything in action, here’s how I run the application:

Install Flask if Needed:
I made sure Flask was installed using:

pip install flask

Set Up Your Project Folder:
I arranged my folders as shown above and placed each file in its respective directory.
Run the Flask App:
I executed:

python app.py

Browse the Application:
I visited:
- http://localhost:8080/ for the Home page.
- http://localhost:8080/about for the About page.
- http://localhost:8080/contact for the Contact page.

Each page beautifully displayed content styled by my external CSS.

Final Thoughts

I am thrilled about how this project turned out. Not only did it help me understand the importance of separating static assets from HTML templates, but it also reinforced best practices for building scalable Flask applications. Connecting external CSS in this manner has given me a clean, maintainable structure that I can rely on for future projects.