Web Technologies (8EC07) -

UNIT 1

HTML4, CSS3 &

Bootstrap

Dr. Dheeraj HTML4, CSS3 & March 4, 1 / 59

Web Technologies (8EC07) -
UNIT 1

Introduction to HTML4 Form

<form a c ti o n = " u r l to submit data" method="post">

< l a b e l fo r="input i d" > L a be l : < / l a be l >
<input type="text" id="input i d " name="input name" >
<input type="submit" value="Submit">
</form>

The <form> tag defines the start of the form.

Various input fields such as text input, checkboxes, radio
buttons, etc., can be placed inside the form.

HTML form attributes provide additional

information and functionality to HTML forms.
They control various aspects of form behavior and
appearance. Understanding form attributes is crucial for
building user-friendly and accessible web forms.
Dr. Dheeraj HTML4, CSS3 & March 4, 2 / 59
Web Technologies (8EC07) -
UNIT 1

Common Form Attributes

action: Specifies where to send the form data when
submitted. method: Specifies the HTTP method used to
submit the form data (e.g., GET or POST).
name: Assigns a name to the form, which can be used for
referencing it in JavaScript or CSS.
id: Assigns a unique identifier to the form for scripting
or styling purposes.
target: Specifies where to display the response received
after submitting the form (e.g., self, blank, parent, top,
frame name). autocomplete: Specifies whether the
browser should autocomplete form values.
enctype: Specifies how form data should be encoded before
sending it to the server (e.g., multipart/form-data for file
uploads). novalidate: Specifies that the form should not be
validated when submitted.
Dr. Dheeraj HTML4, CSS3 & March 4, 3 / 59
Web Technologies (8EC07) -
UNIT 1

Form Attribute: method

The ‘method‘ attribute specifies the HTTP method used

to submit form data.
It can have two values: GET or POST.
GET: Appends form data to the URL in the form of query
parameters. Suitable for submitting small amounts of data
and retrieving data.
POST: Sends form data in the body of the HTTP request.
Suitable for submitting sensitive or large amounts of data.

Dr. Dheeraj HTML4, CSS3 & March 4, 4 / 59

Web Technologies (8EC07) -
UNIT 1

Form Attribute: target

The ‘target‘ attribute specifies where to display the

response received after submitting the form.
It can take the following values:
self: The response replaces the current page.
blank: The response opens in a new tab or
window. parent: The response replaces the
parent frame.
top: The response replaces the current
window, including all frames.
frame name: The response replaces a specific
frame.

Dr. Dheeraj HTML4, CSS3 & March 4, 5 / 59

Web Technologies (8EC07) -
UNIT 1

List of HTML4 Form Elements

1 <input> : Defi nes an input c o n t r o l .

Types: t e x t , password, checkbox, ra d i o , submit,
r e s e t , fi l e , hidden, image, butt on.
2 <select>: Defi nes a drop-down l i s t .
Opti ons are defi ned using <opti on> t a g s .
3 <textare a> : Defi nes a m u l ti - l i n e t ex t input c o n t r o l .
4 <butt on>: Defi nes a c l i c k a b l e butt on.
Att r i b u t e s : t y p e , name, va l u e .
5 < l a b e l > : Defi nes a l a b e l f o r an <input>, < s e l e c t > ,
<textare a>, or <butt on> element.
6 < fi e l d s e t > : Groups re l ate d form elements to gethe r.
7 <legend>: Defi nes a capti on f o r a < fi e l d s e t > element.
8 <optgroup>: Groups re l ate d opti ons i n a
<se le ct> dropdown l i s t .
9 <opti on>: Defi nes an opti on i n a <sele ct>
ldropdown
ist.
HTML4, CSS3 & March 4, 17 /
Dr. Dheeraj
Web Technologies (8EC07) -
UNIT 1

HTML Form Input Tags

1 Text Input
Description: Allows users to enter single-line text.
Example:
<input type="text" name="username" id="username">
2 Password Input
Description: Allows users to enter passwords securely.
Example:
<input type="password" name="password" id="password">
3 Checkbox
Description: Allows users to select one or more options
from a list.
Example:
<input type="checkbox" name="interest" value="music">
4 Music
Radio Button
Description: Allows users to select one option from a list.
<input type="radio" name="gender" value="male"> Male
Example:
Dr. Dheeraj HTML4, CSS3 & March 4, 7 / 59
Web Technologies (8EC07) -
UNIT 1

HTML Form Input Tags: continued

5 Submit Button
Description: Submits the form data to the server.
Example:
<input type="submit" value="Submit">
6 Reset Button
Description: Resets the form’s controls to their initial
values.
Example:
7 <input type="reset" value="Reset">
File Input
Description: Allows users to select files for upload.
Example:
<input t y p e = " fi l e " name="fi le" i d = " fi l e " >

Dr. Dheeraj HTML4, CSS3 & March 4, 8 / 59

Web Technologies (8EC07) -
UNIT 1

HTML Form Input Tags: continued

8 Hidden Input
Description: Provides a way to store data without displaying
it in the form.
Example:
<input type="hidden" name="user i d " value="123">
9 Image Input
Description: Displays an image that represents a submit
button.
Example:
1 <input type="image" src="submit.png" alt="Submit">
0
Button
Description: Defines a clickable button.
Example:
<butt on type="butt on">Click Me</button>

Dr. Dheeraj HTML4, CSS3 & March 4, 9 / 59

Web Technologies (8EC07) -
UNIT 1

HTML Form Input Types : Example Program I

1 < ! DOCT Y PE ht ml >

2 < ht ml l a ng = " en " >
3 <head > < ti t l e >HTML Form I n p u t s < / ti t l e > < / head
>
4
5 < body
< f>or m a c t i on = " / s ubmi t " me t hod = "
6 pos t "< l>a b e l f o r = " fname " > F i r s t Name : < / l a b e l
7 ><br>
8 < i n p u t t y p e = " t e x t " i d = " fname " > < b r > < b r >
9 < l a be l f or = " l na me " > L a s t Na me : < / l a be l
1 > < br >
0
1 < i n p u t t y p e = " t e x t " i d = " lname " > < b r > < b r >
1
1 < l a be l f or = " e ma i l " > E ma i l : < / l a be l > < br >
2
1 < i nput t y pe = " e ma i l " i d = " e ma i l "
3
1 > < br > < br >
4
1 < l a be l f or = " pa s s wor d " > Pa s s wor d : < / l a be l > < br >
5
1 < i n p u t t y p e = " p a s s w o rd " i d = " p a s s w o rd " > < b r > < b r >
6
1
7
1 < l a be l f or = " dob " > Da t e of Bi r t h : < / l a be l
8
> < br >
Dr. Dheeraj HTML4, CSS3 & March 4, 10 /
Web Technologies (8EC07) -
UNIT 1

HTML Form Input Types : Example Program II

1 < i n p u t t y p e = " d a t e " i d = " dob " name = " dob "
9
2 ><br><br>
0
2 < l a be l f or = " g e nde r " > Ge nde r : < / l a be l > < br >
1
2 < i nput t y pe = " r a di o " i d = " ma l e " na me = " g e nde r " v a l ue
2
ma l e " > ="
2 < l f or = " ma l e " > Ma l e < / l a be l >
3
2 a be l t y pe = " r a di o " i d = " f e ma l e " na me = " g e nde r " v a l ue
4
< i nput =
2 " f e ma l e " > f o r = " fe m a l e " > Fe m a l e < / l a b e l > < b r > < b r >
5
2 < f or = " t e r ms " > Ag r e e t o T e r ms : < / l a be l >
6
2 l a be l t y pe = " c he c k box " i d = " t e r ms " na me = "
7
c he c k e d > < <br >t<ebr r ms
> "
2 <l ai nbe
pul t type =" submit" value =" Submit"
8
2 > <
9
30 < / f ori nmp >u t
< / body
>
31 < / ht ml
>
Dr. Dheeraj HTML4, CSS3 & March 4, 11 /
Web Technologies (8EC07) -
UNIT 1

HTML Form Input Types: Output

Dr. Dheeraj HTML4, CSS3 & March 4, 12 /

Web Technologies (8EC07) -
UNIT 1

Button Tag in HTML

The <butt on> tag in HTML is used to define a clickable
button.
It can be used to submit form data, trigger JavaScript
functions, or perform any other action defined by the web
developer.
Attributes:
type: Specifies the type of button. Common values are
"submit", "reset", and "butt on". The default type is
"submit".
name: Specifies the name of the button, which can be used
to reference the button in JavaScript or when submitting a
form. value: Specifies the value associated with the
button, which is submitted along with the form data when
the button is clicked. Other common attributes include id,
c l a s s , disabled, autofocus, etc.
Example:
Dr. Dheeraj HTML4, CSS3 & March 4, 13 /
Web Technologies (8EC07) -
UNIT 1

Differences Between Input Submit and Button

Submit
Context Input Submit Button Submit
Default Submits the form similar to Input Submit
Behavior when
clicked.
Content Does not have any Can contain text or
content. other
Its value attribute defines HTML elements as its
the text displayed on the content.
button.
Accessi- Some screen readers may More accessible to
bility not screen
interpret the value readers, as it
attribute correctly. provides bet- ter
context for users with
disabilities.
Styling More limited in terms More flexible, as it
of can
styling. contain additional
Dr. Dheeraj HTML4, CSS3 & HTML elementsMarch 4, and 14 /
Web Technologies (8EC07) -
UNIT 1

Select Tag in HTML I

The <se le ct> tag in HTML is used to create a drop-
down list of options for the user to choose from.
It allows users to select one or more options from the
list.
Nested Tags:
<opti on>: Each <opti on> tag represents an option in the
drop-down list. The text content of the <opti on> tag is
displayed to the user, and the value attribute specifies the
value associated with the option.
The <optgroup> tag in HTML is used to group related
options within a dropdown list created using the <se le ct>
tag. It allows for better organization and categorization of
options, enhancing the user experience.

Dr. Dheeraj HTML4, CSS3 & March 4, 15 /

Web Technologies (8EC07) -
UNIT 1

Select Tag in HTML II

Attributes:
name: Specifies the name of the select element, which is
submitted along with the form data.
id: Specifies a unique identifier for the select element,
which can be used for scripting or styling purposes.
multi ple: If present, allows the user to select multiple
options from the list.
size : Specifies the number of visible options in a
dropdown list. Example: < s e l e c t name="countries"
size ="5 ">
disabled: Disables the dropdown list, making it
unselectable. Example: < s e l e c t name="colors"
disabled>
autofocus:Automatically focuses on the dropdown list
when
Dr. Dheeraj the page loads. Example:
HTML4, CSS3 & < s e l e c t name="fruit"
March 4, 16 /
Web Technologies (8EC07) -
UNIT 1

Explanation of Textarea and Fieldset Tags

Textarea Tag: Creates a multiline text input

1
field.
< t e x t a r e a r ows = " 4 " c ol s = " 50 " >
2 E nt e r y our me s s a g e he r e . . .
3 </ t ex t ar ea >

Fieldset Tag: Groups related form elements

1
together.
< f i e l ds e t >
2 < l e g e nd > Cont a c t I nf or ma t i on < / l e g e nd >
3 < l a be l f or = " na me " > Na me : < / l a be l >
4 < i n p u t t y p e = " t e x t " i d = " name " name = " name " > < b r >
5 < l a be l f or = " e ma i l " > E ma i l : < / l a be l >
6 < i n p u t t y p e = " e m a i l " i d = " e m a i l " name = " e m a i l " > < b r >
7 < / f i e l ds e t >

Dr. Dheeraj HTML4, CSS3 & March 4, 17 /

Web Technologies (8EC07) -
UNIT 1

HTML form Tags : Example Program I

1 < ! DOCT Y PE ht ml
>
2 < ht ml >
3
4 < he a<dt>i t l e > Compl e t e HT ML Pr og r a m : s el ec t , opt i on , opt g r oup
, t e x t a r e a , f i e l ds e t , butt on t a g s < / t i t l e >
5 < / he a d
>
6
7 < body > > S e l e c t y our f a v or i t e f r ui t : < / h2 >
< h2
8 < s e l e c t i d = " f r u i t " name = " f r u i t " >
9 < opt g r oup l a be l = " S umme r F r ui t s " >
1 < opt i on v a l ue = " wa t e r me l on " > Wa t e r me l on < /
0
1 opt i on >
1
1 < opt i on v a l ue = " s t r a wbe r r y " > S t r a wbe r r y < / opt i on
2
1 >
3
1 < / opt g r oup >
4
1 < opt g r oup l a be l = " Wi nt e r F r ui t s " >
5
1 < opt i on v a l ue = " a ppl e " > Appl e < / opt i on >
6
1 < opt i on v a l ue = " or a ng e " > Or a ng e < / opt i on >
7
< / opt g r oup >
< /Dheeraj
Dr. s e l e c t > < br > HTML4, CSS3 & March 4, 18 /
Web Technologies (8EC07) -
UNIT 1

HTML form Tags : Example Program II

1
8
1 < t e x t a r e a r o w s = " 4 " c o l s = " 50 " p l a c e h o l d e r = " E n t e r y our
9
feedback " ></ t e x t a r e a >
2 < f i e l ds e t >
0
2 < l e g e nd > Cont a c t I nf or ma t i on < / l e g e nd >
1
2 < l a be l f or = " na me " > Na me : < / l a be l >
2
2 < i nput t y p e = " t e x t " i d = " name " name = " name "
3
2 < l a be l > < b r > f or = " e ma i l " > E ma i l : < / l a be l >
4
2 < i nput t y pe = " e ma i l " i d = " e ma i l " na me = " e ma i l "
5
2 < / f i e l ds e t > >< <brbr> >
6
2
7
2 < butt on t y pe = " s ubmi t " > S ubmi t < / butt on
8
2 < butt on > t y pe = " r e s e t " > Re s e t < / butt on >
9
3 < butt on t y p e = " b u tt o n " o n c l i c k = "
0
a l e on
Cus t om Butt r t (<’/ Custom
butt on a c ti o n ’ ) " >
>
31 < / body >
32 < / ht ml >

Dr. Dheeraj HTML4, CSS3 & March 4, 19 /

Web Technologies (8EC07) -
UNIT 1

HTML Form tags: Output

Dr. Dheeraj HTML4, CSS3 & March 4, 20 /

Web Technologies (8EC07) -
UNIT 1

HTML <img> Tag

The HTML <img> tag is used to embed images into a

webpage. The
<img> tag supports several attributes:
src: Specifies the URL of the image.
alt: Specifies an alternate text for the image, used when
the image cannot be displayed.
width: Specifies the width of the image.
height: Specifies the height of the image.
title: Specifies a title for the image, often displayed as a
tooltip.
align: Specifies the alignment of the image within the
1 < i mg s r c = " i ma g e . j pg " a l t = " De s c r i pt i on of t he i ma g e " wi dt h
= " surrounding text (deprecated in HTML5).
300 " he i g ht = " 200 " >

Dr. Dheeraj HTML4, CSS3 & March 4, 21 /

Web Technologies (8EC07) -
UNIT 1

HTML <div> Tag I

The <div> tag is a block-level element used to group

other HTML elements and apply styling to them as a
group.
It creates a division or section in an HTML
document.
Commonly used to structure a web page into sections
like headers, navigation bars, content areas, and footers.
Can be styled using CSS (Cascading Style Sheets) to
change its appearance and layout.
It does not provide any visual formatting itself, but it
can be used with attributes for styling and identification
purposes.
The <div> tag can be customized using various attributes:
id: Specifies a unique identifier for the <div> element,
Dr. Dheeraj HTML4, CSS3 & March 4, 22 /
Web Technologies (8EC07) -
UNIT 1

HTML <div> Tag II

class: Assigns one or more class names to the <div>

element, allowing multiple elements to be styled
together.
style: Defines inline CSS styles for the <div> element, such
as color, font size, padding, etc.
1
Example:
< d i v i d = " header" c l a s s = " c o n t a i n e r " s t y l e =" background - c o l o r :
# 333; c ol or : # ff f ; " >
2 < h1 > We l c ome t o my We bs i t e < / h1 >
3 < p > T hi s i s t he he a de r s e c t i on . < / p >
4 < / di v >

Dr. Dheeraj HTML4, CSS3 & March 4, 23 /

<html>
<head>
<style>
div {
color: white;
background-color: 009900;
margin: 2px;
font-size: 25px;
}
</style>
</head>
<body>
<div> div tag </div>
<div> div tag </div>
<div> div tag </div>
<div> div tag </div>
</body>
</html>
<html>
<head>
<style>
.loginform { border:1px solid pink;}
.formheading { background-color:red; color:white; }
.sub{ background-color:green; color:white; }
</style>
</head>
<body>
<div class="loginform">
<h1>hello</h1>
</div>
<div class="formheading">
<h1>hai</h1>
</div>
<div class="sub">
<h1>hello</h1>
</div>
</body>
</html>
Web Technologies (8EC07) -
UNIT 1

HTML <span> Tag I

The <span> tag is an inline-level element used to apply styles to

a specific part of the text within a block-level element.
It does not create a new line or a new block.
Typically used to apply styles or manipulate small
pieces of text within a larger block of content.
Similar to the <div> tag, but for smaller, inline
elements.
Useful when you want to style or manipulate a specific
portion of text within a paragraph, heading, or other block-
level element.
The <span> tag supports similar attributes as the <div> tag:
id
class
Dr. Dheeraj HTML4, CSS3 & March 4, 26 /
Web Technologies (8EC07) -
UNIT 1

HTML <span> Tag II

These attributes allow for customization and styling of

the <span>
1
element.
<p>
Example:
2 Welcome t o my < s p a n s t y l e = " f o n t - w e i g h t : b o l d ; " > w e b s i t e < /
spa n > .
3 F e e l f r e e t o < s p a n s t y l e = " c o l o r : b l u e ; " > e x p l o r e < / spa n >
the c o n t e n t .
4 </ p>

Dr. Dheeraj HTML4, CSS3 & March 4, 27 /

<html>
<body>

<h1>The span element</h1>

<p>My mother has <span style="color:blue;font-

weight:bold">blue</span> eyes and my father has
<span style="color:red;font-weight:bold">red</span>
eyes.</p>

</body>
</html>
Web Technologies (8EC07) -
UNIT 1

CSS Introduction

CSS (Cascading Style Sheets) is used to style the appearance

of HTML elements on a webpage. There are three main
types of CSS:
Inline CSS
Internal
CSS
External
CSS

CSS Structure:

Dr. Dheeraj HTML4, CSS3 & March 4, 29 /

Web Technologies (8EC07) -
UNIT 1

Inline CSS

Inline CSS is applied directly to an HTML element using

the ‘style‘ attribute.
Example:
1 <p s t y l e = " c o l o r : b l u e ; f o n t - s i z e : 16 p x ; " > H e l l o < / p>

Inline CSS affects only the specific element it is

applied to and overrides any external or internal CSS.
It is useful for applying unique styles to individual
elements.

Dr. Dheeraj HTML4, CSS3 & March 4, 30 /

<html>
<body>

<h1>The inline CSS</h1>

<p style = "color:blue;font-size:10px">This is some text
element
with Inline CSS .</p>

<p>This is some text element.</p>

</body>
</html>
Web Technologies (8EC07) -
UNIT 1

Internal CSS

Internal CSS is defined within the < st y l e > element in the <head>
section of an HTML document.
Example:
1 < style >
2 p \{
3 color : red ;
4 font - size : 18 px ;
5 \}
6 </ style >
7

Internal CSS affects all elements with the specified

selectors within the same HTML document.
It is useful for applying styles consistently across multiple
elements within a single document.

Dr. Dheeraj HTML4, CSS3 & March 4, 32 /

<html>
<head>
<style>

p { color:red;font-size:30px}

</style>
</head>
<body>

<h1>The internal CSS</h1>

<p>This is some text element with Inline CSS .</p>

<p>This is some text element.</p>

</body>
</html>
Web Technologies (8EC07) -
UNIT 1

External CSS

External CSS is defined in a separate CSS file and linked to

an HTML document using the < l i n k > element.
Example:
1 <link rel=" stylesheet" href=" s t y l e s . css" >

External CSS affects all elements with the specified

selectors across multiple HTML documents.
It allows for better organization and maintenance of styles,
especially for large websites with multiple pages.

Dr. Dheeraj HTML4, CSS3 & March 4, 34 /

External CSS

"mystyle.css"
<html>
<head> body {
background-
<link rel="stylesheet" color: lightblue;
href="mystyle.css"> }
</head>
<body> h1 {
color: navy;
margin-left: 20px;
<h1>This is a heading</h1> }
<p>This is a paragraph.</p>

</body>
</html>
Web Technologies (8EC07) -
UNIT 1

HTML Example with CSS I

Below is an HTML example that demonstrates the use of

different CSS selectors and properties with inline, internal,
1
and external
< ! DOCT Y PE ht CSS:
ml >
2 < ht ml l a ng = " en " >
3 < he a d >
4 < t i t l e > CS S E x a mpl e < / t i t l e >
5 < ! - - E x t e r na l CS S - - >
6 <link rel=" stylesheet" href=" s t y l e s . css" >
7 <s t yl e >
8 / * I n t e r n a l CSS * /
9 h1 {
1 c ol or : bl ue ;
0
1 }
1
1 </ s t y l e >
2
1 < / he a d >
3

Dr. Dheeraj HTML4, CSS3 & March 4, 36 /

 Web Technologies (8EC07) -
UNIT 1

HTML Example with CSS II

14 < body
>1 < ! - - I nl i ne CS S - - >
5
1 <h1 s t y l e = " f o n t - f a m i l y : A r i a l ; " > T h i s i s a H e a d i n g < / h1 >
6
1 < di v >
7
1 < p > T hi s i s a pa r a g r a ph i ns i de a di v . < / p >
8
1 < / di v >
9
2 < di v >
0
2 <p d a t a - i n f o = " i m p o r t a n t " > T h i s p a r a g r a p h h a s
1
i mpor t a nt i nf or ma t i on . < / p >
2 < / di v >
2
2 <a h r e f = " # " s t y l e = " c o l o r : g r e e n ; " > H ove r o v e r t h i s l i n k < /
3
a>
2 < p > T h i s p a r a g r a p h h a s a s p e c i a l fi r s t l e tt e r . < / p>
4
25 < / body
>
26 < / ht ml
>

Dr. Dheeraj HTML4, CSS3 & March 4, 37 /

Web Technologies (8EC07) -
UNIT 1

HTML Example with CSS III

Output
:

Dr. Dheeraj HTML4, CSS3 & March 4, 38 /

Web Technologies (8EC07) -
UNIT 1

CSS Selectors

CSS selectors are used to target HTML elements.

CSS properties are used to define the visual style of targeted
elements.
Different types of CSS 3
selectors Basic selectors
Combinatory selectors
Attribute selectors
Pseudo-class
selectors Pseudo-
element selectors

Dr. Dheeraj HTML4, CSS3 & March 4, 39 /

Web Technologies (8EC07) -
UNIT 1

CSS Selectors: Basic

Type Selector: Selects all elements of a specified type.

Syntax: element
Example: p { c o l o r : blue; }
Universal Selector: Selects all elements on the page.
Syntax: *
Example: * { margin: 0 ; padding: 0; }
Class Selector: Selects elements with a specific class
attribute.
Syntax: .classname
Example: . h i g h l i g h t { background-color:
yel l ow; }
ID Selector: Selects a single element with a specific ID
attribute.
Syntax: #idname
Example: #header { f o n t - s i z e : 24px; }
Attribute Selector: Selects elements with a specific
Dr. Dheeraj HTML4, CSS3 & March 4, 40 /
Web Technologies (8EC07) -
UNIT 1

CSS Selectors: Combinatory

Combinatory selectors allow you to select elements

based on their relationship to other elements.
Common combinators:
Descendant (<space>): Selects all elements that are
descendants of a specified element.
Child (>) : Selects all direct child elements specified by
a parent element.
Adjacent sibling (+): Selects the next sibling element
that follows a
specified element.
General sibling (~): Selects all sibling elements that follow a
specified element.

Dr. Dheeraj HTML4, CSS3 & March 4, 41 /

Web Technologies (8EC07) -
UNIT 1

CSS Selectors: Attribute

Attribute selectors allow you to select elements

based on their attributes and attribute values.
Common attribute selectors:
[ a tt r i b u t e ] : Selects all elements with the specified
attribute. [att r i b u te=va l u e] : Selects all elements with the
specified attribute and value.
[ a tt r i b u t e =value]: Selects all elements with an attribute
value containing a specified word.
[att rib u te|=va lue] : Selects all elements with an attribute
value
starting with a specified value.

Dr. Dheeraj HTML4, CSS3 & March 4, 42 /

Web Technologies (8EC07) -
UNIT 1

CSS Selectors: Pseudo-class and Pseudo-element

Pseudo-classes are used to define the special state of an

element.
:hover - Selects an element when the mouse pointer is over
it.
: a c ti v e - Selects an element when it is being activated by
the user.
: fo c u s - Selects an element when it has focus.
: n t h - c h i l d ( n ) - Selects every nth child element.

Pseudo-elements allow you to style certain parts of an

element.
: : b e fo r e - Inserts content before the content of an element.
: : a ft e r - Inserts content after the content of an element.
: : fi r s t - l i n e - Selects the first line of text within an
element.
Dr. Dheeraj HTML4, CSS3 & March 4, 43 /
 Simple selectors
The element selector selects HTML elements based on the element
name .
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>

<p>Every paragraph will be affected by

the style.</p>
<p >Me too!</p>
<p>And me!</p>

</body>
The CSS id Selector

The id selector uses the id attribute of an HTML element to select a

specific element.
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
<!DOCTYPE html>
<html>
<head> </style>
<style> </head>
#para1 { <body>
text-align: center; <p id="para1">Hello World!</p>
color: red;
} <h1 id=“para1”>This paragraph is
affected by the style.</h1>

</body>
</html>
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-1
<!DOCTYPE html>
<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>
Example-2

You can also specify that

only specific HTML
elements should be
<body>
affected by a class .
<h1 class="center">This heading
<!DOCTYPE html> will not be affected</h1>
<html> <p class="center">This paragraph
will be red and center-
<head>
aligned.</p>
<style>
p.center {
</body>
text-align: center;
</html>
color: red;
}
</style>
</head>
Example-3
HTML elements can also refer to more than one class.
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}

p.large {
font-size: 300%;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>

<p class="center">This paragraph will be red and center-
aligned.</p>
<p class="center large">This paragraph will be red, center-aligned,
and in a large font-size.</p>

</body>
The CSS Universal Selector
The universal selector (*) selects all HTML elements 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>
The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions.
Look at the following CSS code (the h1, h2, and p elements have the same style
definitions):
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
CSS Combinators

A combinator is something that explains the relationship

between the selectors.
A CSS selector can contain more than one simple selector.
Between the simple selectors, we can include a combinator.
There are four different combinators in CSS:
1. descendant selector (space)
2. child selector (>)
3. adjacent sibling selector (+)
4. general sibling selector (~)
Descendant Selector

The descendant selector matches all elements that are descendants of a specified element. The
following example selects all <p> elements inside <div> elements:
<html>
<head>
<style>
div p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Descendant Selector</h2>
<p>The descendant selector matches all elements that are descendants of
a specified element.</p>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<p>Paragraph 3 in the div.</p>
</div>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
</body>
Child Selector (>)

The child selector selects all elements <div>

that are the children of a specified <p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
element. <section>
<!-- not Child but Descendant -->
<html> <p>Paragraph 3 in the div (inside a section
element).</p>
<head> </section>
<style> <p>Paragraph 4 in the div.</p>
div > p { </div>
<p>Paragraph 5. Not in a div.</p>
background-color: yellow;}
<p>Paragraph 6. Not in a div.</p>
</style> </body>
</head> </html>
<body>
<h2>Child Selector</h2>
<p>The child selector (>) selects
all elements that are the
children of a specified
Adjacent Sibling Selector (+)

The adjacent sibling selector is used to select an element that is

directly after another specific element.
Sibling elements must have the same parent element, and "adjacent"
means "immediately following".
The following example selects the first <p> element that are placed
immediately after <div> elements:
 Example
<html>
<head>
<style> <p>Paragraph 3. After a div.</p>
div + p {
background-color: yellow; <p>Paragraph 4. After a div.</p>
}
</style>
</head> <div>
<body> <p>Paragraph 5 in the div.</p>
<h2>Adjacent Sibling Selector</h2>
<p>Paragraph 6 in the div.</p>
<p>The + selector is used to select an </div>
element that is directly after
another specific element.</p>
<p>The following example selects the first
p element that are placed
<p>Paragraph 7. After a div.</p>
immediately after div <p>Paragraph 8. After a div.</p>
elements:</p>

<div> </body>
<p>Paragraph 1 in the div.</p>
</html>
<p>Paragraph 2 in the div.</p>
</div>
General Sibling Selector (~)

The general sibling selector selects all elements that are next siblings
of a specified element.
The following example selects all <p> elements that are next siblings
of <div> elements:
Example
<!DOCTYPE html>
<html> <p>Paragraph 1.</p>
<head>
<style> <div>
div ~ p { <p>Paragraph 2.</p>
background-color: yellow; </div>
}
</style> <p>Paragraph 3.</p>
</head> <code>Some code.</code>
<body> <p>Paragraph 4.</p>

<h2>General Sibling </body>

Selector</h2> </html>

<p>The general sibling

selector (~) selects all
elements that are next
siblings of a specified
element.</p>
CSS Pseudo-classes

A pseudo-class is used to define a special state of an element.

For example, it can be used to:
Style an element when a user mouses over it
Style visited and unvisited links differently
Web Technologies (8EC07) -
UNIT 1

CSS Selectors: Pseudo-class

Pseudo-classes are used to define the special state of an

element.
:hover - Selects an element when the mouse pointer is over
it.
: a c ti v e - Selects an element when it is being activated by
the user.
: fo c u s - Selects an element when it has focus.
: n t h - c h i l d ( n ) - Selects every nth child element.

Dr. Dheeraj HTML4, CSS3 & March 4, 63 /

Example
<body>
<html> <h2>Styling a link depending on
state</h2>
<head> <p><b><a href="default.asp"
<style> target="_blank">This is a
link</a></b></p>
/* unvisited link */ <p><b>Note:</b> a:hover MUST come
after a:link and a:visited in the
a:link {color: red;} CSS definition in order to be
/* visited link */ effective.</p>
<p><b>Note:</b> a:active MUST come
a:visited {color: after a:hover in the CSS
green;} definition in order to be
effective.</p>
/* mouse over link */ </body>
</html>
a:hover { color:
hotpink;}
/* selected link */
a:active {color: blue;}
</style>
</head>
CSS Pseudo-elements

What are Pseudo-Elements?

A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
Style the first letter, or line, of an element
Insert content before, or after, the content of an element
Web Technologies (8EC07) -
UNIT 1

CSS Selectors: Pseudo-element

Pseudo-elements allow you to style certain parts of an

element.
: : b e fo r e - Inserts content before the content of an element.
: : a ft e r - Inserts content after the content of an element.
: : fi r s t - l i n e - Selects the first line of text within an
element.
: : fi r s t - l e tt e r - Selects the first letter of text within an
element.

Dr. Dheeraj HTML4, CSS3 & March 4, 66 /

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p::first-line {
6. color: #ff0000;
7. font-variant: small-caps;
8. }
9. </style>
10. </head>
11. <body>

12. <p>You can use the ::first-line pseudo-element to add a special effect to the first
line of a text. Some more text. And even more, and more, and more, and more, and
more, and more, and more, and more, and more, and more, and more, and
more.</p>

13. </body>
14. </html>
CSS Attribute Selectors

Style HTML Elements With Specific Attributes

It is possible to style HTML elements that have specific
attributes or attribute values.
CSS [attribute] Selector
The [attribute] selector is used to select elements with a specified
attribute.
The following example selects all <a> elements with a target
attribute:
Example
<html>
<head>
<style>
a[target="_blank"] {
background-color: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute="value"] Selector</h2>

<p>The link with target="_blank" gets a yellow background:</p>

<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com"
target="_blank">disney.com</a>
<a href="http://www.wikipedia.org"
target="_top">wikipedia.org</a>

</body>
</html>
Web Technologies (8EC07) -
UNIT 1

What is Bootstrap?

Bootstrap is a free and open-source CSS framework

directed at responsive, mobile-first front-end web
development.
It contains CSS- and (optionally) JavaScript-based design
templates for typography, forms, buttons, navigation, and
other interface components.
It aims to ease the development of dynamic websites
and web applications.

Dr. Dheeraj HTML4, CSS3 & March 4, 70 /

Web Technologies (8EC07) -
UNIT 1

Key Features of Bootstrap

Responsive Grid System: Provides a responsive, mobile-

first fluid grid system that scales up to 12 columns.
Pre-styled Components: Offers pre-styled HTML elements
such as buttons, forms, navigation bars, and more.
JavaScript Plugins: Includes a variety of JavaScript
plugins for common UI components like modals,
carousels, and tooltips.
Customization: Easily customizable with variables and
mixins, allowing developers to quickly adapt Bootstrap
to their projects’ needs.
Browser Compatibility: Ensures compatibility with the
latest versions of popular browsers.

Dr. Dheeraj HTML4, CSS3 & March 4, 71 /

Web Technologies (8EC07) -
UNIT 1

Getting Started with Bootstrap

Download Bootstrap from the official website (

htt ps://getbootstrap.com/) or include it via
CDN.
Include Bootstrap CSS and JavaScript files in
your HTML document.
Utilize Bootstrap’s CSS classes and components in
your HTML markup to design your website or web
application.
Refer to Bootstrap’s documentation and examples for
guidance on using its features effectively.

Dr. Dheeraj HTML4, CSS3 & March 4, 72 /

Web Technologies (8EC07) -
UNIT 1

Bootstrap Grid System

The Bootstrap grid system is a powerful layout system

that allows you to create responsive web designs with
ease.
It is based on a 12-column grid layout, which can be divided
into rows and columns to create flexible layouts.
The grid system is mobile-first, meaning it is designed
to work on mobile devices and scales up to larger
screen Size
sizes. Max Container Width Class Prefix
Extra None (auto) .col-
small
Small 540px .col-sm-
Medium 720px .col-md-
Large 960px .col-lg-
Extra 1140px .col-xl-
large
Dr. Dheeraj HTML4, CSS3 & March 4, 73 /
Example 1 : Typography

HTML elements that will be styled a little bit differently by

Bootstrap than browser defaults. Look at the "Try it"
examples to see the result/differences.

.list-inline :Places all list items on a

single line
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bo
otstrap.min.css">
<body>
<div class="container">
<h2>Typography</h2>
<p>The class .list-inline places all list items on a single
line:</p>
<ul class="list-inline">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div></body></html>
 Web Technologies (8EC07) -
UNIT 1

HTML Example with CSS and Bootstrap I

1 < ! DOCT Y PE ht ml >

2 < ht ml l a ng = " en "
>
3
4
5 < he a d t>a c ha r s e t = " UT F - 8 " >
< me
6 <meta name = " v i e w p o r t " c o n t e n t = " w i d t h = d e v i c e - w i d t h , i n i ti a l
- s c a l e =1. 0 " >
7 < t i t l e > Boot s t r a p E x a mpl e < / t i t l e >
8 < l i n k r e l = " s t y l e s h e e t " h r e f = " h tt p s : / / s t a c k p a t h .
b o o t s t r a p c d n . com / b o o t s t r a p / 4 . 5 . 2 / c s s / b o o t s t r a p . min . c s s "
9 >
1 <s t yl e >
0
1 . j umbot r on {
1
1 ba c k g r ound - c ol or : # e 9 e c e f ;
2
1 pa ddi ng : 2 r em 1 r em ;
3
1 }
4
15 < /<he
/ satdy l e >
>1
6

Dr. Dheeraj HTML4, CSS3 & March 4, 78 /

 Web Technologies (8EC07) -
UNIT 1

HTML Example with CSS and Bootstrap II

17 < body >

18 < di v c l a s s = " c ont a i ne r "
>
1 < di v c l a s s = " j umbot r on " >
9
2 <h1 c l a s s = " d i s p l a y - 4 " > H e l l o , w o r l d ! < / h1 >
0
2 <p c l a s s = " l e a d " > T h i s i s a s i m p l e h e ro u n i t , a s i m p l e
1
j umbot r on - s t y l e c ompone nt f or c a l l i ng e x t r a a t t e nt i on
to
2 f e a t ur e d c ont e nt or i nf or ma t i on . < / p >
2
2 < hr c l a s s = " my - 4 " >
3
< p > I t u s e s u ti l i t y c l a s s e s f o r t y p o g r a p h y and s p a c i n g t o
2 <sapaccl ea s cs ont e nt
= " bt n btout wii tma
n - pr hirny tbthen - ll agr" g ehr
r e cf ont
= " # a" i ne
r olr .e <= /" pbutt
> on
4
"
2 > L e a r n mor e < / a >
5
26 < /<di
/ di
v v>
>2
7
28 < / body
>
29 < / ht ml
>
Dr. Dheeraj HTML4, CSS3 & March 4, 79 /
Web Technologies (8EC07) -
UNIT 1

HTML Example with CSS and Bootstrap : Output

Dr. Dheeraj HTML4, CSS3 & March 4, 80 /