HTML Course 13. Integrating HTML with CSS (from the HTML point of view)

HTML Course 13: Integrating HTML with CSS (from the HTML point of view)

Overview

This lesson explores how HTML and CSS work together to create styled, maintainable web pages. We cover three main methods to attach CSS to HTML:

• Inline styles (style attribute)
• Internal style sheet (<style> block)
• External style sheet (<link> tag)

Along the way we’ll discuss selectors, specificity, inheritance and best practices.

1. Inline Styles (style attribute)

Inline styles apply CSS directly on each element via the style attribute. This method is quick for one-off tweaks but hard to maintain for larger projects.

<!-- A paragraph with inline styles -->
<p style='color: teal; font-size: 18px; margin-bottom: 1em;'>
  Welcome to our site!
</p>

<!-- A button with inline background and border -->
<button style='background: #f04; color: #fff; border: none; padding: 0.5em 1em;'>
  Click Me
</button>

• Pros: No need for separate CSS files. Instant effect.
• Cons: Repetitive, mixes content with presentation, low reusability.

2. Internal Style Sheet (<style> block)

Internal CSS goes inside a <style> element, typically within the document's <head>. This centralizes styles for that page only.

<!-- Placed in the head of your HTML document -->
<style>
  /* Style all headings on this page */
  h2 {
    color: navy;
    font-family: 'Arial', sans-serif;
  }
  /* Class selector for buttons */
  .btn {
    background-color: #0284c7;
    color: #fff;
    padding: 0.5em 1em;
    border: none;
    cursor: pointer;
  }
</style>

<!-- Later in the body -->
<h2>Our Services</h2>
<button class='btn'>Learn More</button>

• Pros: Styles are centralized for one page, clearer separation than inline.
• Cons: Styles are not shared across multiple pages. Can bloat HTML file.

3. External Style Sheet (<link> tag)

External CSS files are linked from the HTML using a <link> element. This is the most scalable approach for large sites.

<!-- In the head of each HTML page -->
<link rel='stylesheet' href='styles/main.css'>

<!-- main.css contains: -->
/* styles/main.css */
body {
  margin: 0;
  font-family: sans-serif;
}
.navbar {
  background: #333;
  color: #fff;
  padding: 1em;
}
.navbar a {
  color: #fff;
  text-decoration: none;
  margin-right: 1em;
}

• Pros: Single CSS file can serve multiple pages; easy to maintain site-wide theme.
• Cons: Requires HTTP request (though usually cached); must manage proper paths.

4. Using class and id selectors

HTML assigns class and id attributes that CSS selectors target. Classes are reusable, IDs should be unique per page.

<!-- HTML elements with class and id -->
<div id='header'>
  <h2 class='title'>My Site</h2>
  <nav class='navbar'>
    <a href='#' class='nav-link'>Home</a>
    <a href='#' class='nav-link'>About</a>
  </nav>
</div>

<!-- Corresponding CSS in external file -->
#header {
  background: #222;
  color: #fff;
  padding: 1em;
}
.title {
  margin: 0;
}
.nav-link {
  margin-right: 0.5em;
}

5. Specificity and Inheritance

When multiple rules apply, CSS uses specificity to decide which wins. Inline > ID selector > class selector > element selector. Higher specificity overrides lower.

<!-- Example of conflicting rules -->
<!-- In external CSS -->
p { color: green; }           /* specificity = 1 */
.special { color: orange; }    /* specificity = 10 */
#unique { color: purple; }     /* specificity = 100 */
<!-- Inline overrides all -->
<p id='unique' class='special' style='color: red;'>
  This text will be red.
</p>

6. Responsive Design with Media Queries

You can place media queries in <style> blocks or external files to adjust layouts on different screen sizes.

<!-- In external CSS -->
.container {
  width: 800px;
  margin: 0 auto;
}
@media (max-width: 600px) {
  .container {
    width: 100%;
    padding: 0 1em;
  }
}
<!-- In HTML -->
<div class='container'>
  <p>Content adapts to screen width.</p>
</div>

7. Best Practices and Common Pitfalls

• Avoid excessive inline styles. Use classes instead.
• Keep external CSS organized (e.g., reset, layout, components).
• Use meaningful class names (BEM or other conventions).
• Monitor specificity to prevent hard-to-override rules.
• Test responsive behavior with media queries.
• Leverage browser dev tools to inspect computed styles.

Putting It All Together: A Mini Project

Below is a skeleton of an HTML page that links an external style sheet and uses semantic HTML. Comments indicate the HTML/CSS integration points.

<!-- Link to external CSS -->
<link rel='stylesheet' href='css/site.css'>

<header class='site-header'>
  <h2 class='site-title'>Awesome Blog</h2>
  <nav class='main-nav'>
    <a href='#' class='nav-item'>Home</a>
    <a href='#' class='nav-item'>Blog</a>
    <a href='#' class='nav-item'>Contact</a>
  </nav>
</header>

<main class='post-list'>
  <article class='post'>
    <h3 class='post-title'>First Post</h3>
    <p class='post-meta'>By Alice on 2024-01-01</p>
    <p class='post-content'>Welcome to the blog!</p>
    <button class='btn btn-primary'>Read More</button>
  </article>
  <!-- Repeat for more articles -->
</main>

<footer class='site-footer'>
  <p>&copy; 2024 Awesome Blog</p>
</footer>

In the accompanying site.css you might have:

/* site.css */
.site-header {
  background: #222;
  color: #fff;
  padding: 1em;
}
.site-title {
  margin: 0;
}
.main-nav .nav-item {
  color: #fff;
  margin-right: 1em;
}
.post-list {
  max-width: 800px;
  margin: 2em auto;
}
.post {
  border-bottom: 1px solid #ddd;
  padding: 1em 0;
}
.btn-primary {
  background: #0284c7;
  color: #fff;
  padding: 0.5em 1em;
}
@media (max-width: 600px) {
  .post-list {
    margin: 1em;
  }
}

With this structure, HTML defines the document’s semantic content and structure. CSS (internal or external) controls visual presentation. By keeping them modular, you achieve maintainable, scalable web pages.