Example1:
Let us put two links and apply the special style by using pseudo class.
Style is: blue color and font size is 40 pixels
Complete Code:
<!DOCTYPE html>
<html>
<head>
<title> Two anchor links with pseudo classe </title>
<style>
a:hover {
color: blue;
font-size: 40px;
}
</style>
</head>
<body>
<a href="[Link]"> Click here to see the image </a><br><br>
<a href="[Link]"> Click here to see the image </a>
</body>
</html>
Output:
After placing the mouse cursor on the links then special style is applied like blue
link color and 40 pixels font size as follows:
Example2:
We have four links in HTML page, and for first two links special styles to be applied
and for remaining two links no styles to be applied
Complete Code:
<!DOCTYPE html>
<html>
<head>
<title> four anchor tags with pseudo class </title>
<style>
a#style1:hover {
color: blue;
font-size:40px;
}
</style>
</head>
<body>
<a id="style1" href="[Link]"> Click here to see the image
</a><br><br>
<a id="style1" href="[Link]"> Click here to see the image
</a><br><br>
<a href="[Link]"> Click here to see the image </a> <br><br>
<a href="[Link]"> Click here to see the image </a>
</body>
</html>
Output:
Whenever we place the mouse cursor on first two links then the special style will
be applied i.e. blue color to link and 40 pixels font size as follows:
Special style is not appeared to the remaining two links (3rd link and 4th link)
because pseudo class is not applied to that 3 rd and 4th links.
Example3:
We have one image in HTML page and whenever we place the mouse cursor over
Image then special style to be applied (image should be increased)
That special style is: whenever mouse cursor is placed on the image then that
image height should be 400 pixels and width should be 800 pixels
Before placing the mouse cursor on the image then that image size should be
having the height of 200 pixels and the width of 400 pixels.
Complete Code
<!DOCTYPE html>
<html>
<head>
<title> image tag - pseudo classes </title>
<style>
img:hover {
height: 400px;
width: 800px;
}
</style>
</head>
<body>
<img src="[Link]" height="200px" width="400px">
</body>
</html>
Output:
Now place the mouse cursor on image then this image height will be 400 pixels and
width will be 800 pixels as follows:
Introduction to Javascript
Javascript is a programming language to create interactive webpages.
Interactive web pages are used to interact with the users.
Javascript runs in the web browser.
Javascript is used on the client-side.
Javascript is dynamically typed, meaning variables don't have a fixed
type.
Javascript is interpreted (executed line-by-line) programming language.
JavaScript is interpreted by the browser, meaning that the code is
executed directly without needing a separate compilation step.
Homework
Interview Questions:
a) How to apply different special styles to anchor tag by using pseudo classes?
b) How to apply special styles to images by using pseudo classes?
c) What is javascript?
Task1: Design one HTML page to apply multiple special affects to anchor element
through pseudo classes
Task2: Design one HTML page to apply special affects to images through pseudo
classes