HTML vs CSS vs JavaScript
Understand the different roles of HTML, CSS, and JavaScript and how these three technologies work together to build modern web pages.
Introduction
HTML, CSS, and JavaScript are three important technologies commonly used together in web development.
Each technology has a different responsibility. HTML provides the structure, CSS controls the visual presentation, and JavaScript adds behavior and interaction.
Three Core Web Technologies
HTML
HTML defines the structure and content of the web page.
- Headings
- Paragraphs
- Images
- Links
- Lists
- Forms
CSS
CSS controls the appearance and presentation of HTML content.
- Colors
- Fonts
- Spacing
- Layout
- Borders
- Responsive Design
JavaScript
JavaScript adds interaction and dynamic behavior to web pages.
- Events
- Validation
- Dynamic Content
- Calculations
- API Calls
- Interactive Features
1. HTML - Structure
HTML is responsible for defining the content and structure of a web page.
It tells the browser which elements exist on the page.
<h1>Welcome to CIIT Institute ❤️..</h1>
<p>
Learn Web Development.
</p>
<button>
Click Me
</button>Welcome to CIIT Institute ❤️..
Learn Web Development.
2. CSS - Styling
CSS stands for Cascading Style Sheets. It is used to control the appearance of HTML elements.
CSS can change colors, fonts, spacing, borders, sizes, positioning, layouts, and more.
<style>
h1 {
color: blue;
}
p {
font-size: 18px;
}
</style>Welcome to CIIT Institute
This paragraph is styled using CSS.
3. JavaScript - Behavior
JavaScript is used to make web pages interactive and dynamic.
It can respond to user actions such as clicks, typing, form submission, and other events.
<button id="myButton">
Click Me
</button>
<script>
document.getElementById("myButton")
.addEventListener("click", function () {
alert("Button Clicked!");
});
</script>HTML vs CSS vs JavaScript
| Technology | Main Responsibility | Examples |
|---|---|---|
| HTML | Structure and content | Headings, paragraphs, images, links |
| CSS | Styling and presentation | Colors, fonts, layout, spacing |
| JavaScript | Behavior and interaction | Events, validation, dynamic content |
How HTML, CSS and JavaScript Work Together
A modern web page can use all three technologies at the same time.
Complete Example
The following example uses HTML, CSS, and JavaScript together.
<!DOCTYPE html>
<html>
<head>
<title>
HTML CSS JavaScript Example
</title>
<style>
button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>
Welcome to CIIT Institute
</h1>
<p>
Learn Web Development.
</p>
<button id="myButton">
Click Me
</button>
<script>
document.getElementById("myButton")
.addEventListener("click", function () {
alert("Welcome to CIIT Institute!");
});
</script>
</body>
</html>Real-World Analogy
You can understand the relationship between HTML, CSS, and JavaScript using a house example.
HTML
The structure of the house such as walls, rooms, doors, and windows.
CSS
Paint, colors, furniture, decoration, and overall appearance.
JavaScript
Interactive features such as switches, automatic doors, and dynamic actions.
Important Points
- HTML defines the structure of a web page.
- CSS controls the appearance of a web page.
- JavaScript adds behavior and interaction.
- All three technologies can work together.
- HTML is the foundation on which CSS and JavaScript can be applied.
Practice Exercise
- Create an HTML page with one heading.
- Add a paragraph below the heading.
- Use CSS to change the heading color.
- Add a button.
- Use JavaScript to show an alert when the button is clicked.
Summary
HTML defines the structure and content of a web page, CSS controls its appearance, and JavaScript adds interaction and behavior. These technologies are commonly used together to create modern web pages and web applications.