Back to course

Lesson 31: Linking CSS and JavaScript (External Resources)

The HTML Masterclass: From Zero to Web Developer

31. Linking CSS and JavaScript (External Resources)

HTML provides the structure, but CSS handles the styling, and JavaScript handles the interactivity. We need to link these external files.

31.1 Linking CSS (<link>)

The <link> tag is a self-closing tag placed inside the <head>. It tells the browser where to find the styling rules.

  • rel (relationship): Always set to stylesheet.
  • href: The relative or absolute path to the CSS file.

html

31.2 Linking JavaScript (<script>)

The <script> tag is used to embed or reference client-side scripts.

  • We place the <script> tag, usually right before the closing </body> tag, for performance reasons.
  • The src attribute points to the external JavaScript file.

html

<!-- Link to our main script file -->
<script src="js/app.js"></script>

Note: While you can use <style> (internal CSS) and inline CSS, linking external files is the industry standard practice for maintaining separation of concerns.