I really hope you can help me because I spent 2 days now looking for my mistake. I want to link an external css stylesheet into my html website but the website opens without css affecting it. I already validated both codes and checked spelling 1000 times, still not working. I tried with FF Chrome and IE:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset = "UTF-8"/>
<link rel="icon" type="image/png" href="bilder/favicon.png" />
<title>Die Hauskatze</title>
<link rel="stylesheet" href="css/stylesheet.css" type="text/css" />
</head>
Stylesheet:
#charset "UTF-8";
body{
background: url(bilder/background.jpg);
}
img {
border: 4px black;
}
your css file is probably is in another folder than your bilder folder. Be sure to specify this in the path.
If the css file is in a css folder for example, you need to go one folder up then in you bilder folder.
body{
background: url("../bilder/background.jpg");
}
for the border you need to specify the border 'style' (solid, dotted, etc)
border: 4px solid black;
https://www.w3schools.com/cssref/pr_border-style.asp
For starter you can try to add quotes to your URL here
body{
background: url(bilder/background.jpg);
}
change it to:
body{
background: url("bilder/background.jpg");
}
If that doesn't help it is quite likely that your path is wrong.
You can see it inside your developer console once the page is being loaded.
In case of wrong url you will get an error that the img file was not found.
Related
I was trying to upgrade a website that I made on Atom with css but my code isnt working. When I was trying to use the style tag, my code seemed to work as expected but as soon as I tried to use a link tag instead it went back to how it was before. I really want to fix the issue. Here is the code on my main page:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>☆My Test Site☆</title>
<link rel="stylesheet" href="css/styles.css">
</head>
Here is the code for a different file called styles.css:
body {
background-color: #FFE6E6;
}
hr {
border-style: none;
border-top-style: dotted;
border-color: grey;
border-width: 5px;
width: 5%;
}
Btw I have been double checking for over a day now so i dont think there is a problem with the file name.
I solved the problem. It turns out that my css folder wasnt on the same level as my other folder which had my main file in it!
I am looking for support editing stylesheet of my website
I have the below in the file main.css
.bg-danger, .bg-success {
padding: 0 5px;
}
a {
color: #EF1F2F;
text-decoration: none;
}
Then there is a header file header.php with the following code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><?=isset($title) ? $title : null;?></title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style/main.css">
</head>
<body>
My requirement is to change the background, font etc.
I am not familiar with working on stylesheets. Requesting support from other members.. Thanks in advance
Into your main.css file you can start with adding some minimum properties like :
body {
background-color: #yourHexCodeColor;
font-family: "Helvetica", sans-serif;
}
Then learn the very basics of css right here => https://learn.shayhowe.com/html-css/getting-to-know-css/
Unfortunately, you can't edit CSS code coming from an external source.
So what you have to do is to overwrite the styles you need to be changed in another stylesheet. In your case, it would be the main.css file.
So if there is a style in the bootstrap file that looks like this:
body {
background-color: #fff;
}
You can make a copy of that style in your own file (main.css) and change the value. So in your file, you have this:
body {
background-color: #f7f7fe;
}
I have an issue with the background-image property in an external CSS file. I can't seem to get the image to show up. Its been while since I have coded so maybe it's just me forgetting everything I know but I'm pretty sure I have the link right. The website is set up like this
/Root/
index.html
/styles/
webstyles.css
/img/
header.jpg
The background works when I use it inline so it's starting to annoy me.
HTML
<html>
<head>
<meta charset="UTF-8">
<title>MYSITE</title>
<link rel="stylesheet" type="text/css" href="/styles/webstyles.css">
</head>
<body>
<div class="headerBar">
<h1 class="Hlogo">Title</h1>
</div>
</body>
</html>
CSS
body
{
background:#999999;
}
headerBar
{
background: url(/styles/img/header.jpg);
}
Thanks for any help.
If this style is in webstyles.css, then you need to use this way.
.headerBar{
background: url('img/header.jpg');
}
Based on the folder structure, "styles/img/header.jpg" is still a wrong path.
And also, I'm not sure why, but you are missing . for CSS class selector when selecting the headerBar. Fix that one too.
You can use:
background: url("styles/img/header.jpg");
Replace
background: url(/styles/img/header.jpg);
with
background: url('img/header.jpg');
You can use:
.headerBar
{
background: url("styles/img/header.jpg");
}
since styles folder is the same level as your HTML file.
However, if your img folder is not placed inside styles folder (which makes more sense), then you want this path instead:
.headerBar
{
background: url('img/header.jpg');
}
Also you're missing . to target class .headerBar
everything in my style sheet will work apart from divs. Kinda strange. I created a test page to try and see why it won't work but no joy.
If I include the div in a tag at the top of the page it will work. Just not if I link the css file itself. I will put my code below.
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="boxed">
This should be in a box
</div>
And a clean stylesheet. With just the information for the div class.
#charset "utf-8";
/* CSS Document */
.boxed {
border: 1px solid green;
}
Hopefully, someone can point me in the right direction.
Instead of this, try just typing the full URL , so instead of "style.css" ,
type "http://yourWebsite.com/style.css" instead of "style.css"
<link type="text/css" rel="stylesheet" href="style.css" />
edit: also add type="text/css"
2nd edit:
you also need to have a title in your head, that is required. maybe it's causing this issue, maybe not
<head>
<title>This is my Title! </title>
</head>
Try this in your Style.css file:
.boxed {
border: 1px solid #008000;
display: inline;
}
check to see if you haven't misplaced any '}' or semi columns and i don't think you need the
#charset "utf-8" in your stylesheet since you already specified it in your head
I am very new to css so this maybe a simple answer. I have 2 scenarios and 1 works the other doesn't. I hope someone can help me out.
WORKS:
<head>
<style type="text/css">
body {
background-image:url('views/default/images/home.jpg');
;}
</style>
</head>
DOESN'T WORK:
<head>
<link rel="stylesheet" type="text/css" href="views/default/home_style.css" />
</head>
In home_style.css>
body{
background-image:url('views/default/images/home.jpg');
margin-top: 0px !important;
padding-top: 0px !important;
}
It looks like your CSS file is in the views/default/ folder, while the image is in the views/default/images/ folder.
Define image paths in your CSS relative to the CSS file, not the HTML file that displays everything:
background-image:url('images/home.jpg');
In my case:
I had a CSS folder. So, inside my CSS folder I had my style.css so I was typing inside my style.css the following:
background: url('img/mybgimg.jpg')
instead of
background: url('../img/mybgimg.jpg')
...I hope this can help to anyone who is having the same issue.