Scribd
Upload
8 views65 pages

HTML Forms: Elements and Syntax Guide

Uploaded by

axenbgl2
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views65 pages

HTML Forms: Elements and Syntax Guide

Uploaded by

axenbgl2
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

1

HTML Form:

An HTML form is a section of a document which contains controls such as text fields, password
fields, checkboxes, radio buttons, submit button, menus etc.

An HTML form facilitates the user to enter data that is to be sent to the server for processing.

Why Use HTML Forms?

HTML forms are used to collect user information from the webpage and send it to the server.
HTML forms are required if you want to collect some data from of the site visitor.

For example: If a user want to purchase some items on internet, he/she must fill the form such as
shipping address and credit/debit card details so that item can be sent to the given address.

The common uses for HTML forms are:

 Creating registration forms so that users can sign up with their information and
authenticate further to access the functionalities of the websites/web applications.
 Collect data through the different types of surveys, feedback, etc.
 Uploading the images, resumes, or any other type of files.

HTML Form Syntax

<form action="server url" method="get|post">


//input controls e.g. textfield, textarea, radiobutton, button
</form>

HTML Form Tags

Let's see the list of HTML 5 form tags.

Tag Description
<form> It defines an HTML form to enter inputs by the used side.
<input> It defines an input control.
<textarea> It defines a multi-line input control.
<label> It defines a label for an input element.
<fieldset> It groups the related element in a form.
<legend> It defines a caption for a <fieldset> element.
<select> It defines a drop-down list.
2

<optgroup It defines a group of related options in a drop-down list.


>
<option> It defines an option in a drop-down list.
<button> It defines a clickable button.

HTML 5 Form Tags

Let's see the list of HTML 5 form tags.

Tag Description
<datalist It specifies a list of pre-defined options for input control.
>
<keygen It defines a key-pair generator field for forms.
>
<output> It defines the result of a calculation.

Working with Form elements:

Working with form elements typically involves creating and managing various HTML form
controls, such as text fields, checkboxes, radio buttons, dropdowns, and buttons. Form elements
allow users to input data which can then be submitted to a server or processed on the client side.

Here’s a quick overview of the basic form elements and how you might work with them:

1. Text Fields

Text fields are used to allow users to input text.

<form action="/submit" method="POST">


<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br><br>
</form>
2. Password Fields

Password fields are used for sensitive input, hiding the characters typed.

<label for="password">Password:</label>
<input type="password" id="password" name="password">
<br><br>
3

3. Checkboxes

Checkboxes allow users to select multiple options.

<label for="subscribe">Subscribe to newsletter</label>


<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<br><br>
4. Radio Buttons

Radio buttons allow users to choose one option from a group.

<label for="gender-male">Male</label>
<input type="radio" id="gender-male" name="gender" value="male">
<br><br>
<label for="gender-female">Female</label>
<input type="radio" id="gender-female" name="gender" value="female">
<br><br>
5. Select Dropdown (Drop-down List)

Dropdown menus let users select an option from a list.

<label for="country">Country:</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="uk">United Kingdom</option>
</select>
<br><br>
6. Textarea

Textarea is used for multiline text input, such as comments.

<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
<br><br>
7. Buttons

Buttons are used for submitting or resetting the form.

<button type="submit">Submit</button>
<button type="reset">Reset</button>
4

PROGRAM FOR HTML FORM:

<html>

<head>

<title>All HTML Form Elements</title>

</head>

<body bgcolor="pink">

<h2>Complete HTML Form Example</h2>

<form >

<!-- Text Field -->

<label for="name">Name:</label>

<input type="text" id="name" name="name"><br><br>

<!-- Password Field -->

<label for="password">Password:</label>

<input type="password" id="password" name="password"><br><br>

<!-- Email Field -->

<label for="email">Email:</label>

<input type="email" id="email" name="email"><br><br>

<!-- Number Field -->

<label for="age">Age:</label>

<input type="number" id="age" name="age" min="1" max="100"><br><br>


5

<!-- Radio Buttons -->

<label>Gender:</label>

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

<label for="male">Male</label>

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

<label for="female">Female</label><br><br>

<!-- Checkboxes -->

<label>Hobbies:</label><br>

<input type="checkbox" id="reading" name="hobby" value="reading">

<label for="reading">Reading</label><br>

<input type="checkbox" id="traveling" name="hobby" value="traveling">

<label for="traveling">Traveling</label><br>

<input type="checkbox" id="music" name="hobby" value="music">

<label for="music">Music</label><br><br>

<!-- Dropdown List -->

<label for="country">Select your Country:</label><br>

<select id="country" name="country">

<option value="india">India</option>

<option value="usa">USA</option>

<option value="uk">UK</option>

<option value="canada">Canada</option>

<br>
6

<br>

<!-- Reset and Submit Buttons -->

<input type="reset" value="Reset">

<input type="submit" value="Submit">

</form>

</body>

</html>

Output:

Form attributes:

Form attributes are special settings that you can add to the <form> tag to control how the form
behaves. Think of them as the instructions for your form: they tell the browser where to send the
data, how to send it, and how to handle the form. Let's break them down.
7

Common Form Attributes:

1. action
o Tells the form where to send the data when it's submitted (usually to a server or a
specific page).
o Example:

<form action="/submit">

o Explanation: When the form is submitted, the data will be sent to /submit.
2. method
o Tells the browser how to send the form data. There are two main methods:
 GET: Sends the data as part of the URL (in the browser’s address bar).
 POST: Sends the data as part of the request body (not visible in the URL).
o Example:

<form action="/submit" method="POST">

Explanation: This sends the form data securely to the server at /submit using the
POST method, which is safer for sensitive information.

3. target
o Specifies where to open the response after the form is submitted.
o Common values:
 _self: Open in the same tab or window (default).
 _blank: Open in a new tab or window.
o Example:

<form action="/submit" target="_blank">

o Explanation: The form data will be sent to /submit, and the response will open in
a new tab.
4. enctype
o Specifies how the form data should be encoded when sending it to the server
(useful for file uploads).
o Example:

<form action="/upload" method="POST" enctype="multipart/form-data">

Explanation: This form is set up to upload files (like images or documents).

5. name
o Provides a name for the form (useful for referencing the form in JavaScript).
o Example:

<form name="contactForm">
8

6. autocomplete
o Controls whether the browser should automatically fill in form fields based on
the user's previous input.
o Common values:
 on: Enable autocomplete (default).
 off: Disable autocomplete.
o Example:

<form action="/submit" autocomplete="off">

o Explanation: This form will not show any saved input in the form fields.
7. accept-charset
o Specifies the character encoding to be used when submitting the form data to the
server.
o Example:

<form action="/submit" accept-charset="UTF-8">

o Explanation: The form will use the UTF-8 encoding when sending the data.

note:

 action="/submit": The form will send the data to /submit.


 method="POST": The data will be sent securely (in the request body).
 target="_blank": The response will open in a new tab.
 enctype="multipart/form-data": Allows file uploading.
 autocomplete="off": The form fields won’t be auto-filled.
 name="myForm": You can access this form in JavaScript as [Link].
 accept-charset="UTF-8": Data will be encoded in UTF-8.

note:

 action tells where to send the data.


 method tells how to send it (either GET or POST).
 target specifies where the response goes.
 enctype is used for file uploads.
 name allows you to reference the form in JavaScript.
 autocomplete controls auto-filling of fields.
 accept-charset specifies the character encoding.

Working with IFrames: An HTML iframe is used to display a web page within a web page.

HTML Iframe Syntax


9

The HTML <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

Syntax
<iframe src="url" title="description"></iframe>

Iframe - Set Height and Width

Use the height and width attributes to specify the size of the iframe.

The height and width are specified in pixels by default:

Example
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

Example:

File :[Link]

<html>

<body bgcolor="pink">

<h2> Iframes</h2>

<p>The HTML tag specifies an inline frame. An inline frame is used to embed another
document within the
current HTML document.</p>

<br>

<p>The most common use cases include: Embedding Multimedia Content – Iframe elements are
commonly
used to embed multimedia content like videos, audio files, and animations from platforms such
as YouTube, SoundCloud.</p>

</body>

</html>

File:[Link]

<html>

<body>
10

<h2>HTML Iframes</h2>

<p>You can use the height and width attributes to specify the size of the iframe:</p>

<iframe src="[Link]" height="200" width="300" title="Iframe Example"></iframe>

</body>

</html>

TO RUN THE CODE:CLICK TO File:[Link]

OUTPUT:

Building Responsive Webpage:

To build a responsive webpage using HTML, focus on using the viewport meta tag, fluid grids,
and responsive images.

Viewport Meta Tag:

The viewport meta tag is a key component in building responsive websites. It controls how
your webpage is displayed and scaled on different devices, especially mobile phones and tablets.

Basic Viewport Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">


11

🔍Explanation of Attributes:
Attribute Description

width=device-width Sets the width of the viewport to the device’s screen width.

initial-scale=1.0 Sets the initial zoom level when the page is loaded.

fluid grids:

A fluid grid layout uses relative units like percentages (%) instead of fixed units like pixels (px)
to create layouts that automatically adjust to the screen size. This is a core principle of
responsive web design.

Responsive Images:

Responsive images automatically resize to fit the screen size or container, making them essential
for mobile-friendly websites.

 Images should also scale proportionally to avoid overflow on smaller screens.


 Use the max-width: 100%; CSS property for images:
EXAMPLE:

img {
max-width: 100%;
height: auto;
}
Cascading Style Sheets:

CSS Introduction:

CSS is the language we use to style an HTML document.

CSS describes how HTML elements should be displayed

What is CSS?

 CSS stands for Cascading Style Sheets


 CSS describes how HTML elements are to be displayed on screen, paper, or in other
media
 CSS saves a lot of work. It can control the layout of multiple web pages all at once
 External stylesheets are stored in CSS files

CSS (Cascading Style Sheets) is the language used to style HTML elements — controlling
layout, colors, fonts, spacing, responsiveness, and more.

CSS Syntax: A CSS rule consists of a selector and a declaration block.


12

CSS Syntax

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

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

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

Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded
by curly braces.

Example Explained

 p is a selector in CSS (it points to the HTML element you want to style: <p>).
 color is a property, and red is the property value
 text-align is a property, and center is the property value

<html> OUTPUT:
<head>
<style>
p{
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled
with CSS.</p>
</body>
</html>

CSS Comments:

CSS comments are used to add notes or explanations inside your stylesheet. They are ignored
by browsers and do not affect the layout or performance.
13

A CSS comment is placed inside the <style> element, and starts with /* and ends with */

Example
/* This is a single-line comment */
p{
color: red;
}

You can add comments wherever you want in the code:

Example
p{
color: red; /* Set text color to red */
}

Even in the middle of a code line:

Example
p{
color: /*red*/blue;
}

Comments can also span multiple lines:

Example
/* This is
a multi-line
comment */

p{
color: red;
}

In the following example, we use a combination of HTML and CSS comments:

<html>
<head>
<style>
p{
color: red; /* Set text color to red */
}
14

</style>
</head>
<body>

<h2>My Heading</h2>

<!-- These paragraphs will be red -->


<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>HTML and CSS comments are not shown in the output.</p>

</body>
</html>

OUTPUT:

Applying Styles to HTML Elements:

You can apply styles to HTML elements using CSS in three main ways:

1. Inline CSS

Applied directly to an HTML element using the style attribute.

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

The following example sets the text color of the <h1> element to blue, and the text color of
the <p> element to red:

Example

<html>

<body>
15

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

</body>

</html>

Output:

A Blue Heading

A red paragraph.

2. Internal CSS

It is Written inside a <style> tag within the <head> section of the HTML

An internal CSS is used to define a style for a single HTML page.

The following example sets the text color of ALL the <h1> elements (on that page) to blue, and
the text color of ALL the <p> elements to red. In addition, the page will be displayed with a
"powderblue" background color:

Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
16

3. External CSS

Stored in a separate .css file and linked to your HTML using <link>.

An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the <head> section of each HTML page:

[Link]:
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Hello from external CSS</h1>
</body>
</html>
[Link]:
h1 {
color: purple;
font-family: Verdana;
}
To run:

Click [Link]

Output:

Style specification formats:

In CSS (Cascading Style Sheets), style specifications define how HTML elements should be
displayed. There are three main formats for specifying CSS styles:

Format Location Use Case


Inline CSS Inside HTML element (style) Quick changes, testing
Internal CSS <style> tag in <head> Single-page styling
External CSS Linked .css file Large projects, reusable styles

In CSS, styles are defined by properties and values. However, the syntax of how these
properties and values are written can follow a few specific formats. These formats help
17

determine the type of styling to be applied. Let’s explore the different ways you can define styles
in CSS:

1. Standard Property-Value Syntax

This is the basic and most common format in CSS, where each property is followed by a value.

selector {
property: value;
}
Example:
body {
background-color: #f0f0f0;
color: #333;
}

In this case:

 Property: background-color, color


 Value: #f0f0f0, #333

2. Shorthand Property Syntax

Some CSS properties allow for shorthand notation, combining multiple properties into one line.

Example 1: Font Shorthand


h1 {
font: italic 20px Arial, sans-serif;
}

This is shorthand for:

 font-style: italic;
 font-size: 20px;
 font-family: Arial, sans-serif;

Selector forms:

In CSS, selectors are patterns used to select and style specific HTML elements. They define to
which HTML elements the styles should be applied to.
18

Here are the main forms of CSS selectors, explained with simple examples:

The CSS element Selector

The element selector selects HTML elements based on the element name. Selects elements by
their tag name.

Example

Here, all <p> elements on the page will be center-aligned, with a red text color:

p{
text-align: center;
color: red;
}

<html>

<head>

<style>

p{

text-align: center;

color: red;

</style>

</head>

<body>

<p>Every paragraph will be affected by the style.</p>

<p id="ELEMENT SELECTOR">Me too!</p>

<p>And me!</p>

</body>

</html>

OUTPUT:
19

CSS ID Selector (#idname):

Selects a single element with a specific ID.

The id of an element is unique within a page, so the id selector is used to select one unique
element!

To select an element with a specific id, write a hash (#) character, followed by the id of the
element.

Example
The CSS rule below will be applied to the HTML element with id="para1":

<html>

<head>

<style>

#para1 {

text-align: center;

color: red;

</style>

</head>

<body>

<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the style.</p>

</body>

</html>
20

OUTPUT:

Hello World!

This paragraph is not affected by the style.

The CSS class Selector

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

Example
In this example all HTML elements with class="center" will be red and center-aligned:

<html>

<head>

<style>

.center {

text-align: center;

color: red;

</style>

</head>

<body>

<h1 class="center">Red and center-aligned heading</h1>

<p class="center">Red and center-aligned paragraph.</p>

</body>

</html>

OUTPUT:
21

Red and center-aligned heading

Red and center-aligned paragraph.

The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

Example

The CSS rule below will affect every HTML element on the page:

<html>

<head>

<style>

*{

text-align: center;

color: blue;

</style>

</head>

<body>

<h1>Hello world!</h1>

<p>Every element on the page will be affected by the style.</p>

<p id="para1">Me too!</p>

<p>And me!</p>

</body>

</html>

OUTPUT:
22

Hello world!

Every element on the page will be affected by the style.

Me too!

And me!

Group Selector (,)

Selects multiple elements and applies the same styles to all.

h1, h2, p {
color: green;
}

CSS Margins:

Margins are used to create space around elements, outside of any defined borders. The
CSS margin properties are used to create space around elements, outside of any defined borders.

With CSS, you have full control over the margins. There are properties for setting the margin for
each side of an element (top, right, bottom, and left).

CSS has properties for specifying the margin for each side of an element:

 margin-top
 margin-right
 margin-bottom
 margin-left

All the margin properties can have the following values:

 auto - the browser calculates the margin


 length - specifies a margin in px, pt, cm, etc.
 % - specifies a margin in % of the width of the containing element
 inherit - specifies that the margin should be inherited from the parent element

Example

Set different margins for all four sides of a <p> element:

<html>

<head>
23

<style>

div{

border: 1px solid black;

margin-top: 100px;

margin-bottom: 100px;

margin-right: 150px;

margin-left: 80px;

background-color: lightblue;

</style>

</head><body>

<h2>Using individual margin properties</h2>

<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of
100px, and a left margin of 80px.</div>

</body> </html>

Output:

Margin - Shorthand Property

To shorten the code, it is possible to specify all the margin properties in one property.

The margin property is a shorthand property for the following individual margin properties:

 margin-top
 margin-right
 margin-bottom
24

 margin-left

So, here is how it works:

If the margin property has four values:

 margin: 25px 50px 75px 100px;


o top margin is 25px
o right margin is 50px
o bottom margin is 75px
o left margin is 100px

Example

Use the margin shorthand property with four values:

p{
margin: 25px 50px 75px 100px;
}

The auto Value

You can set the margin property to auto to horizontally center the element within its container.

The element will then take up the specified width, and the remaining space will be split equally
between the left and right margins.
25

Example

Use margin: auto:

<html>

<head>

<style>

div {

width: 300px;

margin: auto;

border: 1px solid red;

</style>

</head>

<body>

<h2>Use of margin: auto</h2>

<p>You can set the margin property to auto to horizontally center the element within its
container. The element will then take up the specified width, and the remaining space will be
split equally between the left and right margins:</p>

<div>

This div will be horizontally centered because it has margin: auto;

</div>

</body>

</html>

Output:
26

CSS Padding:

Padding is used to create space around an element's content, inside of any defined borders.

The CSS padding properties are used to generate space around an element's content, inside of
any defined borders.

With CSS, you have full control over the padding. There are properties for setting the padding
for each side of an element (top, right, bottom, and left).

CSS has properties for specifying the padding for each side of an element:

 padding-top
 padding-right
 padding-bottom
 padding-left

All the padding properties can have the following values:

 length - specifies a padding in px, pt, cm, etc.


 % - specifies a padding in % of the width of the containing element
 inherit - specifies that the padding should be inherited from the parent element

Note: Negative values are not allowed.

Example

Set different padding for all four sides of a <div> element:

<html>

<head>

<style>

div {
27

border: 1px solid black;

background-color: lightblue;

padding-top: 50px;

padding-right: 30px;

padding-bottom: 50px;

padding-left: 80px;

</style>

</head>

<body>

<h2>Using individual padding properties</h2>

<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of
50px, and a left padding of 80px.</div>

</body>

</html>

Output:

Padding - Shorthand Property

To shorten the code, it is possible to specify all the padding properties in one property.

The padding property is a shorthand property for the following individual padding properties:
28

 padding-top
 padding-right
 padding-bottom
 padding-left

So, here is how it works:

If the padding property has four values:

 padding: 25px 50px 75px 100px;


o top padding is 25px
o right padding is 50px
o bottom padding is 75px
o left padding is 100px

Example

Use the padding shorthand property with four values:

div {
padding: 25px 50px 75px 100px;
}

If the padding property has three values:

 padding: 25px 50px 75px;


o top padding is 25px
o right and left paddings are 50px
o bottom padding is 75px

Example

Use the padding shorthand property with three values:

div {
padding: 25px 50px 75px;
}

If the padding property has two values:

 padding: 25px 50px;


o top and bottom paddings are 25px
o right and left paddings are 50px
29

Example

Use the padding shorthand property with two values:

div {
padding: 25px 50px;
}

If the padding property has one value:

 padding: 25px;
o all four paddings are 25px

Example

Use the padding shorthand property with one value:

div {
padding: 25px;
}

CSS Height:

The height property sets the height of an element.

The height of an element does not include padding, borders, or margins!

If height: auto; the element will automatically adjust its height to allow its content to be
displayed correctly.

If height is set to a numeric value (like pixels, (r)em, percentages) then if the content does not fit
within the specified height, it will overflow. How the container will handle the overflowing
content is defined by the overflow property.

CSS Syntax
height: auto|length|initial|inherit;
Property Values

Value Description

auto The browser calculates the height. This is default


30

length Defines the height in px, cm, etc. Read about length units

% Defines the height in percent of the containing block

initial Sets this property to its default value. Read about initial

inherit Inherits this property from its parent element.

<html>

<head>

<style>

.box1 {

background-color: lightblue;

height: 100px;

width: 200px;

.box2 {

background-color: lightgreen;

height: 50%;

width: 200px;

.container {

background-color: lightgray;

height: 300px;

width: 220px;
31

padding: 10px;

</style>

</head>

<body>

<div class="container">

<div class="box1">Box 1 has box 1 properties </div>

<div class="box2">Box 2 has box 2 properties </div>

</div>

</body>

</html>

Output:

CSS Width: The width property sets the width of an element.

The width of an element does not include padding, borders, or margins!

CSS Syntax
32

width: auto|value|initial|inherit;
Property Values

Value Description

auto Default value. The browser calculates the width

length Defines the width in px, cm, etc. Demo ❯

% Defines the width in percent of the containing block

initial Sets this property to its default value.

inherit Inherits this property from its parent element.

CSS Text:

CSS Text properties are used to control the appearance and layout of text content on a webpage.
Here are the most commonly used text-related properties in CSS:

🔹 1. color

Sets the color of the text.

p{
color: blue;
}

2. text-align

Aligns the text in an element.

h1 {
text-align: center;
}
33

Values: left, right, center, justify

3. text-decoration

Adds decoration to the text.

a{
text-decoration: none;
}

Values: none, underline, overline, line-through

4. text-transform

Controls capitalization of text.

h2 {
text-transform: uppercase;
}

Values: none, capitalize, uppercase, lowercase

5. letter-spacing

Sets the space between characters.

p{
letter-spacing: 2px;
}
6. word-spacing

Sets the space between words.

p{
word-spacing: 5px;
}

7. line-height

Sets the space between lines of text.

p{
line-height: 1.5;
}
34

8. text-indent

Indents the first line of text.

p{
text-indent: 50px;
}

9. white-space

Controls how white space inside an element is handled.

pre {
white-space: pre;
}

Values: normal, nowrap, pre, pre-line, pre-wrap

10. direction

Sets the text direction.

p{
direction: rtl;
}

Values: ltr (left-to-right), rtl (right-to-left)

Example:
<html>

<head>

<title>CSS Text Properties Example</title>

<style>

.text-example {

color: darkblue; /* 1. Text color */

text-align: justify; /* 2. Text alignment */

text-decoration: underline; /* 3. Text decoration */

text-transform: capitalize; /* 4. Text transformation */


35

letter-spacing: 2px; /* 5. Space between letters */

word-spacing: 2px; /* 6. Space between words */

line-height: 1.8; /* 7. Line height */

text-indent: 40px; /* 8. Indent the first line */

white-space: normal; /* 9. White space handling */

direction: ltr; /* 10. Text direction */

</style>

</head>

<body>

<h2>CSS Text Properties Demo</h2>

<p class=" text-example">

this is an example paragraph to demonstrate all css text properties used in a single program. it
shows how
you can control the appearance of text on a web page with color, alignment, spacing, decoration,
and more.

</p>

</body>

</html>

Output:

CSS TEXT Features:


Property Description

color Sets text color

text-align Aligns text


36

Property Description

text-decoration Adds underline

text-transform Capitalizes each word

letter-spacing Increases space between letters

word-spacing Adds space between words

line-height Adds space between lines

text-indent Indents first line of paragraph

white-space Handles white spaces

direction Sets text flow direction

CSS Text Alignment:

Text alignment in CSS is controlled using the text-align property. It specifies the horizontal
alignment of text inside an element (like a paragraph, heading, div, etc.).

Syntax:
selector {
text-align: value;
}

Common Values of text-align:


Value Description

left Aligns the text to the left (default for LTR)

right Aligns the text to the right

center Centers the text

justify Aligns text to both left and right edges

start Aligns text to the start of the writing direction


37

<html>

<head>

<title>CSS Text Alignment</title>

<style>

.left-align {

text-align: left;

.right-align {

text-align: right;

.center-align {

text-align: center;

.justify-align {

text-align: justify;

</style>

</head>

<body>

<h2 class="center-align">CSS Text Alignment Example</h2>

<p class="left-align">This paragraph is aligned to the left.</p>

<p class="right-align">This paragraph is aligned to the right.</p>

<p class="center-align">This paragraph is centered.</p>

<p class="justify-align"> This paragraph has Justify property </p>

</body>
38

</html>

Output:

CSS Text Decoration:

The text-decoration property in CSS is used to add or remove decorations from text, such as
underlines, overlines, line-throughs, or none.

Syntax:
selector {
text-decoration: value;
}

Common Values of text-decoration:


Value Description

none Removes any decoration (default for <a>)

underline Adds a line below the text

overline Adds a line above the text

line-through Draws a line through the text

underline overline Combines multiple decorations

Example:

<html>

<head>

<title>CSS Text Decoration</title>

<style>

.underline {

text-decoration: underline;
39

.overline {

text-decoration: overline;

.line-through {

text-decoration: line-through;

.no-decoration {

text-decoration: none;

.combined {

text-decoration: underline overline;

</style>

</head>

<body>

<h2>CSS Text Decoration Example</h2>

<p class="underline">This text is underlined.</p>

<p class="overline">This text has an overline.</p>

<p class="line-through">This text has a line through it.</p>

<p class="combined">This text is both underlined and overlined.</p>

</body>

</html>

Output:
40

CSS Text Transformation:

The text-transform property in CSS is used to control the capitalization of text. It allows you to
make text appear in uppercase, lowercase, or with capitalized first letters—without changing
the original HTML content.

Syntax:
selector {
text-transform: value;
}

Common Values of text-transform:


Value Description

none No transformation (default)

capitalize Capitalizes the first letter of each word

uppercase Transforms all characters to uppercase

lowercase Transforms all characters to lowercase

<html>

<head>

<title>CSS Text Transformation</title>

<style>

.none {

text-transform: none;
41

.capitalize {

text-transform: capitalize;

.uppercase {

text-transform: uppercase;

.lowercase {

text-transform: lowercase;

</style>

</head>

<body>

<h2>CSS Text Transform Examples</h2>

<p class="none">this is normal text.</p>

<p class="capitalize">this is capitalized text.</p>

<p class="uppercase">this is uppercase text.</p>

<p class="lowercase">THIS IS LOWERCASE TEXT.</p>

</body>

</html>

Output:

CSS Text Transform Examples

this is normal text.

this is capitalized text.

THIS IS UPPERCASE TEXT.


42

THIS IS LOWERCASE TEXT.

CSS Text Spacing:

In CSS, text spacing controls the amount of space between characters, words, and lines in a
block of text. The main properties are:

1. letter-spacing

Controls the space between characters.

p{
letter-spacing: 2px;
}
Value Description

normal Default spacing

length Custom spacing (e.g. 2px)

2. word-spacing

Controls the space between words.

p{
word-spacing: 5px;
}
Value Description

normal Default spacing

length Custom spacing (e.g. 5px)

3. line-height

Controls the space between lines of text (also called leading).

p{
line-height: 1.6;
}
43

Value Description

normal Default line spacing

number Multiplier (e.g. 1.5, 2)

length Fixed length (e.g. 20px)

% Percentage of font size (e.g. 150%)

<html>

<head>

<title>CSS Text Spacing</title>

<style>

.spacing-example {

letter-spacing: 3px; /* space between letters */

word-spacing: 10px; /* space between words */

line-height: 1.8; /* space between lines */

</style>

</head>

<body>

<h2>CSS Text Spacing Example</h2>

<p class="spacing-example">

This paragraph shows how to use letter spacing, word spacing, and line height in CSS. </p>

</body>

</html>

Output:
44

CSS Text Shadow:

The text-shadow property in CSS adds shadow effects to text. It's used to enhance the
appearance of text by giving it a shadow with custom color, blur, and offset.

Syntax:
selector {
text-shadow: h-offset v-offset blur-radius color;
}
Parameters:
Parameter Description

h-offset Horizontal offset (required)

v-offset Vertical offset (required)

blur-radius Optional blur radius (optional)

color Shadow color (optional but commonly used)

<html>

<head>

<title>CSS Text Shadow</title>

<style>

.shadow-simple {

text-shadow: 2px 2px red;

.shadow-blur {

text-shadow: 3px 3px 5px gray;

.shadow-multiple {

text-shadow: 2px 2px 2px black, -2px -2px 2px lightgray;

</style>
45

</head>

<body>

<h2 class="shadow-simple">Simple Shadow</h2>

<h2 class="shadow-blur">Blurred Shadow</h2>

<h2 class="shadow-multiple">Multiple Shadows</h2>

</body>

</html>

1. .shadow-simple
.shadow-simple {
text-shadow: 2px 2px red;
}
Explanation:

 2px: Horizontal offset (moves shadow 2 pixels right)


 2px: Vertical offset (moves shadow 2 pixels down)
 red: Shadow color
 No blur is used, so the shadow is sharp and solid

Result: A simple red shadow to the right and bottom of the text.

2. .shadow-blur
.shadow-blur {
text-shadow: 3px 3px 5px gray;
}
Explanation:

 3px: Horizontal offset (3 pixels right)


 3px: Vertical offset (3 pixels down)
 5px: Blur radius (makes the shadow soft/fuzzy)
 gray: Shadow color

Result: A soft gray shadow with a blurry effect around the text.

3. .shadow-multiple
.shadow-multiple {
text-shadow: 2px 2px 2px black, -2px -2px 2px lightgray;
}
46

Explanation:

This uses two shadows on the same text:

1. First Shadow:
o 2px 2px 2px black:
➤ Right and down with black color and blur
2. Second Shadow:
o -2px -2px 2px lightgray:
➤ Left and up with light gray color and blur

Result: A layered, 3D effect with black shadow on one side and light gray on the other.

Summary Table:
Class Effect Appearance

.shadow-simple Red, sharp shadow Basic 2D shadow

.shadow-blur Gray, soft/fuzzy shadow Smooth look

.shadow-multiple Black & lightgray layered shadows 3D or glowing effect

CSS Font properties:

CSS has several properties related to fonts that allow you to control the appearance of text.
Below are the main CSS font properties:

The font property is a shorthand property for:

 font-style
 font-variant
 font-weight
 font-size/line-height
 font-family

CSS font-style Property


The font-style property specifies the font style for a text.

<html>

<head>
47

<style>

p.a {

font-style: normal;

p.b {

font-style: italic;

p.c {

font-style: oblique;

</style>

</head>

<body>

<h1>The font-style Property</h1>

<p class="a">This is a paragraph, normal.</p>

<p class="b">This is a paragraph, italic.</p>

<p class="c">This is a paragraph, oblique.</p>

</body>

</html>

Output:
48

CSS font-variant Property:


The font-variant property specifies whether or not a text should be displayed in a small-caps font.

<html>

<head>

<style>

[Link] {

font-variant: normal;

[Link] {

font-variant: small-caps;

</style>

</head>

<body>

<h1>The font-variant Property</h1>

<p class="normal">My name is sam.</p>

<p class="small">My name is sam.</p>

</body>

</html>

Output:

CSS font-weight Property:


The font-weight property sets how thick or thin characters in text should be displayed.
49

Controls the thickness of the font.

h1 {
font-weight: bold;
}

 Possible values:
o normal: Regular weight.
o bold: Bold weight.
o Numeric values (100 to 900), where 400 is normal and 700 is bold.

CSS line-height Property:

The line-height property specifies the height of a line.

Note: Negative values are not allowed.

<html>

<head>

<style>

div.a {

line-height: normal;

div.b {

line-height: 1.6;

div.c {

line-height: 80%;

div.d {

line-height: 200%;

</style>
50

</head>

<body>

<h1>The line-height Property</h1>

<h2>line-height: normal (default):</h2>

<div class="a">This is a paragraph with a standard line-height.<br>

</div>

<h2>line-height: 1.6 </h2>

<div class="b">This is a paragraph with the recommended line-height.<br>

</div>

<h2>line-height: 80%:</h2>

<div class="c">This is a paragraph with a smaller line-height.<br>

</div>

<h2>line-height: 200%:</h2>

<div class="d">This is a paragraph with a bigger line-height.<br>

</div>

</body>

</html>

Output:
51

CSS font-family Property:

The font-family property specifies the font for an element.

There are two types of font family names:

 family-name - The name of a font-family, like "times", "courier", "arial", etc.


 generic-family - The name of a generic-family, like "serif", "sans-serif", "cursive",
"fantasy", "monospace".

Note: Separate each value with a comma.

<html>

<head>

<style>

p.a {

font-family: Times New Roman;

p.b {
52

font-family: Arial;

</style>

</head>

<body>

<h1>The font-family Property</h1>

<p class="a">This is a paragraph, shown in the Times New Roman font.</p>

<p class="b">This is a paragraph, shown in the Arial font.</p>

</body>

</html>

Output:

CSS List:

In CSS, lists can be styled in various ways to control their appearance. Here’s a clear explanation
of how CSS handles lists:

CSS List properties:

1. list-style-type

Specifies the type of marker (bullet or number).

Example:

ul {
list-style-type: square;
}

Common values:
53

disc (default)
circle
square
decimal (for <ol>)
lower-roman
upper-alpha
none (removes bullets/numbers)

2. list-style-position

Defines whether the marker appears inside or outside the list item's content box.

Example:

ul {
list-style-position: inside;
}

Values:

 inside
 outside (default)

3. list-style-image

Replaces default bullets with a custom image.

Example:

ul {
list-style-image: url('[Link]');
}
4. list-style

A shorthand property to set all three list styles at once.

Example:

ul {
list-style: square inside url('[Link]');
}
Example:
<html>

<head>
54

<title>CSS List Example</title>

<style>

/* Style for unordered list */

[Link] list {

list-style-type: square;

color: darkblue;

font-size: 18px;

/* Style for ordered list */

[Link] list {

list-style-type: upper-roman;

color: green;

font-weight: bold;

</style>

</head>

<body>

<h2>Unordered List Example</h2>

<ul class="unordered list">

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ul>

<h2>Ordered List Example</h2>

<ol class="ordered list">


55

<li>Step One</li>

<li>Step Two</li>

<li>Step Three</li>

</ol>

</body>

</html>

Output:

The CSS box model: The CSS box model is essentially a box that wraps around every HTML
element. It consists of: content, padding, borders and margins.

The CSS Box Model is a fundamental concept in web design that describes how elements are
structured and spaced on a webpage. Every HTML element is treated as a box, and this model
defines how the size of that box is calculated.

Parts of the CSS Box Model

Each box consists of four areas (from inside out):


56

Box Model Components:

1. Content – The actual content (text, image, etc.)


2. Padding – Space between content and border
3. Border – Line surrounding padding and content
4. Margin – Space outside the border; separates from other elements

Program:

<html>

<head>

<title>CSS Box Model Demo</title>

<style>

.box1 {

width: 300px;

height: 100px;

padding: 20px;

border: 5px solid darkblue;

margin: 20px;

background-color: lightblue;

font-family: Arial;

.box2 {
57

padding: 40px;

border: 10px dashed green;

background-color: lightgreen;

</style>

</head>

<body>

<h2>CSS Box Model Example</h2>

<div class="box1">

This is Box 1 with 20px padding and 5px solid border.

</div>

<div class="box2">

This is Box 2 with 40px padding and 10px dashed border.

</div>

</body>

</html>

Output:
58

CSS links:

In CSS, links (<a> tags) can be styled to look and behave differently in various states like
normal, hover, visited, etc. This makes your website more interactive and visually appealing.

HTML Example of a Link:


<a href="[Link] Google</a>

CSS Link States:

There are 5 main states you can style for a link:

Selector Description

a:link Unvisited link (default state)

a:visited Link the user has already visited

a:hover When mouse pointer is over the link

a:active While the link is being clicked

a:focus When the link is selected (e.g., by keyboard)

<html>
59

<head>

<title>CSS Links Example</title>

<style>

a:link {

color: blue;

text-decoration: none;

a:visited {

color: red;

a:hover {

color: red;

text-decoration: underline;

a:active {

color: green;

</style>

</head>

<body>

<h2>CSS Link Styling</h2>

<a href="[Link]">click me</a>

</body>

</html>
60

Explanation:

 a:link styles the default link


 a:visited changes color if the link was clicked before
 a:hover applies style when the mouse hovers
 a:active applies during click

Output:

Once you click the link(click me)

You get

thanks for clicking the link

CSS Position:

The position property specifies the type of positioning method used for an element (static,
relative, absolute, fixed, or sticky).

In CSS, the position property is used to control how elements are placed on the page. It defines
the positioning method and allows elements to be moved precisely using top, right, bottom, and
left properties.

CSS position Property Values


Value Description

static Default. Elements are positioned normally in the flow.

relative Element is positioned relative to its normal position.

absolute Positioned relative to the nearest positioned ancestor (not static).

fixed Positioned relative to the browser window.

sticky Toggles between relative and fixed depending on scroll.


61

Note:

 Static: Default flow (no position change).


 Relative: Moves from its normal place.
 Absolute: Moves within the nearest positioned ancestor (.container here).
 Fixed: Stays fixed in place even when scrolling.

<html>

<head>

<title>CSS Position Example</title>

<style>

.box {

width: 150px;

height: 100px;

background-color: lightblue;

margin: 20px;

padding: 10px;

.relative {

position: relative;

top: 20px;

left: 30px;

background-color: orange;

.absolute {

position: absolute;

top: 50px;

left: 200px;
62

background-color: lightgreen;

.fixed {

position: fixed;

top: 10px;

right: 10px;

background-color: red;

color: white;

</style>

</head>

<body>

<h2>CSS Position Examples</h2>

<div class="box">Static Position (Default)</div>

<div class="box relative">Relative Position</div>

<div class="box fixed">Fixed Position</div>

<div class="box absolute">absolute Position</div>

</body>

</html>

Output:
63

CSS Z-index

The z-index property controls which element appears in front when elements overlap.

 Higher number = on top


 Lower number = behind

It only works when the element has a position like:

 relative, absolute, fixed, or sticky

Basic Concept:

 Elements with a higher z-index value appear on top.


 Works only on positioned elements (position: relative, absolute, fixed, or sticky).

Syntax:

element {
position: relative;
z-index: 2;
}

<html>

<head>

<title>CSS Z-index Example</title>


64

<style>

.box {

width: 200px;

height: 200px;

position: absolute;

.box1 {

background-color: red;

top: 50px;

left: 50px;

z-index: 1;

.box2 {

background-color: yellow;

top: 100px;

left: 100px;

z-index: 2;

.box3 {

background-color: pink;

top: 150px;

left: 150px;

z-index: 3;

</style>
65

</head>

<body>

<h2>CSS Z-index Demo</h2>

<div class="box box1">Box 1 (z-index: 1)</div>

<div class="box box2">Box 2 (z-index: 2)</div>

<div class="box box3">Box 3 (z-index: 3)</div>

</body>

</html>

Output:

You might also like