CODEWITHSUNDEEP
htmlcss
Stepan
Stepan

Reputation: 1141

How to style 3 (div) boxes using CSS

I have this HTML page:

<!DOCTYPE html> <html lang="en">   <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="styleBox.css">
    <script src="script.js"></script>   </head>   <body>
    <div>
      <div>
        <div>
            text
        </div>
      </div>
    </div>   </body> </html>

This page should look like this - http://pasteboard.co/nFlMljzPG.png

I have tried something, but I do not know hot to style text inside third div But without editing the HTML page

my css: 

div {
    width: 380px;
    height: 300px;
    background: #B0CDE9;
    border-style: solid;
    border-color: black;
    border-width: 1px;
}

div div {
    width: 290px;
    height: 280px;
    background: yellow;
    margin-left: 45px;
    margin-top: 8px;
}

div div div {
    width: 120px;
    height: 140px;
    background: #82C940;
    margin-top: 70px;

}

(my boxes are - http://pasteboard.co/nFo7mv7R7.png ) Could you advise me something please?

Upvotes: 1

Views: 205

Answers (3)

nvkrj
nvkrj

Reputation: 1033

Since you don't want to change the HTML code, you can just apply padding to the third div to position the text inside it. But you need to adjust the width and height of the div when you add padding. For example, if your div has a width of 120 px and you want the text to be 20px away from the left border, so you give a left padding of 20px and decrease the width by 20px. Thus, now you have a div with width 100px and padding left 20px. See the example below.

HTML

<div>
  <div>
    <div>
       text
    </div>
  </div>
</div>

CSS

div {
    width: 380px;
    height: 300px;
    background: #B0CDE9;
    border-style: solid;
    border-color: black;
    border-width: 1px;
}

div div {
    width: 290px;
    height: 280px;
    background: yellow;
    margin-left: 45px;
    margin-top: 8px;
}

div div div {
    width: 100px;
    height: 60px;
    background: #82C940;
    margin-top: 70px;
    padding-top:80px;
    padding-left:20px;
}

Upvotes: 1

Abk
Abk

Reputation: 2233

You need to use class or id to be able to style each and every div CLEANLY

Maybe this is what you need.

.outter{
  height: 300px;
  width: 300px;
  background: orangered;
  border: 5px solid orange;

}

.center{
  height: 50%;
  width: 70%;
  background: blue;
  border: 5px solid grey;
  margin: 10% auto;

}
.inner{
  height: 50%;
  width: 70%;
  background: maroon;
  border: 5px solid white;
  margin: 20% auto;

}
.inner p{
  font-size: 1em;
  font-family: serif;
  color: white;
  padding: 5px;
}
<div class='outter'>
  <div class='center'>
  
  <div class='inner'>
  <p>This is the text in the inner div</p>
  
  </div>
  
    
  </div>
  
  </div>

Upvotes: 0

Bhavin Shah
Bhavin Shah

Reputation: 2482

	.blue_div{
		width: 30%;
		background: blue;
		margin:0 auto;
		margin-top: 10%;
		border: thin black solid;
		height: 500px;
	}

	.blue_div .yellow_div{
		width: 80%;
		margin: 0 auto;
		height: 450px;
		background: yellow;
		border: thin black solid;
		margin-top: 5%;
	}


	.blue_div .yellow_div .text_div{
		width: 40%;
		margin-left: 10%;
		height: 200px;
		background: green;
		border: thick black solid;
		margin-top: 25%;
		display: block;
		text-align: left;
		line-height: 200px;
	}

	.text_div span{

		color: #000000;
		
	}
<div class="blue_div">

<div class="yellow_div">
<div class="text_div">
<span>&nbsp;&nbsp;Text</span>
	
</div>

</div>

Is this the same that you want?

PS : Change CSS as per your need.

Hope it helps.

Upvotes: 0

Related Questions