[Answered]
the style of the body of the website I made is overwriting color variables I use to implement themes to my website. The problem is that the style is not in my code. I only changed the color values on the :root{}, first I thought it might be some caching issue but rebooting my computer doesn't work.
here is an image of my problem, what is weird to me is how some variables are spelled differently:
I wonder where the CSS in the purple box is coming from.
here's my relevant code:
css:
:root {
--primary-color: #fff;
--secondary-color: #f2f2f2;
--tertiary-color: #333;
--quaternary-color: rgba(238,238,238,0.2);
--quinary-color: #000;
--senary-color: #000;
--septenary-color: #000;
--octonary-color: #000;
--nonary-color: #000;
--denary-color: #000;
--highlights: #4CAF50;
--warnings: #F00;
}
body {
margin: 0;
font-size: 28px;
font-family: Arial, Helvetica, sans-serif;
background-color: var(--primary-color);
}
html (in php):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./includes/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="./includes/jquery-3.1.1.min.js"></script>
<style>
body{
background-image: url("BG.png");
background-repeat: no-repeat;
background-size: auto;
background-attachment: fixed;
}
</style>
</head>
<body>
<div id="navbar">
</div>
<div id="sidenav">
</div>
<div id="content">
</div>
</body>
</html>
the file structure looks like the folowing:
web[
includes[
main.css,
jquery-3.1.1.min.js
],
index.php,
BG.png
]
^if that makes sense
In the rest of my code no style tag is used to asign CSS, as said I tried rebooting, I got disable cache checked, Incognito doesnt work, commenting the cdnjs.cloudflare.com CSS out also has no effect. If you want any more info please ask.
Thank you very much for taking your time to read this!
I had this bit of js, which I completely overlooked:
<script>
function setColorTheme() {
document.body.style.setProperty('--primary-color', "#fff");
document.body.style.setProperty('--secondary-color', "#f2f2f2");
document.body.style.setProperty('--tertiary-color', "#333");
document.body.style.setProperty('--quaternary-color', "#eee");
document.body.style.setProperty('--quinary-color', "#000");
document.body.style.setProperty('--senary-color', "#000");
document.body.style.setProperty('--octonary-color', "#000");
document.body.style.setProperty('--nonary-color', "#000");
document.body.style.setProperty('--denary-color', "#000");
document.body.style.setProperty('--highlights-color', "#4CAF50");
document.body.style.setProperty('--warnings-color', "#F00");
}
</script>
I am sorry for asking this question, some say there's no such thing as a dumb question, this one proved em wrong.
Thanks to #Stephen P for pointing out it could be added by js.
Related
I'm trying to add a background color to my header but it's not adding it when i have it written in the css file.
HTML Code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="CSSPage.css">
</head>
<!--
<style media="screen">
#background-color {
background-color: hsl(120, 1%, 79%);
padding-top: 20px;
padding-bottom: 20px;
}
</style>
-->
<header id="background-color">
<hr>
<p>Sample</p>
<hr>
</header>
</html>
CSS Code: CSSPage.css
#background-color {
background-color: hsl(120, 1%, 79%);
padding-top: 20px;
padding-bottom: 20px;
}
It only works when it's on HTML but not when it's on the css file.
I've also tried adding !important but it didn't do anything.
The rest of the styles for other id works except this one.
Just change style class(#background-color{...}) as well as id to some other name if possible (other than background-color) and try.
I'm an idiot. Apparently the CSS file doesn't get applied even if you add new things to it if you don't manually save. I'm sorry for wasting everyone's time. It works now. Thank you for pointing me into JsFiddle's direction. Since it worked perfectly there.
I am using the CSS reset as shown below but however, it is not working.
HTML
<!--Document type declaration-->
<!DOCTYPE html>
<head>
<!--Linking to our CSS file-->
<link rel="stylesheet" href="main.css">
<!--Character encoding of the page-->
<meta charset="utf-8">
<title>Learning</title>
</head>
<body>
<div class="introduction">
<h1>H1 Text</h1>
<h2>H2 Text</h2>
</div>
</body>
</html>
CSS
<style>
/* CSS Reset */
* {
margin: 0;
padding: 0;
}
body {
color: white;
}
.introduction {
background-color: black;
}
</style>
Updated Image
I am starting to doubt it's my machine because the CSS reset works on CodePen.
Thanks for looking into this silly question. If you need more information please don't hesitate to ask me.
Edit:
I have uploaded my code to Codepen and it is working fine. Added new screenshot.
https://codepen.io/anon/pen/xPBVLV
Added my HTML and CSS code.
I found the problem.
in CSS files I do not need to add <style>. I can just write my CSS code into the CSS file.
I am sorry everyone and especially #Quentin for looking into this silly mistake.
I want to put the transparent light image on background color for making a good effect
i don't know why the light image didn't display
its what i have done :
http://jsfiddle.net/4pbq2tx8/2/
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen">
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/carousel.js"></script>
<div id="carousel">
</div>
</body>
</html>
css :
#carousel
{
border:solid 1px #1a1a1a;
position:relative;
width:922px;
height:221px;
margin:0 auto;
margin-top: 50px;
display: block;
background-image:url(light.jpg);
}
body
{
background-color: #c7c7c7;
}
As I stated in the comments, the reason why your externally 'loaded' image is not showing up in your fiddle is because of the fact that external resources are only for loading css or javascript files.
Indeed, this becomes obvious when inspecting the source of the included iframe:
As the image is included in the page as a javascript file. If the type is unknown(eg, not being css or javascript), the file is loaded as javascript, as noted in the previously linked documentation.
In order to properly load such an image, you need to supply the full url in the actual css of the fiddle. Example:
#carousel
{
border:solid 1px #1a1a1a;
position:relative;
width:922px;
height:221px;
margin:0 auto;
margin-top: 50px;
display: block;
background-image:url('http://s4.postimg.org/590qvkilp/light.png');
}
DEMO
The external resource you included is loaded from another website s4.postimg.org/590qvkilp/light.png
Because the image is not in the same location you need to include that full location.
background-image: url(http://s4.postimg.org/590qvkilp/light.png);
DEMO here
For some crazy reason my body tag is not working at all. It is the only CSS that isn't working. I am trying to have a background behind the content of my website and have the content be about 80% of the body. So that I can have two bars on either side of my website which kind of acts as a border. Kind of how there seems to be two white bars on either side of stack overflow.
<style type="text/css">
body{
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #000;
margin: 0;
padding: 0;
color: #000;
}
#content {
font: 14px/1.4 'Times New Roman', sans-serif;
width: 80%;
max-width:1260px;
min-width: 780px;
background-color: #89837A;
margin-left: auto;
margin-right: auto;
}
Here is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<!--Replace link with good web font you want.<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' /> - See more at: http://www.newthinktank.com/2011/09/how-to-layout-a-website/#sthash.lWAaNgcS.dpuf -->
<link rel="stylesheet" type="text/css" href="CPLS_Stylesheet.css">
<!--<div class='error' style='display:none'>Event Created</div>-->
<title>MyWebsite</title>
</head>
<body>
<div id="content">
HEADER
<div id="contentBackground">
CONTENT
</div><!--End of contentBackground-->
</div> <!--End of content-->
</body>
</html>
No matter what color I change the body tag to the background always stays white. The content is the correct color.
Don't put style link at the top of the some other link. that's why body design is not working. Put style link under the all the link
Is this: <style type="text/css"> in your CSS or is that just a mistake?
Unless that's an accident when your wrote that code, that's not valid CSS. The only time that's allowed is using the style tags within a HTML document to wrap CSS code.
Okay:
index.html
<style>
body {
background-color: white;
}
</style>
Not okay:
style.css
<style>
body {
background-color: white;
}
Since there's no closing tag, it looks like you accidentally copied that from a tutorial using the <style> tag inside a HTML document.
If you are using some kind of CSS framework make sure you place your custom CSS files, at last, the same thing happened with me I adjusted the order of the files that I
was including and it worked fine.
I don't know the exact reason why this problem is occurring.
The same problem has been occurred to me. However, I tackled it by using !important after the property in body in CSS file.
e.g. body{ background:black !important;}
If you found the actual reason do share it with me.
I know this was asked long ago but here is one solution. Put your css file link as the last one in the part of your html.
I know this was asked long ago, but I have just had the exact same issue.
Add a fake element style in your stylesheet before the body.
e.g.
#myFakeElement { color:red ; }
body{
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #000;
margin: 0;
padding: 0;
color: #000;
}
Remove from the style sheet....
I just copied the code to my editor and it worked:
So this is a weird one, I'm getting a small margin at the very top of my page even though I've applied the standard CSS reset. If I open the inspector in Chrome / Firefox / or even gasp IE, I see that the body is reading my margin:0 reset, but still adding a gap regardless.
Gap:
Chrome Web Inspector that shows margin:0 is being honord:
So, the super duper weird part here is that if throw an important like margin: 0 !important; , the gap goes away. I've used this exact template set up many many times without issue. Hopefully someone sees something that is eluding me right now.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="/Content/css/Reset.css" rel="stylesheet"/>
<link href="/Content/css/bootstrap-theme.css" rel="stylesheet"/>
<link href="/Content/css/bootstrap.css" rel="stylesheet"/>
<link href="/Content/css/Site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/jquery-1.9.0.js"></script>
<link href='//fonts.googleapis.com/css?family=Ubuntu:300,400,500' rel='stylesheet' type='text/css'>
<script type="text/javascript">var base_url = 'http://localhost:64789/';</script>
</head>
<body>
<div id="wrap">
<h2>Index</h2>
</div>
</body>
</html>
CSS
Note: Site.css is an empty file at this point, as I just started this project.
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form {
margin:0;
padding:0;
border:0;
border-collapse:separate;
border-spacing:0;
}
a {
text-decoration: none;
}
* {
font-family: 'Ubuntu', sans-serif;
}
body {
background: #f0f6e8 url(../images/gradbackground.jpg) repeat-x 0 top;
}
#wrap {
width: 100%;
background: transparent url(../images/leaves.jpg) no-repeat center top;
}
The margin is on the <h2>, not the <body>. There must be some other selector for h2 that is adding the additional top margin. In your own Site.css styles, include margin-top: 0 for the h2
Bootstrap is probably overriding it from another element. Check the elements it is nested in for margin being set in main.css.