WEB DEVELOPMENT APPLICATION

1. HTML LISTS

2. HTML FORM INPUT TYPES

3. CSS INTRODUCTION

4. CSS HELLO WORLD

5. CSS VERSIONS
HTML LISTS

HTML provides different types of lists to organize and display items. Lists are
used in websites for menus, features, instructions, and much more.

There are three main types of lists in HTML:

• Ordered List (<ol>)

• Unordered List (<ul>)
• Description List (<dl>)

Add an icon or illustration of bulleted and numbered lists.

Ordered List (<ol>)

1. Displays items in a specific sequence (1, 2, 3…).

2. Uses the <ol> tag with nested <li> elements for each list item.

Syntax Example:
<ol>
<li>Wake up</li>
<li>Brush teeth</li>
<li>Eat breakfast</li>
</ol>

Output:
3.Wake up
4.Brush teeth
5.Eat breakfast
Unordered List (<ul>)

1. Displays items without a specific order. Uses bullets (•) instead of numbers.
Created using <ul> and <li> tags.

Syntax Example:
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>
Output:
• Apples
• Bananas
• Oranges
Description Lists ( <dl> )

Used for definitions or pairs (term and description).

<dl> = description list
<dt> = term
<dd> = description of the term
Syntax Example:
<dl>
<dt>HTML</dt> <dd>A markup language for web pages</dd>
<dt>CSS</dt> <dd>Used for styling HTML content</dd>
</dl>

Output:
HTML
A markup language for web pages
CSS
Used for styling HTML content
Nested Lists

Lists can be placed inside other lists. Useful for subcategories or detailed
steps.
Example:
<ul>
<li>Fruits
<ul>
<li>Apples</li>
<li>Bananas</li> Output:
</ul> • Fruits
</li> • Apples
<li>Vegetables</li> • Bananas
</ul> • Vegetables
HTML FORM INPUT TYPES
 Introduction to HTML Input Types

• HTML offers various input types to collect different forms of user data.

• Each type defines the behavior and validation of the input field.

• Used inside the <input> tag within a <form> element.

:
Input Type Description

text Single-line text input

password Input for passwords
email Validates and accepts emails
number Numeric input with controls
checkbox Toggle option (checked/unchecked)
radio Single selection from group
date Date picker
file Upload files
submit Submit form data
button General button
1. Text Input Type (text) type="text" – Basic Text Input

Used to accept single-line plain text from the user.

Most commonly used input type.

Syntax:
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</form>

Features:
No character limit by default
Can be combined with attributes like maxlength, placeholder, and required

Example Output:
Name: [__________]
2. Password Input Type (password) type="password" – Secure Input

Used to hide typed characters.

Ideal for login forms or authentication.

Syntax:
<form>
<label for="pass">Password:</label>
<input type="password" id="pass" name="pass">
</form>

Features:
Displays dots or asterisks instead of text
Still sent as plain text unless encrypted via HTTPS

Example Output:
Password: [••••••••]
3. Radio Input Type (radio) type="radio" – Single Selection from Multiple Options

Let the user select only one option from a predefined group. Each radio button in the group must
have the same name to be grouped.

Syntax:
<form>
<p>Choose your gender:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>

<input type="radio" id="female" name="gender" value="female">

<label for="female">Female</label><br>
</form>
Example Output:
( ) Male
( ) Female
(Only one can be selected at a time)
Checkbox Input Type (checkbox) type="checkbox" – Multiple Options

Allows users to select zero or more options. Ideal for multi-choice input, such as
interests or preferences.

Syntax:

<form>
<label><input type="checkbox" name="interest" value="music"> Music</label><br>
<label><input type="checkbox" name="interest" value="sports"> Sports</label>
</form>

Features:
Each checkbox is independent
Use checked attribute to pre-select
Example Output:
☑️Music
⬜ Sports
CSS INTRODUCTION
CSS INTRODUCTION

• CSS (Cascading Style Sheets) is a language designed to simplify the process of making
web pages presentable.
• It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing,
and positioning.
• HTML uses tags, and CSS uses rule sets.
Importance of CSS in Web Development

Keeps HTML structure and style separate.

Makes websites:
1. Visually appealing
2. Responsive on different devices
3. Easier to maintain and update

Promotes code reusability (one stylesheet → many pages)

Example:

You can change the font or color on all pages by editing just one CSS file.
CSS Syntax

CSS consists of style rules that are interpreted by the browser and applied to the
corresponding elements. A style rule set includes a selector and
a declaration block.

•Selector: Targets specific HTML elements to apply styles.

1. The selector points to the HTML element that you want to style.

•Declaration: Combination of a property and its corresponding value.

1. The declaration block contains one or more declarations separated by

semicolons.

2. Each declaration includes a CSS property name and a value, separated by a

colon.
Ways to Apply CSS

1. Inline CSS: Directly within the HTML element using the style attribute.

<p style="color: blue; font-size: 18px;">Hello World!</p>

2. Internal CSS: Within a <style> tag in the <head> section.

3. External CSS: The external CSS is the CSS linked to an HTML file using
the <link> tag.
CSS Hello world
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
text-align: center;
}
OUTPUT:
</style>
</head>
<body>

<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>

</body>
</html>
CSS Versions
3. CSS2.1 – Finalized in 2011
1. CSS1 – Released in 1996 •A revision of CSS2 with improved browser
•The very first version of CSS. compatibility.
•Provided basic styling: fonts, colors, text •Removed rarely-used or poorly supported
alignment, margins, and borders. features.
•Limited layout capabilities. •Became the foundation for CSS3.

2. CSS2 – Released in 1998 4. CSS3 – Started in 1999 (Ongoing)

•Introduced important features: •Introduced a modular structure (e.g., Flexbox,
 Positioning (absolute, relative) Grid, Transitions, Animations).
 Z-index •Allows independent development and
 Media types implementation.
•Enhanced layout and screen-specific styling. •Enables powerful and responsive web designs.