Stylesheets and Scripts

Connecting external CSS and JS resources to your page.

HTML tags are used to connect external styling rules (CSS) and code functionality (JavaScript) to your document structure.

Linking Tags

<link rel="stylesheet" href="style.css">: Links external CSS stylesheet rules. Placed inside <head>.
<script src="script.js"></script>: Includes internal or external JavaScript files. Can be placed inside <head> or at the very bottom of <body>.

Example

html

<link rel="stylesheet" href="style.css">

<script src="script.js"></script>

Interview questions

What is the difference between 'async' and 'defer' script attributes?

Both fetch scripts asynchronously without blocking HTML parsing. However, `async` executes the script the moment it is downloaded, which blocks parsing during execution. `defer` maintains script order and executes only after the entire HTML document is fully parsed.

Practice

Write code to defer a JavaScript file named main.js.

Hint: Use <script src='main.js' defer></script>.