Hello everyone, I need some help troubleshooting the code below. I am attempting to apply these CSS styles to my page, but I am running into issues.
I know that #cookieTerms is a selector meant to prevent any conflicts with the main style.css elements on the site.
My understanding was that you should enclose your code in the following tag:
<div id="CookieTerms"></div>
However, I have not been successful so far. Here is my simple code and output. Any assistance would be greatly appreciated.
<style type="text/css">
#cookieTerms{font-family:Arial, Helvetica, sans-serif;color:#DDD;display:none;width:100%;background:rgb(5,5,5);color:#DDD;margin-top:0;padding-top:4px;overflow:auto;}
#cookieTerms .inner{margin:auto;width:960px;}
#cookieTerms div.big{padding-left:5px;float:left;width:680px;}
#cookieTerms div div{padding-left:5px;float:left;width:110px;}
#cookieTerms div h5, #cookieTerms div p{font-size:14px;}
#cookieTerms div h5{font-size:18px;}
#cookieTermsagree{font-size:16px;color:#000;border-top:none;-webkit-border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-moz-border-radius:8px;border-radius:8px;border-radius:8px;font-weight:normal;text-align:center;background-image:url(../images/goldBar.png);cursor:pointer;display:inline-block;width:100px;}
#cookieTermsagree:hover{background-image:url(../images/greenBar.png);}
#cookieTerms a:link, #cookieTerms a:visited{color:#f6A21D;}
}
</style>
</head>
<div id="CookieTerms">
<div id='inner'><div><h5>Cookies Policy</h5></div><div id='big'>
<p>Like most websites we use cookies blah blah. <a href='cookies.html'>Tell me more about cookies</a>.</p></div><div><p id='cookieTermsagree'>Close Cookie Message</p></div></div></div>
</body>
</html>