I'm a beginner programmer and have looked at several resources, but I can't figure out why location of a external css stylesheet matters. For example, changing the link to the file and the location of the file, respectively, will determine if a picture loads or not:
A simple line in the css:
body {
background: url(./images/test.jpg) center center fixed no-repeat;
}
This will load a picture:
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
This will not:
<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />
Why?
Its because there is no images folder inside your css folder. It's relative to the css file, not the html file.
You can fix it like so:
body {
background: url(../images/test.jpg) center center fixed no-repeat;
}
This goes up to the root directory first, then into the images folder.
Then you can use your css line:
<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />
The image location is relative to the CSS file's location, not the HTML file's location.
Related
How does one apply CSS design so that it runs in a website from a separate folder?
I wrote this to make some font red but it won't apply
<head>
//...
<link rel="stylesheet" href="css/style.css">
</head>
h1 {
color: red;
}
You should have a folder named css with a file called style.css , where the data inside that file will be h1
{ color: red; }
This should work, if u followed every step accordingly.
Given your original code:
<head>
//...
<link rel="stylesheet" href="css/style.css">
</head>
h1 {
color: red;
}
Your h1 style should be in the file "css/style.css", not in the html file.
Your link to the stylesheet href="css/style.css" is a relative link, so "style.css" must be in a subdirectory of the directory where the html file is, for example if this file is "index.html" and it is in a directory .../web/docs/index.html then style.css would have to be in .../web/docs/css/style.css
This would look like
<head> <!-- doc/index.html -->
<link rel="stylesheet" href="css/style.css">
</head>
/* doc/css/style.css */
h1 {
color: red;
}
I generally use either (1) absolute paths for stylesheets, so my link might look like href="/css/style.css" or (2) a stylesheet in the same directory with the html file, which would be href="style.css" -- but that's my preference, not a requirement.
this is the hmtl of the page and i m not seeing where s the error and the img doesn't show in notepad++.thanyou to answer me
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
</body>
</html>
/* this line doesn't show the img*/
body {
background-image: url("C:\Users\zineelabidine\Desktop\fayss.jpg");
}
For an img tag, you don't use a fixed path like C:\Users\zineelabidine\Desktop\fayss.jpg. Use a relative path like url('fayss.jpg'). (That path was assuming that the image and the html file are in the same folder)
Keep your Image and html file in same folder and use this code, Hope it helps you:
body {
background-image: url("fayss.jpg");
}
I am trying to change the width of arrows in a bootstrap carousel. I have worked out that I need to change the width of the carousel.scss. However this is an external library and the css that I have tried (below) doesn't work. I have looked at many examples but I don't know how to incorporate it into my work. I would really appreciate someones help, or even a link to another question that looks like this problem. Thanks
CSS
.modal-body {
padding:15px, 8%;
}
HTML
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Trip Guider</title>
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'
rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic'
rel='stylesheet' type='text/css'>
<!-- Plugin CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./css/creative.css" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
style.css is the custom css file
The easiest way to do this is to add a new stylesheet to your project called "CustomStyles.css". Add your override code to this stylesheet.
Provided you call your stylesheet as the last stylesheet on the page then the styles in "CustomStyles.css" should override the default bootstrap behaviour by default. If it still causes an issue it is possible to force your style to take precedence by marking it as !Important (shown below) but this shouldn't be necessary.
When loading your page after making this change be sure to reload the page emptying cache (ctrl f5) to make sure the original style isn't cached in your local browser.
.modal-body {
padding:15px, 8% !Important;
}
---- Result of chat conversation ------
In essence this solution works fine for overriding styles. In this instance though the wrong style was being overridden. The particular problem was resolved by inserting the following into the new stylesheet.
.carousel-control-prev {
left: -50px;
}
.carousel-control-next {
right: -50px;
}
I am taking a couple of classes about HTML and CSS but I am really having a difficult time understanding how to make a background image with external css. I am successful at external css in other ways, just not a background image.
This is my code for the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Forms</title>
<link rel="stylesheet" type="text/css" href="/CSS/forms.css">
</head>
<body>
<div id="Pictures"</div>
</body>
</html>
And this is my code for the CSS:
#Pictures {
background-image:url(../home/brian/Desktop/Becky.JPG);
}
I can get it to work using the <style> tag but not external CSS.
File structure is key. Where is your .html file located in relation to your .jpg file?
I suggest that you use another folder (call it 'assets' or 'images', something like that) to put your images into, instead of putting them on your Desktop.
So, in your case your file structure would look like this:
index.html
css/forms.css
assets/Becky.jpg
The path in your external css file would then be:
#Pictures {
background-image: url(../assets/Becky.jpg);
}
#pictures {
background: url("http://www.w3schools.com/cssref/img_flwr.gif");
background-size: 80px 60px;
background-repeat: no-repeat;
padding-top: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Forms</title>
<link rel="stylesheet" type="text/css" href="/home/red/Desktop/Web Projects/Test/style.css">
</head>
<body>
<div id="pictures"></div>
</body>
</html>
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