01. Styling Basics Including JavaScript

Introduction

HTML provides the structure, CSS handles styling, and JavaScript adds interactivity. Understanding how these three technologies work together is fundamental to web development. While HTML can include basic styling and JavaScript, best practices involve separating concerns and using each technology for its intended purpose.

HTML Structure

HTML provides the foundation:

<div class="container">
    <h1>Title</h1>
    <p>Content</p>
</div>

CSS Styling

CSS styles the HTML:

<style>
    .container {
        background-color: #f0f0f0;
        padding: 20px;
    }
    h1 {
        color: #333;
    }
</style>

JavaScript Interactivity

JavaScript adds behavior:

<script>
    document.querySelector('.container').addEventListener('click', function() {
        this.style.backgroundColor = '#ccc';
    });
</script>

Integration Methods

Inline Styles

<div style="color: red; font-size: 18px;">Styled content</div>

Internal CSS

<style>
    .class { color: red; }
</style>

External CSS

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

Internal JavaScript

<script>
    // JavaScript code
</script>

External JavaScript

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

Best Practices

Separation of Concerns

• HTML: Structure and content
• CSS: Visual presentation
• JavaScript: Behavior and interactivity

External Files

Prefer external files:

<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>

References

• MDN Web Docs - CSS
• MDN Web Docs - JavaScript