HTML Course 1.4 Differences between HTML, CSS and JavaScript

Overview of HTML, CSS and JavaScript

Web pages are built by three core technologies working together:

• HTML defines the structure and content.
• CSS handles the presentation and styling.
• JavaScript implements behavior and interactivity.

1. HTML (HyperText Markup Language)

HTML is a declarative language based on tags that describe page structure, semantics and content hierarchy. Browsers parse HTML to build the Document Object Model (DOM).

Key points:

• Uses elements like <section>, <article>, <header>, <p>, etc.
• Supports attributes to add metadata (id, class, alt, href, …).
• Is static by itself but forms the skeleton for styling and scripting.

Example of HTML structure:

  
  <section id='intro'>
    <h2>Welcome to My Site</h2>
    <p>This paragraph introduces the site and gives context.</p>
    <ul>
      <li>First feature</li>
      <li>Second feature</li>
    </ul>
  </section>
  

2. CSS (Cascading Style Sheets)

CSS is a declarative styling language that applies rules to HTML elements. It controls layout, colors, typography, spacing and more.

Key concepts:

• Selectors target elements by tag, class, id, attribute or relationship (div p, .button, #main, …).
• Cascading & Specificity determine which rule wins when multiple rules apply.
• Box Model (content, padding, border, margin) defines element spacing.
• Responsive techniques (media queries) adapt layouts to devices.

Example of CSS rules:

  /* Base typography */
  body {
    font-family: Arial, sans-serif;
    line-height: 1.5;
  }
  /* Styling paragraphs */
  p {
    color: #333;
    margin-bottom: 1em;
  }
  /* Buttons */
  .button {
    display: inline-block;
    padding: 0.5em 1em;
    background-color: #007acc;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
  }
  .button:hover {
    background-color: #005fa3;
  }
  

3. JavaScript

JavaScript is an imperative and event-driven programming language that runs in the browser (or server). It manipulates the DOM, handles user input, fetches data and updates the page dynamically.

Main features:

• Access to the DOM API (document.getElementById, querySelector, …).
• Event handling (click, submit, DOMContentLoaded, …).
• Asynchronous operations (fetch, Promise, async/await).
• Dynamic creation/removal of elements, form validation, animations, etc.

Example of JavaScript behavior:

  <script>
    // Wait until the document is ready
    document.addEventListener('DOMContentLoaded', function() {
      var btn = document.getElementById('clickMe');
      // Attach a click event
      btn.addEventListener('click', function() {
        // Change content dynamically
        document.getElementById('message').textContent = 'Button clicked!';
      });
    });
  </script>
  <button id='clickMe'>Click me</button>
  <div id='message'>No clicks yet.</div>
  

4. Comparative Summary

5. How They Work Together

The three layers collaborate to create a full web experience:

1. HTML provides the elements (<div>, <button>, <form>).
2. CSS styles them (color, layout, animations).
3. JavaScript adds interactivity (responds to clicks, fetches data, modifies classes/styles).

Combined snippet:

  <!-- Link to external stylesheet -->
  <link rel='stylesheet' href='styles.css'>

  <!-- HTML content -->
  <div class='card'>
    <h3>Product</h3>
    <button id='addToCart'>Add to Cart</button>
  </div>

  <!-- JavaScript for behavior -->
  <script src='app.js'></script>
  

Conclusion

Understanding the distinct roles of HTML, CSS and JavaScript—and how they interoperate—is fundamental to web development. HTML shapes content, CSS beautifies it, and JavaScript brings it to life.