Scribd
Upload
47 views

We Split Notes

The document discusses HTML form elements, media elements, and CSS3 properties including selectors, box model, backgrounds, borders, text effects, animations, and multiple column layouts. It provides examples of HTML tags and attributes for headings, paragraphs, fonts, text alignment, and background colors.

Uploaded by

janet
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
47 views

We Split Notes

The document discusses HTML form elements, media elements, and CSS3 properties including selectors, box model, backgrounds, borders, text effects, animations, and multiple column layouts. It provides examples of HTML tags and attributes for headings, paragraphs, fonts, text alignment, and background colors.

Uploaded by

janet
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 35

lOMoARcPSD|39184047

IT3401 WEB Essentials UNIT 2


lOMoARcPSD|39184047

UNIT – II

WEB DESIGNING

HTML – Form Elements - Input types and Media elements - CSS3 - Selectors, Box
Model, Backgrounds and Borders, Text Effects, Animations, Multiple Column
Layout, User Interface.

2.1. HTML:

2.1.1. Introduction to HTML

 HTML stands for HyperText Markup Language. Hypertext is simply a piece of text that works
as a link.
 Markup Language is language of writing layout information within documents.
 Basically an HTML document is a plain text file.
 It contains rich text. The rich text means text with tags.
 HTML is not a case sensitive language.
 Any HTML program can be written in simple Notepad or WordPad text editors. The extension
to this program should be either html or htm.
 This program then can be opened in some web browser and the corresponding web page can be
viewed. Let us create our first web page using HTML.

2
lOMoARcPSD|39184047

2.1.2. HTML Document


<html>
<head>
<title>My webpage</title>
</head>
<body>
This is my first Web Page!!!
</body>
</html>

Script Explanation
1) Note that the program consists of some strings enclosed within angular brackets.
Such strings are called tags.
2) The HTML program should be written within <html> and </html>. The <html> indicates
the start of html program and </html> denotes end of html program. Use of slash (/) in the
angular bracket indicates end of that particular tag.
3) Any HTML program has two prominent parts : head and body. The head part acts as a header of a
file and contains some information like setting the title of web page.
2.1.3. Comments in HTML
 The comment in HTML can be denoted as follows -
 <!--It is a comment statement -->
 There should not be a space between angular bracket and exclamation mark. This comment is
beginning with <!-- and ending with -->. Also note one thing that there should not be any -- inside
the comment.
2.1.4. Some Fundamental HTML Elements
 In all HTML/XHTML documents the root element is <html> which has two children : head
and body.
 Any text contained within the head element does not appear directly in the client area of web
browser. The head element is used for providing certain information to web browser. The <title>
element is used to give title to the web page. Note that this title does not appear in client area.
Rather it appears at the top of web browser.
 The <body> element contains the information which is to be displayed in the client area of
web browser.
 The body element can contain several fundamental elements such as <p>, <h1>, <div>,
<a>, <hr>, <br> and so on. The elements within the body part is for deciding the layout of your
web page.
2.1.5. Heading
 There are header tags which help to display the text as some header.
 The header tag is denoted by h1, h2 and so on upto h6.

3
lOMoARcPSD|39184047

 Following HTML document along with its output is itself self explanatory.
HTML Document [headerDemo.html]
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> This is a first header </h1>
<h2> This is a second header </h2>
<h3> This is a third header </h3>
<h4> This is a forth header </h4>
<h5> This is a fifth header </h5>
<h6> This is a sixth header </h6>
</body>
</html>

OUTPUT

2.1.6. Paragraphs
Following are the tags that are used for creating paragraphs
Tag Meaning
<p> This tag should be put at the end of every paragraph.
<pre> This tag is used to preserve the white spaces and lines in the text.
<div> This tag is used to make division of sections in the XHTML document.
Table 2.1. Paragraph Tags

For example
HTML Document[TextFormat.html]
<!DOCTYPE html>
<html >

4
lOMoARcPSD|39184047

<head>
</head>
<body>
<p>
Once upon a time, there was a king who kept a monkey as a pet The monkey served the king by all
the possible ways.
</p>
<div>

It was very hot in those days. So one day, when the king was sleeping, monkey was
fanning the king. Suddenly monkey noticed a fly on the chest of the king. The monkey
tried to swish it away. But fly would go away for one moment and come back again.
</div>
<div> So monkey decided to teach a lesson to the fly.</div>
<pre>
The monkey then looked for something to hit a
fly. It then found a stick.
It picked up the stick and tried to beat the fly using stick.
Hmmm at last it found a fly and
with all the force it hit the fly as a result of which the king died.

Lesson from the story:Never keep a fool servant !!!


</pre>
</body>
</html>

OUTPUT

5
lOMoARcPSD|39184047

2.1.7. Line Break


Output
For the line break the <br/> tag is used. This is a single line break tag. Generally this tag is
kept at the end of every line.
For example
<!DOCTYPE html>
<html>
<head>
<title>Line Break Demo</title>

</head>

<body>
<p>
Here the line breaks <br/> and new line
starts. Again line breaks<br/> Bye.
</p>
</body>
</html>

OUTPUT

2.1.8. Setting Font Style


The font style can be of various types such as boldface, italics, and strikethrough.

6
lOMoARcPSD|39184047

Tag Purpose
<b> </b> Displays the text in bold
<i> </i> Displays the text in
italics
<strong> Displays the text in bold
</strong>
<strike> </strike> Displays the text with
strike

Table 2.2. Font Style Tags

HTML Document [FontStyle.html]


<!DOCTYPE html>
<html>
<head>
<title>Font Style Demo</title>
</head>
<body>
<b> This is a bold text </b> <br/>
<i> This is in italics</i> <br/>
<strong> This is strongly emphasized text</strong> <br/>
<strike> This is striked text </strike>
<center> This will appear at the center</center> <br/>
</body>
</html>

OUTPUT

7
lOMoARcPSD|39184047

2.1.9. Text Alignment

We can align the text at left, right or at the center using a <div> tag. Here is a HTML program
which shows the text aligned left, right and centre.
HTML Document[TextAlign.html]
<!DOCTYPE html >
<html>
<head>
<title>Font Style Demo</title>
</head>

<body>
<div align="center">This line is aligned at center</div>
<div align="left">This line is aligned at left</div>
<div align="right">This line is aligned at right</div>
</body>
</html>

OUTPUT

2.1.10 Setting the Font and Color

We can set the font, size and color of the text in the web page. The tag <basefont> is used for
this purpose. The optional attributes used with <basefont> tag are as given below:

Attribute Value Purpose

color Color value such as “red”, It displays the text with specified
“yellow” color.
and so on.

8
lOMoARcPSD|39184047

face Font-family such as “arial”, It displays the text with


“verdana”,”sans-serif” and specific font family.
so
on.
Size Number The text of specified size will be
displayed
using this attribute value.

Table 2.3. Font Color, Face & Size

Example:
HTML Document[SetFont.html]
<!DOCTYPE html>
<html >
<head>
<title>Setting the Text </title>
</head>
<body>
<basefont face="arial" size="10">
Varsha is sweet and <br/>
Jayashree is very naughty!!<br/>
But Sachin is a serious guy<br/>
And Rashmi is a new-comer in this group
</body>
</html>

OUTPUT

2.1.11 Background Color

HTML Document[BgColor.html]
<!DOCTYPE html>

9
lOMoARcPSD|39184047

<html>
<head>
<title>Coloring the background</title>
</head>
<body bgcolor="#FFFF00">
<h3>This document has colored background</h3>
</body>
</html>

OUTPUT

Example:

CREATION OF INTERACTIVE WEB SITES - DESIGN USING HTML AND AUTHORING


TOOLS

SOURCE CODE:

mainpage.html
<html>
<head></head>
<frameset rows="15%,*">
<frame src="top.html" />
<frame src="bottom.html" />

10
lOMoARcPSD|39184047

</frameset>
</html>

top.html
<html>
<body bgcolor="blue">
<font face="verdhana" size="20" color="pink">
<center><b>IT COMPUTER CENTRE</b><center>
</font>

<font color="pink">
<marquee scrolldelay="100" width="50%">(A Government approved Private Computer
centre)</marquee>
</font>

</body>
</html>

bottom.html
<html>
<head />
<frameset cols="21%,50%,*" border="2">
<frame src="col1.html" name="col1"/>
<frame src="col2.html" name="col2"/>
<frame src="col3.html" name="col3" />
</frameset>
</html

col1.html
<html>

<head>
<font color="red"><center><b>ADVERTISEMENT</b></center></font>
</head>

11
lOMoARcPSD|39184047

<body bgcolor="navy">
<br/><br/><br/>

<font color="lime"><img src="mobile.jpg" alt="Not able to display" /></font>


</body>
</html>

col2.html
<html>
<head><center><font color="orange"><h1>
<marquee width="40%" behavior="alternate">WELCOME TO IT COMPUTER CENTER
!!!</marquee>
</h1></font></center>
</head>

<body bgcolor="olive">
<h2>
<ul>
<li><a href="about.html" target="col2">About Us</a> <br/><br/><br/> </li>
<li><a href="Course_Details.html" target="col2">Course Details</a> <br/><br/><br/> </li>
<li><a href="features.html" target="col2">Features</a> <br/><br/><br/></li>
<li><a href="contact.html" target="col2">Contact Us</a> <br/><br/><br/> </li>

</ul>
</h2>
</body>
</html>

about.html
<html>

<head><font color="blue"><h2>ABOUT US</h2></font></head>


<body bgcolor="cyan">
<hr/>

12
lOMoARcPSD|39184047

<h3>IT COMPUTER CENTER</h3>was started in 2010 with its first branch at


AVADI, Chennai-54.<br/>
Now, there are more than 20 coaching centres allover Chennai city.<br/><br/><br/>
Our motto is: <br/><font color="blue"><center><h3>" TO PROVIDE BEST KNOWLEDGE
"</h3></center></font>
</body>
</html>

course_details.html
<html>
<head><font color="blue"><h2>COUSE DETAILS</h2></font></head>

<body bgcolor="cyan">
<hr/>
The following courses are provided:-
<br/><br/><br/>
<font color="blue"><center>
<table border="2" width="60%">

<thead>
<tr><th><h3>Course</h3></th>
<th><h3>Duration</h3>(in months) </th>
</tr>
</thead>
<tbody align="left">
<tr>

<td>BLOCK CHAIN TECHNOLOGY</td>


<td align="center">4</td>
</tr>
<tr>
<td>PHYTHON PROGRAMMING</td>

13
lOMoARcPSD|39184047

<td align="center">3</td>
</tr>
<tr>

<td>R PROGRAMMING</td>
<td align="center">4</td>
</tr>
<tr>

<td>PROGRAMMING IN C (PLACEMENT ORIENTED)</td>

<td align="center">3</td>
</tr>
<tr>

<td>ASP.NET / VB.NET</td>
<td align="center">3</td>
</tr>

<tr>

<td>ORACLE / SQL SERVER DBA</td>


<td align="center">6</td>
</tr>
<tr>

<td>COMPUTER SERVICING</td>
<td align="center">6</td>
</tr>
<tr>

<td>CORE JAVA</td>
<td align="center">3</td>
</tr>
<tr>

<td>J2EE</td>
lOMoARcPSD|39184047

<td align="center">6</td>
</tr>

</tbody>
</table>
</center></font>
</body>
</html>

features.html
<html>
<head><font color="blue"><h2>FEATURES</h2></font></head>
<body bgcolor="orange">
<hr/>The following features are provided by us in all coaching centres.<br/><br/>
<h3><font color="blue">

<ul>
<li> Best Classroom Teacing with best Faculty Members</li>
<li> More pratical based training</li>
<li> Online quiz, assignment, and study materials</li>
<li> Scholarship for meritorious students</li>
<li> Industry based Projects</li>
<li> Reputed certificates </li>

</ul>and more.......
</font></h3>
</body>
</html>

contact.html
<html>

<head><font color="red"><h2>CONTACT US</h2></font></head>

15
lOMoARcPSD|39184047

<body bgcolor="cyan">
<hr/>For futher details contact us:<br/><br/><br/>

<pre><b>
Main Branch Address:<font color="blue"><h3>
NO. 100, CK Towers,
2<sup>st</sup> Floor,
MTH Road,
AVADI,

CHENNAI - 600 054.</B>


</h3></font></pre>
Contact Number:
<pre><font color="blue"><h3>
Mobile :<i>+91 9894300344</i>
</h3></font></pre>

</body>
</html>

col3.html
<html>
<head />
<frameset rows="45%,*">
<frame src="login.html" />

<frame src="new.html" />


</frameset>
</html>

login.html
<html>
<head><font color="YELLOW"><center>LOGIN PAGE</center></font></head>

<body bgcolor="teal">

16
lOMoARcPSD|39184047

<form method="get" action="result1.html"><BR><BR>


USER NAME:<input type="text" size="25" /> <br><BR>
PASSWORD :<input type="password" size="25" /> <br /><br />
<center>
<input type="submit" value="LOGIN" />
<input type="reset" value="RESET" />
</center> </form>
<font color="red"><u><a href="join.html" target="col3">Join as a member</a></u></font>

</body>
</html>

result1.html
<head />
<body>
<h2><font color="blue"><pre>

"LOGGED IN
SUCCESSFULLY"
</pre></font></h2>
</body>
</html>
join.html
<html>

<head><font color="orange"><center><b>JOIN AS A
MEMBER</b></center></font></head>
<body bgcolor="cyan">
<pre><form method="get" action="result2.html">
Enter your Name : <input type="text" size="20"/><br>
Enter your Email-ID: <input type="text"
size="20"/><br>
Enter your Password: <input type="password" size="15"><br>

17
lOMoARcPSD|39184047

You are a:
<input type="radio" name="c1" value="School student" /> School Student

<input type="radio" name="c1" value="College student" /> College Student


<input type="radio" name="c1" value="Working" /> Working
<input type="radio" name="c1" value="Others" /> Others
<BR>Interested in:
<input type="checkbox" name="r1" > Software</input>
<input type="checkbox" name="r1" > Hardware</input>

<input type="checkbox" name="r1" > Administrator</input>


<input type="checkbox" name="r1" > Servicing</input>
<BR>
Your comments:<input type="textarea" rows="20" col="40"
scrolling="auto"/><br>
<center><input type="submit" value="SUBMIT"> <input type="reset"
value="RESET"></center>
</form></pre>
</body>
</html>

result2.html
<html>
<head />

<body>
<h2><font color="blue"><pre>
"SUBMITTED
SUCCESSFULLY"
</pre></font></h2>
</body>

</html>

18
lOMoARcPSD|39184047

new.html
<html>

<head><font color="red"><b><h3><u>What's new?</u></h4></b></font></head>


<body bgcolor="yellow">
<marquee direction="up" scrolldelay="100" vspace="25">
<ul>
<li>A new course on <b><i>"Block Chain Technology"</i></b> has introduced
recently.</li>
<br>
<li><i>"NEW YEAR OFFER"</i>- 40% discount on course fees. Offer valid
till 10<sup>th</sup> Feb '19 only.HURRY!!!!</li><br>
<li>Results for exam held on November 2018 will be published
on 02<sup>nd</sup> January 2019</li><br>
<li>Crash courses for <b>CAT / GRE / TOFEL / XAT / TANCET</b> exams
preparation is also available now.</li><br>
</ul><br/>For further details contact our nearest
coaching centres.</marquee>
</body>
</html>
OUTPUT:

19
lOMoARcPSD|39184047

2.2. Form Elements


2.2.1. HTML Forms:

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

Example:

2.2.2. The <form> Element

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

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

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:

20
lOMoARcPSD|39184047

2.2.3. Text Fields

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

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="David"><br>

<label for="lname">Last name:</label><br>

<input type="text" id="lname" name="lname" value="Raj">

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

21
lOMoARcPSD|39184047

Output:

2.2.4. The <label> Element

Notice the use of the <label> element in the example

above. 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.

The <label> element also help users who have difficulty clicking on very small regions (such as radio
buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles
the radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind
them together.

2.2.5. Radio Buttons

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

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

Example:

<html>

<body>

<h2>Radio Buttons</h2>

22
lOMoARcPSD|39184047

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

</body>

</html>

OUTPUT:

2.2.6. Checkboxes

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

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

Example:

<html>

<body>

<h2>Checkboxes</h2>

23
lOMoARcPSD|39184047

<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>

<form action="/action_page.php">

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

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

</form>

</body>

</html>

OUTPUT:

Example:

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.

Example:

24
lOMoARcPSD|39184047

<html>

<body>

<h2>HTML Forms</h2>

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

<p>If you click the "Submit" button, the form-data will be sent to a page
called "/action_page.php".</p>

</body>

</html>

OUTPUT:

2.2.7. The Name Attribute for <input>

Notice that each input field must have a name attribute to be submitted.

If the name attribute is omitted, the value of the input field will not be sent at all.

25
lOMoARcPSD|39184047

Example:

<html>

<body>

<h2>The name Attribute</h2>

<form action="/action_page.php">

<label for="fname">First name:</label><br>

<input type="text" id="fname" value="John"><br><br>

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

</form>

<p>If you click the "Submit" button, the form-data will be sent to a page
called "/action_page.php".</p>

<p>Notice that the value of the "First name" field will not be submitted, because the input element
does not have a name attribute.</p>

</body>

</html>

OUTPUT:

2.2.8. The <select> Element

The <select> element defines a drop-down list:

<html>

26
lOMoARcPSD|39184047

<body>

<h2>The select Element</h2>

<p>The select element defines a drop-down list:</p>

<form action="/action_page.php">

<label for="cars">Choose a car:</label>

<select id="cars" name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select>

<input type="submit">

</form>

</body>

</html>

OUTPUT:

The <option> elements defines an option that can be selected.

By default, the first item in the drop-down list is selected.

2.2.9. The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):

27
lOMoARcPSD|39184047

Example:

<html>

<body>

<h2>Textarea</h2>

<p>The textarea element defines a multi-line input field.</p>

<form action="/action_page.php">

<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>

<br><br>

<input type="submit">

</form>

</body>

</html>

OUTPUT:

The rows attribute specifies the visible number of lines in a text area.

28
lOMoARcPSD|39184047

The cols attribute specifies the visible width of a text area.

2.2.10. The <button> Element

The <button> element defines a clickable button:

<html>

<body>

<h2>The button Element</h2>

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

</body>

</html>

OUTPUT:

2.3. CSS

 CSS stands for Cascading Style Sheets.

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

 CSS describes how HTML elements should be displayed.


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

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

29
lOMoARcPSD|39184047

 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:
p{
color: red;
text-align: center;
}
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

Example:
<html>
<head>
<style>
body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>

30
lOMoARcPSD|39184047

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

</body>
</html>
OUTPUT:

2.3.1. Three Ways to Insert CSS

There are three ways of inserting a style sheet:

1. External CSS
2. Internal CSS
3. Inline CSS

2.3.1.1. External CSS

With an external style sheet, you can change the look of an entire website by changing just one file!

Each HTML page must include a reference to the external style sheet file inside the <link> element,
inside the head section.

Example:

<html>

<head>

<link rel="stylesheet" href="mystyle.css">

</head>

<body>

31
lOMoARcPSD|39184047

<h1>This is a heading</h1>

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

</body>

</html>

An external style sheet can be written in any text editor, and must be saved with a .css extension.

The external .css file should not contain any HTML tags.

Here is how the "mystyle.css" file looks:

"mystyle.css"
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

OUTPUT:

2.3.1.2. Internal CSS

An internal style sheet may be used if one single HTML page has a unique style.

32
lOMoARcPSD|39184047

The internal style is defined inside the <style> element, inside the head section.

Example:

<html>

<head>

<style>

body {

background-color: linen;

h1 {

color: maroon;

margin-left: 40px;

</style>

</head>

<body>

<h1>This is a heading</h1>

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

</body>

</html>

OUTPUT:

33
lOMoARcPSD|39184047

2.3.1.3. Inline CSS

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain any
CSS property.

Example:

<html>

<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

</body>

</html>

OUTPUT:

34
lOMoARcPSD|39184047

2.4. CSS Selectors


The means by which you access one or more elements is called selection, and the part of a CSS rule
that does this is known as a selector. As you might expect, there are many varieties of selector.
2.4.1. The Type Selector
The type selector works on types of HTML elements such as <p> or <i>. For example, the following
rule will ensure that all text within <p> ... </p> tags is fully justified: p { text-align:justify; }
2.4.2. The Descendant Selector
Descendant selectors let you apply styles to elements that are contained within other elements. For
example, the following rule sets all text within <b> ... </b> tags to red, but only if they occur within
<p> ... </p> tags (like this: <p><b>Hello</b> there</p>):
p b { color:red; }
Descendant selectors can continue nesting indefinitely, so the following is a perfectly valid rule to
make the text blue within bold text, inside a list element of an unordered list:
ul li b { color:blue; }
As a practical example, suppose you want to use a different numbering system for an ordered list that
is nested within another ordered list. You can achieve this in the following way, which will replace the
default numeric numbering (starting from 1) with lowercase letters (starting from a):
<html>
<head>
<style>
ol ol { list-style-type:lower-alpha; }
</style>
</head>
<body>
<ol>
<li>One</li>
<li>Two</li>
<li>Three
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
</li>
</ol>
</body>
</html>
The result of loading this HTML into a web browser is as follows, in which you can see that the
second list elements display differently:

35

You might also like