---
CSS (Cascading Style Sheets) and JavaScript are both essential for creating modern,
interactive web pages, but they serve different purposes. CSS is used for styling and
layout, while JavaScript is a programming language that adds interactivity and
dynamic behavior.
---
CSS (Cascading Style Sheets)
CSS focuses on the appearance of a website. It allows developers to control how
HTML elements are displayed across various devices.
1. CSS Syntax
Selector: Specifies the HTML elements to be styled.
Declaration Block: Includes one or more declarations, each comprising a property and
its value.
selector {
property: value;
}
Example:
p{
color: blue;
font-size: 16px;
}
This changes the color and font size of all <p> (paragraph) elements.
2. CSS Selectors
Selectors specify which elements are affected by the styles:
Type Selector: Targets all elements of a given type.
h1 { color: red; }
Targets all <h1> tags.
Class Selector: Targets elements with a specified class.
.intro { color: green; }
ID Selector: Targets a specific element by ID.
#header { background-color: yellow; }
Universal Selector: Applies styles to all elements.
* { margin: 0; padding: 0; }
Descendant Selector: Targets elements within a parent element.
div p { color: gray; }
3. CSS Properties
Some common CSS properties include:
Text Styling:
color: Specifies text color.
font-size: Sets font size.
text-align: Aligns text.
Box Model: Every HTML element is considered a rectangular box, consisting of:
Margins (space outside the element),
Borders (surround the element),
Padding (space inside the element),
Content (inside the padding).
Example:
div {
margin: 20px;
padding: 10px;
border: 2px solid black;
width: 200px;
height: 150px;
}
Backgrounds:
background-color: Sets background color.
background-image: Adds a background image.
Positioning:
static: Default.
relative: Relative to its normal position.
absolute: Positioned relative to the nearest ancestor.
fixed: Relative to the browser window.
Example:
.box {
position: relative;
top: 50px;
left: 100px;
}
Flexbox Layout: Aligns elements along a row or column.
display: flex: Defines a flex container.
justify-content: Aligns items along the main axis.
align-items: Aligns items along the cross axis.
4. Media Queries
Media queries make websites responsive by applying styles based on the device
characteristics, such as screen width.
Example:
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
---
JavaScript
JavaScript is a programming language that controls the behavior of web pages,
allowing for dynamic content updates, interactivity, and more.
1. JavaScript Basics
JavaScript can be added directly in HTML using the <script> tag or linked externally.
Example:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<script>
function showMessage() {
alert("Hello, world!");
}
</script>
</head>
<body>
<button onclick="showMessage()">Click me</button>
</body>
</html>
2. Variables and Data Types
Variables hold data, which can be changed during script execution.
let name = "John"; // String
let age = 30; // Number
let isStudent = true; // Boolean
3. Functions
Functions are reusable blocks of code that perform specific tasks.
function greet(name) {
console.log("Hello, " + name);
}
greet("Alice");
4. DOM Manipulation
JavaScript interacts with the DOM (Document Object Model) to change the structure,
content, or style dynamically.
Example:
<p id="demo">This is a paragraph.</p>
<button onclick="changeText()">Change Text</button>
<script>
function changeText() {
document.getElementById("demo").innerHTML = "Text changed!";
}
</script>
5. Events
JavaScript responds to user actions, known as events. You can attach an event listener
to an element.
document.getElementById("myButton").addEventListener("click", function() {
alert("Button clicked!");
});
6. Conditional Statements
JavaScript executes code based on conditions.
let age = 18;
if (age >= 18) {
console.log("You are an adult.");
} else {
console.log("You are not an adult.");
}
7. Loops
Loops repeatedly execute blocks of code.
For Loop:
for (let i = 0; i < 5; i++) {
console.log(i);
}
While Loop:
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
8. Arrays
Arrays store multiple values in a single variable.
let fruits = ["Apple", "Banana", "Orange"];
console.log(fruits[0]); // "Apple"
9. Objects
Objects store key-value pairs, which represent properties of an entity.
let person = {
firstName: "John",
lastName: "Doe",
age: 25
};
console.log(person.firstName); // "John"
10. JavaScript in Practice
JavaScript can be combined with CSS for interactivity, such as form validation:
<!DOCTYPE html>
<html>
<head>
<style>
.error { color: red; }
</style>
<script>
function validateForm() {
let name = document.getElementById("name").value;
if (name === "") {
document.getElementById("error").innerHTML = "Name cannot be empty!";
return false;
} else {
document.getElementById("error").innerHTML = "";
return true;
}
}
</script>
</head>
<body>
<form onsubmit="return validateForm()">
Name: <input type="text" id="name">
<span id="error" class="error"></span>
<input type="submit" value="Submit">
</form>
</body>
</html>
---
CSS provides the visual structure, while JavaScript brings the web page to life by
adding dynamic interactions. Together, they form the core of modern web
development.
