CODEWITHSUNDEEP
htmlcss
Caleb Wolff
Caleb Wolff

Reputation: 65

I've set a background on my html, now how do I set the background of one id to be a different color?

I'm new to HTML and CSSand I have been trying to figure out what I've been doing wrong all night.

I would like to set the background color of div with id="transparentBox" to be a different color (eventually a and off-white box with some currently unknown opacity setting) However, it seems as thought the styling I'm applying via CSS isn't doing the trick. Any advice here would be greatly appreciated.

I've set a background on my HTML, now how do I set the background of one id to be a different color?

    html
    {
	    text-align: center;
	    background: linear-gradient(to top right, #33ccff 0%, #0066ff 100%) fixed;
    }

    body
    {
    	text-align: center;
    }
    
    p
    {
    	text-align: left;
    }
    
    .off
    {
    	color: #F0FFFF;
    }
    
    #header
    {
    	height:100px;
    	width:960px;
    }
    
    #header h1
    {
    	position: relative;
    	text-align: left;
    	color: #000000;
    	font-size: 45px;
    	left: 5px;
    	top: 20px;
    }
    
    body 
    {
    	margin: 0px;
    	padding: 0px;
    	text-align: left;
    	font: 12px Arial, Helvetica, sans-serif;
    	font-size: 14px;
    }
    
    #navigationBar
    {
    	height: 40px;
    	background-color: #F0FFFF;
    	border-color: #000000;
    }
    
    ul 
    {
    	list-style-type: none;
    	margin: 0px;
    	padding: 0px;
    	overflow: hidden;
    	background-color: #333;
    }
    
    li 
    {
    	float: left;
    }
    
    li a {
    	display: block;
    	color: white;
    	text-align: center;
    	padding-top: 13px;
    	padding-bottom: 13px;
    	padding-left: 15px;
    	padding-right: 15px;
    	text-decoration: none;
    }
    
    /* Change the link color to #111 (black) on hover */
    li a:hover 
    {
    	background-color: #111;
    }
    
    .active 
    {
    	background-color: #4CAF50;
    }
    
    #navigationMenu
    {
    	margin-top: 0px;
    	height: auto;
    	background-color: #F0FFFF;
    	border-color: #000000;
    	border-radius: 25px;
    }
    
    #transparentBox
    {
    	position: relative;
    	display: block;
    	margin: 10px;
    	padding: 10px;
    	width: 500px;
    	height: 400px;
    	background-color: #FFFFFF;
    	border-color: #000000;
    	border-radius: 10px;
    }
<!DOCTYPE html>
    <html xmlns="http://www.calebwolff.us">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="refresh" content="30" />
        <link rel="stylesheet" type="text/css" href="style.css" />
    
        <title>Caleb Wolff's Personal Website</title>
    </head>
    <body>
        <div id="header">
            <h1>Caleb<span class="off">Wolff</span></h1>
        </div>
        <div id="navigationBar">
            <ul>
                <li><a href="http://www.calebwolff.us">Home</a></li>
                <li><a href="https://www.facebook.com/calebwolffmusic/">Facebook</a></li>
            </ul>
        </div>
        <div id="transparnetBox">
            <h1>HELLLOOO</h1>
        </div>
    </body>
    </html>

Upvotes: 0

Views: 59

Answers (4)

Girisha
Girisha

Reputation: 19

To change the background there are two methods

  1. Change color normally without shades as

    html { text-align: center; background: linear-gradient(to top right, #33ccff 70%, #0066ff 100%) fixed; }

  2. Change color with gradient shades you should change the colors in html style with color codes of 6 digits
    html { text-align: center; background: linear-gradient(to top right, #33ccff 70%, #0066ff 100%) fixed; } There are list of color codes available and opacity of those colors are set in percentage.You can try either of these two methods.

Upvotes: 1

Rajesh Kumar
Rajesh Kumar

Reputation: 56

The id name in css and html are different(typo), in css its '#transparentBox' and in html it is 'transparnetBox'.

Please make sure the id name every where you use are the same. You can always use browser developer tools to check and inspect styling on DOM elements

<!DOCTYPE html>
<html xmlns="http://www.calebwolff.us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<meta http-equiv="refresh" content="30"/>
<link rel="stylesheet" type="text/css" href="style.css"/>

<title>Caleb Wolff's Personal Website</title>
<style>
    html {
        text-align: center;
        background: linear-gradient(to top right, #33ccff 0%, #0066ff 100%) fixed;
    }

    body {
        text-align: center;
    }

    p {
        text-align: left;
    }

    .off {
        color: #F0FFFF;
    }

    #header {
        height: 100px;
        width: 960px;
    }

    #header h1 {
        position: relative;
        text-align: left;
        color: #000000;
        font-size: 45px;
        left: 5px;
        top: 20px;
    }

    body {
        margin: 0px;
        padding: 0px;
        text-align: left;
        font: 12px Arial, Helvetica, sans-serif;
        font-size: 14px;
    }

    #navigationBar {
        height: 40px;
        background-color: #F0FFFF;
        border-color: #000000;
    }

    ul {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
        background-color: #333;
    }

    li {
        float: left;
    }

    li a {
        display: block;
        color: white;
        text-align: center;
        padding-top: 13px;
        padding-bottom: 13px;
        padding-left: 15px;
        padding-right: 15px;
        text-decoration: none;
    }

    /* Change the link color to #111 (black) on hover */
    li a:hover {
        background-color: #111;
    }

    .active {
        background-color: #4CAF50;
    }

    #navigationMenu {
        margin-top: 0px;
        height: auto;
        background-color: #F0FFFF;
        border-color: #000000;
        border-radius: 25px;
    }

    #transparnetBox {
        position: relative;
        display: block;
        margin: 10px;
        padding: 10px;
        width: 500px;
        height: 400px;
        background-color: #FFFFFF;
        border-color: #000000;
        border-radius: 10px;
    }
</style>
</head>

<body>
<div id="header">
<h1>Caleb<span class="off">Wolff</span></h1>
</div>

<div id="navigationBar">
<ul>
    <li><a href="http://www.calebwolff.us">Home</a></li>
    <li><a href="https://www.facebook.com/calebwolffmusic/">Facebook</a></li>
</ul>
</div>

<div id="transparnetBox">
<h1>HELLLOOO</h1>
</div>
</body>
</html>

Upvotes: 0

Andrii Starusiev
Andrii Starusiev

Reputation: 7774

Check the typo between <div id="transparnetBox"> and # transparentBox. You had to check your block in the browser and see that you do not have any styles for this component, and not just "background colors."

Upvotes: 0

rpivovar
rpivovar

Reputation: 3438

Adding color styling to the <html> tag rather than the <body> tag is a bit unusual. Why not change that to the <body> tag?

On another note, try this:

#transparentBox
{
    position: relative;
    display: block;
    margin: 10px;
    padding: 10px;
    width: 500px;
    height: 400px;
    background-color: #FFFFFF !important;
    border-color: #000000;
    border-radius: 10px;
}

Upvotes: 0

Related Questions