To make the entire div clickable follow the steps below and watch the video tutorial.
Demo:
Step1.
Add HTML
Create the div element:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="example">
<h3>What is a Web Developer?</h3>
<p>A Web Developer is a kind of programmer who takes a web design, which has been created by a client or design team and turns it into a website or distributed network applications...</p>
</div>
</body>
</html>Step2.
Add CSS
Style the div element:
<!DOCTYPE html>
<html>
<head>
<style>
.example {
padding:20px;
width:200px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="example">
<h3>What is a Web Developer?</h3>
<p>A Web Developer is a kind of programmer who takes a web design, which has been created by a client or design team and turns it into a website or distributed network applications...</p>
</div>
</body>
</html>Output:
What is a Web Developer?
A Web Developer is a kind of programmer who takes a web design, which has been created by a client or design team and turns it into a website or distributed network applications…
Step3.
Add a link
Open an <a> element at the beginning of the div and close at the end. Add the href attribute with the link.
Optional: Add the target attribute to open the link in a new tab.
<!DOCTYPE html>
<html>
<head>
<style>
.example {
padding:20px;
width:200px;
background-color: lightblue;
}
</style>
</head>
<body>
<a href="https://lenadesign.org/2019/12/22/what-is-a-web-developer/" target="_blank">
<div class="example">
<h3>What is a Web Developer?</h3>
<p>A Web Developer is a kind of programmer who takes a web design, which has been created by a client or design team and turns it into a website or distributed network applications...</p>
</div>
</a>
</body>
</html>Output:
Step4.
To remove the line under the link use the CSS text-decoration Property:
<!DOCTYPE html>
<html>
<head>
<style>
.example {
padding:20px;
width:200px;
background-color: lightblue;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<a href="https://lenadesign.org/2019/12/22/what-is-a-web-developer/" target="_blank">
<div class="example">
<h3>What is a Web Developer?</h3>
<p>A Web Developer is a kind of programmer who takes a web design, which has been created by a client or design team and turns it into a website or distributed network applications...</p>
</div>
</a>
</body>
</html>Output:
Enjoy coding!
Watch also the video tutorial:
Read also:
How to put an image into HTML code?
How to change the text on Hover?