The DIV Element

The DIV element let's you divide your webpage so that you can design only a specific part of the page.

  • Facebook
  • Twitter
  • LinkedIn
  • Instagram

Look at the Who We Are part. Don't you think that the white background seems rather too bland? Why not make the background of the Who We Are Part a little bit funky?

<body>

<h1 ID="Firstheading">Mars Calling. Get Your Tickets Now!</h1>

 

<img class="hero" src="Images/Mars-Photo.jpg">

 

<div ID=gradient1>


 

<h2 class="center-heading">Who We Are?</h2>

 

<p class="whitespace"> <strong>We are the premier Mars tourism services in India. Pack your bags and come to us.

We'll provide you a smooth ride to the Red Planet. Marvel at the alien civilization.

Explore the aesthetic beauty of the 4th rock from the sun.

You might even get to see some alien insects if you are lucky.

And then we will take you safely back to Earth. It will be a once in a lifetime experience.

Come. Buy the ticket to the Red Planet today!</strong></p>

 

</div>


 

</body>

 

</body>

</html>

I sandwiched the Who We Are Part with a Div element. It is now divided, we can style only that part.

Let's add some lines in the stylesheet.

<style>

img.hero {

width:100%; height:auto

}

 

#Firstheading {

background-color: crimson;

color: white;

padding-bottom: 25px;

padding-top: 25px;

text-align: center;

}

 

h2.center-heading {

text-align:center;

font-size: 50px;

}

 

p.whitespace {

margin: 0px 185px 0px 185px;

text-align: center;

font-size: large;

line-height: 110%%;

}

 

#gradient1 {

background-image: linear-gradient(to right, #3494e6, #ec6ead);

margin: -45px 0px 0px 0px

}

 

</style>

To add a gradient, you need to know the hex codes of the two colors that make up the gradient. It's easy to find out.

Once you have the hex codes of the two colors, you add the line- background-image: lineargradient(direction, hex-codes separated by comnma)

The direction is denoted with a 'to' and then right or left or you can leave the direction part blank and the gradient will appear vertically by default.

More on this - https://www.w3schools.com/css/css3_gradients.asp

The end result is -

As you can see that there is a gap between the image and the gradient. Let's fix with Margin. By default the margin is at 0 px for all the sides. You have to use some negative number to pull the element up.

#gradient1 {

background-image: linear-gradient(to right, #3494e6, #ec6ead);

margin-top: -45px

}

You will now see that the heading- Who We Are is appearing quite close to the image. It doesn't look good. So let's add some line break <br> between the image and the heading. Two would do.Let's also add some line breaks after the p element.

I also tweaked the p element a little bit. I added the 'Strong' element and increased the line height to make  the paragraph look attractive. Also, I made it center aligned.

<style>

img.hero {

width:100%; height:auto

}

 

#Firstheading {

background-color: crimson;

color: white;

padding-bottom: 25px;

padding-top: 25px;

text-align: center;

}

 

h2.center-heading {

text-align:center;

font-size: 50px;

}

 

p.whitespace {

margin: 0px 185px 0px 185px;

text-align: center;

font-size: large;

line-height: 110%%;

}

 

#gradient1 {

background-image: linear-gradient(to right, #3494e6, #ec6ead);

margin-top: -45px

}

 

</style>

</head>

Screenshot 2021-10-31 at 22-32-49 Screenshot.png
Screenshot 2021-10-31 at 22-46-47 Screenshot.png