I'm very new to website designing an am trying to change the background colour of a button, but for some reason it's not working. Could someone please help?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="widthz=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Title</title>
</head>
<body>
<script src="application.js"></script>
<h3>Small Header</h3>
<button id="InformationButton">Information</button>
</body>
</html>
styles.css:
.InformationButton {
background-color: aqua;
border : solid;
}
Since you have used id to refer the button in your HTML, you should be using the id selector (#) instead of the class selector(.).
Thus replace your CSS as below.
#InformationButton {
background-color: aqua;
border : solid;
}
Read more about CSS selectors in the docs
You are using a CSS ID selector to refer to your button. Either change the CSS to a class selector :
#InformationButton {
background-color: aqua;
border : solid;
}
or change your button element to
<button class="InformationButton">Information</button>
Related
So, I'm currently learning #html & #css and I'm on the topic of relational selectors.
In the example, the code below is suppose to display a web page with orange text. The
text is still black even after trying several variations. Can someone help?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section id="products">
<p>Lorem ipsum dolor sit.</p>
</section>
</body>
</html>
styles.css
body {
margin: 10px;
}
#products p {
color: orange;
}
It works just fine,but you have to link the css file using tag
<link rel="stylesheet" href="style.css">
You have to connect your CSS file to the HTML by linking to it in the <head>, like so:
<link rel="stylesheet" href="./style.css" />
(and if the CSS file is in a folder, it will be ./foldername/style.css)
There are three ways you can implement style to HTML documents:
External CSS
Internal CSS
Inline CSS
You could include your style code in the document (Internal CSS). To do so you would need to enclose it in style tags like this:
<style>
body {
margin: 10px;
}
#products p {
color: orange;
}
</style>
Hide that element in your , or at the end of your , and you should be fine. Generally, it's frowned upon to use Internal or Inline CSS, but you can do if you want to!
I have 2 files.
1.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div>Hello World</div>
</body>
</html>
main.css
div::after{
content: "123";
color: red;
font-size: 20px;
}
When I opened it, it shows like this:
I don't know why 123 is in the wrong place.
You are using live-server which injects additional content, including div elements into the page.
Your CSS select all div elements.
You could change your selector to be more specific (e.g. to select divs that are members of a particular class and then add a matching class attribute to the div you want to select).
I'm trying to reference a nested class within my html, which is under <body>. The issue is, is that if I were to reference body by itself in css, the background would appear. However if I try to reference my class under body, it doesn't appear. I've tried referencing it with a . before the class name which still doesn't work. Code below:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css" />
<title>vxsqi-lib</title>
</head>
<body>
<div class="backgroundimage"></div>
</body>
</html>
CSS
.backgroundimage {
background-image: url("backgroundimage/dark-night-mountains-4k-e3.jpg");
background-size:cover;
background-color: white;
}
You can try this,
div.backgroundimage {
background-image: url("backgroundimage/dark-night-mountains-4k-e3.jpg");
background-size:cover;
background-color: white;}
Edit second options because wrong :(
This must be work. Let me know if doesnt
This question already has answers here:
Specificity of inherited CSS properties
(4 answers)
Closed 1 year ago.
I'm an apprentice in informatics and I'm having a problem.
I'm currently struggling to find out, why my class selector with the font color red, is getting overwritten by my general <p> colour? I also tried finding out if it gets overwritten when I write <p style="color: yellow">, but this works.
So this is how my HTML looks:
p {
color: green;
}
.Banane {
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--<script src="index.js"></script>-->
<div class="Banane">
<h1>Bananenbrot ist lecker</h1>
<h2>Wieso auch nicht?</h2>
<p>Wusstest du dass Bananenbrot aus vielen Vitananen besteht?</p>
</div>
</body>
</html>
I even tried it with !important but it still doesn't work. It just stays green.
Thank you guys!
In your case:
p {
color: green;
}
Although it's less powerful than .Banane, it affects only the <p> not the <div>, the parent.
The selector is very specific to <p> and it is affecting the colour inside the <div> only for <p>.
Css resolves conflicts in order of specificity because p is more specific than the containing class Banane you get green text unless you specify that p inside Banane shall also be red.
p{
color: green;
}
.Banane p{
color: red;
}
.Banane{
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--<script src="index.js"></script>-->
<div class="Banane">
<h1>Bananenbrot ist lecker</h1>
<h2>Wieso auch nicht?</h2>
<p>Wusstest du dass Bananenbrot aus vielen Vitananen besteht?</p>
</div>
</body>
</html>
Elements inside of Banane by default inherit color from a parent, so when you added color: red to Banane class, h1 and h2 elements inherited the color red from their parent. on the other hand with the p selector you basically said every p element should have color: green, so p inside of Banane won't inherit color from parent anymore cause it has been selected by you.
you can see this in the computed tab in chrome dev tools, the color green is higher than the color red and it will get applied.
So I am new to this, but I grabbed this from W3 schools and I am trying to apply a colour to the class - so I created the style section and tried to apply color but its not working. I know this is linked to an outside style sheet, so maybe thats overriding what I want to do. Otherwise, I can't see what to do, I have googled for an hour or so, at this point I need someone with more knowledge to help me out.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.label label-default {
background color: #330000;
}
</style>
</head>
<body>
<h1><span class="label label-default">Survey</span>
</body>
</html>
You have 3 problems
The selector is not good. <span class="label label-default">. If you want to select this, you need to write .label.label-default
You should use a multi class selector , read here -> multi class selector
Read more about CSS Selectors
The background color style is not correct either. You need to write background-color
Read more here -> background-color
h1 tag has to be closed with </h1>
Read more here -> HTML Elements
My own question -> Why use a span inside the h1 if you don't split the content or is there some other reason ? For eg <h1><span class="font-light">Light</span>Not Light</h1>.
If you have no special reason to use span inside the h1, you should add the classes directly on the h1
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.label.label-default {
background-color:#330000;
}
</style>
</head>
<body>
<h1><span class="label label-default">Survey</span></h1>
</body>
</html>
I know this is linked to an outside style sheet, so maybe thats overriding what I want to do -> the linked stylesheet is a bootstrap stylesheet. To check if that overwrites your own custom css, inspect your code in developers console and see if your styles are cut out. Then they are overwritten.
I have googled for an hour or so -> Then you should learn how to ask google. The problems you have are pretty basic. Google-ing multi class selector css or even 2 classes css + background color css would've given you a lot of results and answers
First of all, you are missing . in your class selector, next you have to remove the space between selectors since they are applied to the same element. You also have to add -to background-color property. Finally close the h1 tag and you're done:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.label.label-default {
background-color:#330000;
}
</style>
</head>
<body>
<h1><span class="label label-default">Survey</span></h1>
</body>
</html>
Your css is incorrect, first of all its is "background-color" not "background color"
and second if you want to apply css for same div classes then you should not give space for class name like ".label .label-default"
you have to write class names without spaces like this ".label.label-default"
try this
<style>
.label.label-default {
background-color:#330000;
}
</style>
instead of this
<style>
.label .label-default {
background color:#330000;
}
</style>