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
Related
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).
My css file is not changing the thhing i need:
Here's my 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">
<script src="/www/style.index.html.css"></script>
<title>Test</title>
</head>
<body>
<h1 class="test">Server Test</h1>
</body>
</html>
and here's my css:
.test{
font: optional;
color: red;
}
the class test is not working, and I have no Idea why. if you have an answer, please help! :)
Bob
PS: sorry for the weird ass title.. The bot is just stupid
You add/import/link your css file as follows <link href="./file_name.css" rel="stylesheet" />
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>
I am saving my code and refreshing it. I dont think I did anything wrong. I am trying to make a Parallax website, I didn't add it yet because the image itself couldn't even load.
This is the code. It's not loading in any way. Completely white.
.img-1{
background-image: url("Image1.jpg");
margin-left: auto;
margin-right: auto;
}
Not so important but here's HTML section of it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="parallax.css">
</head>
<body>
<div class="img-1">
</div>
</body>
</html>
Your div is of 0 height - background-image doesn't give it any height.
I'm looking to start coding in Atom and I am having trouble getting things started. I can't seem to connect my style.scss to the index.html. This is my html code
<!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">
<link rel"stylesheet" type="text/css" href="style.min.css">
<title>Document</title>
</head>
<body>
<h1>This is a square</h1>
<div class="square"></div>
</body>
</html>
and this is what I have in my style.scss which when complied makes style.min.css
//Variables
$lightblue: #b8fdfb;
//CSS
.square {
width: 100px;
height: 100px;
background-color: $lightblue;
}
This is all that shows up in my local server
You cannot attach SASS to HTML. You first need to compile it first to CSS & then link it to your HTML using <link> tag in the header. Like:
<link rel="stylesheet/css" type="text/css" href="style.min.css" />
You need a preprocessor to convert SASS into CSS. You can use many tools such as Webpack, Prepros, etc.
Have a look at this reference. Hope this helps!