XQA
Back to Web Development
2026-01-075 min read

If...Else (Web Development)

Learn If...Else (Web Development) step by step with clear examples and exercises.

Title: If...Else Statements in Web Development (HTML/CSS)

Why This Matters

If...Else statements are a fundamental part of web development, allowing you to create dynamic and interactive websites. They help you make decisions based on user input or other conditions, making your website more responsive and engaging. Understanding If...Else statements is crucial for acing coding interviews, debugging real-world issues, and creating impressive projects.

Prerequisites

Before diving into If...Else statements, you should have a basic understanding of HTML and CSS. Familiarize yourself with the following concepts:

  • HTML document structure (`, , , `)
  • Basic HTML elements (`, , , `)
  • CSS selectors (e.g., #id, .class, element > element)
  • CSS properties (e.g., color, background-color, font-size)

Core Concept

If...Else statements in HTML and CSS are used to apply different styles or actions based on specific conditions. In HTML, you can use JavaScript to implement If...Else logic. In CSS, you can't directly use If...Else statements, but you can achieve similar functionality by using multiple selectors and the :hover, :focus, and other pseudo-classes.

HTML (JavaScript)

In HTML, you can use JavaScript to add If...Else logic to your web pages. Here's a simple example of an If...Else statement that checks the user's age and displays different messages based on their age group:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>If...Else Example</title>
</head>
<body>
<h1>What is your age?</h1>
<input type="number" id="age" min="0">
<button onclick="checkAge()">Check Age Group</button>
<p id="result"></p>

<script>
function checkAge() {
let age = document.getElementById('age').value;
if (age <= 12) {
document.getElementById('result').innerHTML = "You are a child.";
} else if (age <= 18) {
document.getElementById('result').innerHTML = "You are a teenager.";
} else if (age <= 65) {
document.getElementById('result').innerHTML = "You are an adult.";
} else {
document.getElementById('result').innerHTML = "You are a senior citizen.";
}
}
</script>
</body>
</html>

CSS (Multiple Selectors)

In CSS, you can't directly use If...Else statements, but you can achieve similar functionality by using multiple selectors and the :hover, :focus, and other pseudo-classes. Here's an example of how to create different styles for links based on their destination:

/* Default style for all links */
a {
color: blue;
}

/* Special style for internal links (links pointing to the same domain) */
a[href^="/"]:hover {
color: red;
}

/* Special style for external links (links pointing to a different domain) */
a[href^="https://"]:hover {
color: green;
}

Worked Example

Let's create an interactive web page that displays different messages based on the user's age and gender. The page will have two input fields for age and gender, a button to submit the form, and a paragraph to display the result.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>If...Else Example</title>
</head>
<body>
<h1>Tell us about yourself!</h1>
<form id="userForm">
<label for="age">Age:</label>
<input type="number" id="age" min="0">
<br>
<label for="gender">Gender:</label>
<select id="gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<br>
<button onclick="checkUser()">Submit</button>
</form>
<p id="result"></p>

<script>
function checkUser() {
let age = document.getElementById('age').value;
let gender = document.getElementById('gender').value;
if (age <= 12) {
if (gender === 'male') {
document.getElementById('result').innerHTML = "You are a young boy.";
} else if (gender === 'female') {
document.getElementById('result').innerHTML = "You are a young girl.";
} else {
document.getElementById('result').innerHTML = "You are a young person.";
}
} else if (age <= 18) {
if (gender === 'male') {
document.getElementById('result').innerHTML = "You are a teenager boy.";
} else if (gender === 'female') {
document.getElementById('result').innerHTML = "You are a teenager girl.";
} else {
document.getElementById('result').innerHTML = "You are a teenager.";
}
} else if (age <= 65) {
if (gender === 'male') {
document.getElementById('result').innerHTML = "You are an adult male.";
} else if (gender === 'female') {
document.getElementById('result').innerHTML = "You are an adult female.";
} else {
document.getElementById('result').innerHTML = "You are an adult.";
}
} else {
document.getElementById('result').innerHTML = "You are a senior citizen.";
}
}
</script>
</body>
</html>

Common Mistakes

  1. Forgetting to initialize variables before using them in If...Else statements.
  2. Using equal signs (=) instead of assignment operators (=, +=, -=, etc.) when modifying variable values within If...Else blocks.
  3. Not considering all possible conditions and handling them appropriately.
  4. Forgetting to close If...Else blocks with proper curly braces {}.
  5. Using the wrong comparison operator (e.g., using == instead of === for strict equality checks).
  6. Assuming that the order of conditions in an If...Else chain matters, when it actually doesn't (the first matching condition is executed).
  7. Not properly escaping user input to prevent cross-site scripting (XSS) attacks.

Practice Questions

  1. Write an HTML/CSS page that displays different messages based on the user's favorite color:
  • If the user selects "red," display "You like red!"
  • If the user selects "blue," display "You like blue!"
  • If the user selects "green," display "You like green!"
  • If the user selects any other color, display "Your favorite color is not supported."
  1. Write an HTML/CSS page that displays different messages based on the user's favorite animal:
  • If the user selects "cat," display "You love cats!"
  • If the user selects "dog," display "You love dogs!"
  • If the user selects "lion," display "You love lions!"
  • If the user selects any other animal, display "Your favorite animal is not supported."

FAQ

What happens if I forget to close an If...Else block with curly braces {}?

  • If you forget to close an If...Else block with curly braces, the code within that block will not be executed properly, leading to unexpected results or errors.

Can I use If...Else statements in CSS?

  • No, you cannot directly use If...Else statements in CSS. However, you can achieve similar functionality by using multiple selectors and pseudo-classes like :hover, :focus, etc.

What is the difference between the assignment operator (=) and the comparison operator (==)?

  • The assignment operator (=) is used to assign a value to a variable, while the comparison operator (==) compares two values for equality. Using the wrong operator can lead to logical errors in your code.

Why should I escape user input when using If...Else statements?

  • Escaping user input helps prevent cross-site scripting (XSS) attacks, which can compromise the security of your website and potentially expose sensitive data. Always sanitize and validate user input before using it in If...Else statements or any other part of your code.
If...Else (Web Development) | Web Development | XQA Learn