Integration with CSS and JavaScript

HTML provides the structure of a web page, but to make a page look good and behave interactively, we integrate it with CSS and JavaScript.

🎨 1. Integration of CSS (Cascading Style Sheets)
Purpose of CSS:
CSS controls the style and layout of web pages — colors, fonts, spacing, responsiveness, and more.

How to integrate CSS with HTML:

  • Inline CSS (inside an element)

<p style=”color: blue;”>This is a blue paragraph.</p>

  • Internal CSS (inside <style> tags in the <head>)

<head>
<style>
p {
color: blue;
}
</style>
</head>

  • External CSS (link to a .css file)

Best practice: Use external CSS for clean and maintainable code.

âš¡ 2. Integration of JavaScript

Purpose of JavaScript:
JavaScript adds interactivity, dynamic content, and logic to web pages — like forms validation, animations, popups, etc.

How to integrate JavaScript with HTML:

  • Inline JavaScript (inside an element’s event)

<button onclick=”alert(‘Hello!’)”>Click Me</button>

  • Internal JavaScript (inside <script> tags)

<body>
<script>
alert(‘Welcome to the website!’);
</script>
</body>

  • External JavaScript (link to a .js file)

<body>
<script src=”script.js”></script>
</body>

Best practice: Use external JavaScript for cleaner, organized code.

Scroll to Top