Scribd
Upload
68 views27 pages

Unit-I: Example Explained

HTML is the standard markup language used to create web pages. It uses tags to define elements like headings, paragraphs, links, and more. A basic HTML document structure includes html, head, title, and body tags. Common text elements are headings (<h1>-<h6>), paragraphs (<p>), and line breaks (<br>). Links are defined using <a> tags with an href attribute. Lists are created with unordered (<ul>), ordered (<ol>), and description (<dl>) lists.

Uploaded by

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

Unit-I: Example Explained

HTML is the standard markup language used to create web pages. It uses tags to define elements like headings, paragraphs, links, and more. A basic HTML document structure includes html, head, title, and body tags. Common text elements are headings (<h1>-<h6>), paragraphs (<p>), and line breaks (<br>). Links are defined using <a> tags with an href attribute. Lists are created with unordered (<ul>), ordered (<ol>), and description (<dl>) lists.

Uploaded by

Dinesh Srinivas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

UNIT-I

What is HTML?
 HTML stands for Hyper Text Markup Language
 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this
is a paragraph", "this is a link", etc.
A Simple HTML Document :Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
 The <!DOCTYPE html> declaration defines that this document is an
HTML5 document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown
in the browser's title bar or in the page's tab)
 The <body> element defines the document's body, and is a container for
all the visible contents, such as headings, paragraphs, images, hyperlinks,
tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph

The HyperText Markup Language, or HTML is the standard markup


language for documents designed to be displayed in a web browser. It can be
assisted by technologies such as Cascading Style Sheets (CSS) and scripting
languages such as JavaScript.
 Filename extension: .html, .htm
 Internet media type: text/html
 Developed by WHATWG(Tim Berners-Lee)

1
 Initial release 1993; 28 years ago
 Extended from SGML
 Extended to XHTML
 Open format? Yes

What is an HTML Element?


An HTML element is defined by a start tag, some content, and an end tag:
<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Web Browsers
 The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read
HTML documents and display them correctly.
 A browser does not display the HTML tags, but uses them to determine
how to display the document:
HTML Attributes
 All HTML elements can have attributes
 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"
HTML Headings:
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading.
<h6> defines the least important heading.

Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

HTML Paragraphs
The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some
white space (a margin) before and after a paragraph.

Example
<p>This is a paragraph.</p>

2
<p>This is another paragraph.</p>

 With HTML, you cannot change the display by adding extra spaces or
extra lines in your HTML code.

 The browser will automatically remove any extra spaces and lines when
the page is displayed:

Example
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
HTML Horizontal Rules
 The <hr> tag defines a thematic break in an HTML page, and is most
often displayed as a horizontal rule.

 The <hr> element is used to separate content (or define a change) in an


HTML page:

Example
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

HTML Line Breaks


The HTML <br> element defines a line break.

Use <br> if you want a line break (a new line) without starting a new paragraph:

Example
<p>This is<br>a paragraph<br>with line breaks.</p>

The HTML <pre> Element


 The HTML <pre> element defines preformatted text.

3
 The text inside a <pre> element is displayed in a fixed-width font
(usually Courier), and it preserves both spaces and line breaks:

Example
<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.


</pre>

HTML Text Formatting


Formatting elements were designed to display special types of text:

<b> - Bold text


<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text

HTML Quotation and Citation Elements:

1)HTML <blockquote> for Quotations


The HTML <blockquote> element defines a section that is quoted from another
source.

Browsers usually indent <blockquote> elements.

Example
<p>Here is a quote from WWF's website:</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by

4
1.2 million members in the United States and
close to 5 million globally.</blockquote>
2)HTML <q> for Short Quotations
The HTML <q> tag defines a short quotation.

Browsers normally insert quotation marks around the quotation.

Example
<p>WWF's goal is to: <q>Build a future where people live in harmony with
nature.</q></p>

3)HTML <abbr> for Abbreviations


The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML",
"CSS", "Mr.", "Dr.", "ASAP", "ATM".

Marking abbreviations can give useful information to browsers, translation


systems and search-engines.

Tip: Use the global title attribute to show the description for the
abbreviation/acronym when you mouse over the element.

Example
<p>The <abbr title="World Health Organization">WHO</abbr> was founded
in 1948.</p>

4)HTML <address> for Contact Information


The HTML <address> tag defines the contact information for the author/owner
of a document or an article.

The contact information can be an email address, URL, physical address, phone
number, social media handle, etc.

The text in the <address> element usually renders in italic, and browsers will
always add a line break before and after the <address> element.

Example
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA

5
</address>

5)HTML <cite> for Work Title


The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a
song, a movie, a painting, a sculpture, etc.).

Note: A person's name is not the title of a work.

The text in the <cite> element usually renders in italic.

Example
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

6)HTML <bdo> for Bi-Directional Override


BDO stands for Bi-Directional Override.

The HTML <bdo> tag is used to override the current text direction:

Example
<bdo dir="rtl">This text will be written from right to left</bdo>

HTML Comments:
HTML Comment Tag
You can add comments to your HTML source by using the following syntax:

<!-- Write your comments here -->

Notice that there is an exclamation point (!) in the start tag, but not in the end
tag.

HTML Links – Hyperlinks:

 You can click on a link and jump to another document.


 When you move the mouse over a link, the mouse arrow will turn into a
little hand.
The HTML <a> tag defines a hyperlink. It has the following syntax:

<a href="url">link text</a>


 The most important attribute of the <a> element is the href attribute,
which indicates the link's destination.

 The link text is the part that will be visible to the reader.
6
 Clicking on the link text, will send the reader to the specified URL
address.

Example
This example shows how to create a link to google.com:

<a href="https://www.google.com/">Visit google.com!</a>

By default, links will appear as follows in all browsers:

 An unvisited link is underlined and blue


 A visited link is underlined and purple
 An active link is underlined and red

HTML Links - The target Attribute:


By default, the linked page will be displayed in the current browser window. To
change this, you must specify another target for the link. The target attribute
specifies where to open the linked document.

The target attribute can have one of the following values:

 _self - Default. Opens the document in the same window/tab as it was


clicked
 _blank - Opens the document in a new window or tab
 _parent - Opens the document in the parent frame
 _top - Opens the document in the full body of the window

HTML Lists
HTML lists allow web developers to group a set of related items in lists.

Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list

7
<dd> Describes the term in a description list
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li>
tag.

The list items will be marked with bullets (small black circles) by default:

Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Ordered HTML List


An ordered list starts with the <ol> tag. Each list item starts with the <li>
tag.

The list items will be marked with numbers by default:

Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

HTML Description Lists


HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term
(name), and the <dd> tag describes each term:

Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>

8
</dl>
HTML Tables
HTML tables allow web developers to arrange data into rows and columns.

HTML Table Tags


Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for
formatting
<col> Specifies column properties for each column within a
<colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
Example
Let the first row be table headers:

<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
HTML Table Colspan & Rowspan
HTML tables can have cells that spans over multiple rows and/or columns.

9
HTML Table - Colspan
To make a cell span over multiple columns, use the colspan attribute:

Example
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
Name Age
Jill Smith 43
Eve Jackson 57

HTML Table - Rowspan


To make a cell span over multiple rows, use the rowspan attribute:

Example
<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>

10
Name Jill
555-1234
Phone
555-8745

HTML <frame> tag (Not supported in HTML5)


HTML <frame> tag define the particular area within an HTML file where
another HTML web page can be displayed.

A <frame> tag is used with <frameset>, and it divides a webpage into


multiple sections or frames, and each frame can contain different web pages.

Syntax
< frame src = "URL" >

Example 1
Create Vertical frames:
<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="25%,50%,25%">
<frame src="frame1.html" >
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</html>

Example 2:
Create Horizontal frames:
<!DOCTYPE html>
<html>
<head>
<title>Frame tag</title>
</head>
<frameset rows="30%, 40%, 30%">
<frame name="top" src="frame1.html" >
<frame name="main" src="frame2.html">
<frame name="bottom" src="frame3.html">
</frameset>
</html>

11
HTML Forms

An HTML form is used to collect user input. The user input is most often
sent to a server for processing.

The <form> Element


The HTML <form> element is used to create an HTML form for user input:

<form>
.
form elements
.
</form>
The <form> element is a container for different types of input elements, such
as: text fields, checkboxes, radio buttons, submit buttons, etc.

All the different form elements are covered in this chapter: HTML Form
Elements.

The <input> Element


The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type


attribute.

Here are some examples:

Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting
one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or more
of many choices)
<input type="submit"> Displays a submit button (for submitting the
form)
<input type="button"> Displays a clickable button

Text Fields
The <input type="text"> defines a single-line input field for text input.

12
Example
A form with input fields for text:

<html>
<body>
<h2>Text input fields</h2>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of text input fields is 20 characters.</p>
</body>
</html>

The <label> Element


The <label> tag defines a label for many form elements.

The <label> element is useful for screen-reader users, because the screen-
reader will read out loud the label when the user focus on the input element.

Radio Buttons
The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

Example
A form with radio buttons:

<p>Choose your favorite Web language:</p>

<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language"
value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
13
This is how the HTML code above will be displayed in a browser:

Choose your favorite Web language:

 HTML
 CSS
 JavaScript

Checkboxes
The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of


choices.

Example
A form with checkboxes:

<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
This is how the HTML code above will be displayed in a browser:

I have a bike
I have a car
I have a boat

The Submit Button


The <input type="submit"> defines a button for submitting the form data to a
form-handler.

The form-handler is typically a file on the server with a script for processing
input data.

The form-handler is specified in the form's action attribute.

14
Example
A form with a submit button:

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

HTML Form Attributes


The Action Attribute
The action attribute defines the action to be performed when the form is
submitted.

Usually, the form data is sent to a file on the server when the user clicks on
the submit button.

In the example below, the form data is sent to a file called


"action_page.php". This file contains a server-side script that handles the
form data:

Example
On submit, send form data to "action_page.php":

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Tip: If the action attribute is omitted, the action is set to the current page.

The Target Attribute


The target attribute specifies where to display the response that is received
after submitting the form.

The target attribute can have one of the following values:

15
Value Description
_blank The response is displayed in a new window or tab
_self The response is displayed in the current window
_parent The response is displayed in the parent frame
_top The response is displayed in the full body of the window
framename The response is displayed in a named iframe
The default value is _self which means that the response will open in the
current window.

Example
Here, the submitted result will open in a new browser tab:

<form action="/action_page.php" target="_blank">

The Method Attribute


The method attribute specifies the HTTP method to be used when submitting
the form data.

The form-data can be sent as URL variables (with method="get") or as


HTTP post transaction (with method="post").

The default HTTP method when submitting form data is GET.

Example
This example uses the GET method when submitting the form data:

<form action="/action_page.php" method="get">

Example
This example uses the POST method when submitting the form data:

<form action="/action_page.php" method="post">


Notes on GET:

 Appends the form data to the URL, in name/value pairs


 NEVER use GET to send sensitive data! (the submitted form data
is visible in the URL!)
 The length of a URL is limited (2048 characters)
 Useful for form submissions where a user wants to bookmark the
result

16
 GET is good for non-secure data, like query strings in Google
Notes on POST:

 Appends the form data inside the body of the HTTP request (the
submitted form data is not shown in the URL)
 POST has no size limitations, and can be used to send large amounts
of data.
 Form submissions with POST cannot be bookmarked

HTML Styles
The HTML style attribute is used to add styles to an element, such as color,
font, size, and more.

The HTML Style Attribute


Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.
Background Color
The CSS background-color property defines the background color for an
HTML element.

Example
Set the background color for a page to powderblue:

<body style="background-color:powderblue;">

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

</body>

Example
Set background color for two different elements:

<body>

<h1 style="background-color:powderblue;">This is a heading</h1>


<p style="background-color:tomato;">This is a paragraph.</p>

17
</body>

Text Color
The CSS color property defines the text color for an HTML element:

Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>.
Fonts
The CSS font-family property defines the font to be used for an HTML
element:

Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

Text Size
The CSS font-size property defines the text size for an HTML element:

Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

Text Alignment
The CSS text-align property defines the horizontal text alignment for an
HTML element:

Example
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

HTML Styles – CSS

 CSS stands for Cascading Style Sheets.

 CSS saves a lot of work. It can control the layout of multiple web
pages all at once.

18
 With CSS, you can control the color, font, the size of text, the spacing
between elements, how elements are positioned and laid out, what
background images or background colors are to be used, different
displays for different devices and screen sizes, and much more!

Using CSS
CSS can be added to HTML documents in 3 ways:

1. Inline - by using the style attribute inside HTML elements


2. Internal - by using a <style> element in the <head> section
3. External - by using a <link> element to link to an external CSS file

Inline CSS
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

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


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

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

An internal CSS is defined in the <head> section of an HTML page, within a


<style> element.

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

19
<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>

External CSS
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:

Example
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

The external style sheet can be written in any text editor. The file must not
contain any HTML code, and must be saved with a .css extension.

Here is what the "styles.css" file looks like:

"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
20
}
p{
color: red;
}

CSS Colors, Fonts and Sizes


Here, we will demonstrate some commonly used CSS properties. You will learn
more about them later.

The CSS color property defines the text color to be used.

The CSS font-family property defines the font to be used.

The CSS font-size property defines the text size to be used.

Example
Use of CSS color, font-family and font-size properties:

<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p{
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>

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

21
</body>
</html>
CSS Border
The CSS border property defines a border around an HTML element.

Tip: You can define a border for nearly all HTML elements.

Example
Use of CSS border property:

p{
border: 2px solid powderblue;
}

CSS Padding
The CSS padding property defines a padding (space) between the text and the
border.

Example
Use of CSS border and padding properties:

p{
border: 2px solid powderblue;
padding: 30px;
}

CSS Margin
The CSS margin property defines a margin (space) outside the border.

Example
Use of CSS border and margin properties:

p{
border: 2px solid powderblue;
margin: 50px;
}

HTML Block and Inline Elements


Every HTML element has a default display value, depending on what type of
element it is.

22
There are two display values: block and inline.

Block-level Elements
 A block-level element always starts on a new line.

 A block-level element always takes up the full width available (stretches


out to the left and right as far as it can).

 A block level element has a top and a bottom margin, whereas an inline
element does not.

The <div> element is a block-level element.

Example
<div>Hello World</div>

Here are the block-level elements in HTML:

<address><article><aside><blockquote><canvas><dd><div><dl><dt>
<fieldset><figcaption><figure><footer><form><h1>-<h6>
<header><hr><li><main><nav><noscript><ol><p><pre><section>
<table><tfoot><ul><video>

Inline Elements
 An inline element does not start on a new line.

 An inline element only takes up as much width as necessary.

 This is a <span> element inside a paragraph.

Example
<span>Hello World</span>
Here are the inline elements in HTML:

<a><abbr><acronym><b><bdo><big><br><button><cite><code><dfn><em>
<i><img><input><kbd><label><map><object><output><q><samp><script>
<select><small><span><strong><sub><sup><textarea><time><tt><var>

The <div> Element


 The <div> element is often used as a container for other HTML elements.

23
 The <div> element has no required attributes, but style, class and id are
common.

 When used together with CSS, the <div> element can be used to style
blocks of content:

Example
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

The <span> Element


 The <span> element is an inline container used to mark up a part of a
text, or a part of a document.

 The <span> element has no required attributes, but style, class and id are
common.

 When used together with CSS, the <span> element can be used to style
parts of the text:

Example
<p>My mother has <span style="color:blue;font-weight:bold">blue</span>
eyes and my father has <span style="color:darkolivegreen;font-
weight:bold">dark green</span> eyes.</p>

HTML class Attribute


 The class attribute is often used to point to a class name in a style sheet. It
can also be used by a JavaScript to access and manipulate elements with
the specific class name.

The Syntax For Class


To create a class; write a period (.) character, followed by a class name. Then,
define the CSS properties within curly braces {}:

Example
Create a class named "city":

24
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>

Multiple Classes
HTML elements can belong to more than one class.

To define multiple classes, separate the class names with a space, e.g. <div
class="city main">. The element will be styled according to all the classes
specified.

In the following example, the first <h2> element belongs to both the city class
and also to the main class, and will get the CSS styles from both of the classes:

Example

<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
.main {
text-align: center;

25
}
</style>
</head>
<body>
<h2>Multiple Classes</h2>
<p>Here, all three h2 elements belongs to the "city" class. In addition, London
also belongs to the "main" class, which center-aligns the text.</p>
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
</body>
</html>

Different Elements Can Share Same Class


Different HTML elements can point to the same class name.

In the following example, both <h2> and <p> points to the "city" class and will
share the same style:

Example

<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2>Different Elements Can Share Same Class</h2>
<p>Even if the two elements do not have the same tag name, they can both
point to the same class, and get the same CSS styling:</p>
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France.</p>
</body>
</html>
HTML id Attribute

26
The id attribute specifies a unique id for an HTML element. The value of the id
attribute must be unique within the HTML document.

The id attribute is used to point to a specific style declaration in a style sheet. It


is also used by JavaScript to access and manipulate the element with the
specific id.

The syntax for id is: write a hash character (#), followed by an id name. Then,
define the CSS properties within curly braces {}.

In the following example we have an <h1> element that points to the id name
"myHeader". This <h1> element will be styled according to the #myHeader
style definition in the head section:
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h2>The id Attribute</h2>
<p>Use CSS to style an element with the id "myHeader":</p>
<h1 id="myHeader">My Header</h1>
</body>
</html>

27

You might also like