I am trying to use an external CSS file to style my web page, here's a snippet:
body {
background-color: rebeccapurple;
color:yellow;
font-size:125%;
border: 3px yellow;
}
.menu {
height: 800px;
float:right;
}
...
Here is how I call the CSS file in my head tag:
<link rel="stylesheet" type="text/css" href= "{{ url_for('static',filename='style.css') }}">
The weird thing is that everything else in my style.css works fine and displays as I want. It's just the body tag that doesn't show correctly. I am really lost.
There is no other HTML files, nor other CSS files. I encountered this problem really early on in my process which is all the more confusing.
Related
enter image description hereBelow my code runs fine, but when I preview the html file in browser, none of the styling shows up. When I inspect the element in Chrome dev tools, it shows that it is still trying to just access "style.css" instead of the path I wrote in. I cleared browser cache, I closed and reopened the page, refreshed it, saved the file and closed IDE, etc. What am I doing wrong?
body {
background: -webkit-linear-gradient(-45deg,#FFFED4,#FFEEFF)
}
h1, p, h3{
font-family: Arial;
color: black;
}
h1 {
font-size: 60px;
text-align: center;
}
p {
font-size: 25px;
text-align: center;
}
img {
display: block;
margin-left:auto;
margin-right: auto;
width: 50%;
}
h3 {
font-size: 25px;
font-family: Helvetica;
position: relative;
bottom: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>We Apologize</title>
<link rel="stylesheet" type="text/css" href="./resources/css/style.css">
<link rel="icon" type="image/gif/png" href="./resources/img/Brighton-McFarlane13.png">
</head>
<body>
<main>
<h1>We apologize</h1>
<p>The site is under construction right now, but we are doing our best to bring it to life! Check back in a few weeks to see the final product!</p>
<img src="https://i.imgur.com/YjMR0E6.jpg">
</main>
<article>
<p>Soon this site will be a portfolio, shop, and forum for the Brighton McFarlane YouTube Channel!</p>
<img src=./resources/img/Brighton-McFarlane12.png>
<h3>Thanks for stopping by!</h3>
</article>
</body>
<html>
sounds like an issue with your relative path. I cannot see how your file directory is set up but try href="resources/css/style.css"
if it still doesn't work you need to move up a folder.
href="../resources/css/style.css"
hope this helps!
Well turns out I'm an idiot and updated the file path of the html file and Atom didn't automatically update where the file was located, it created some sort of imaginary copy of it. I saved the file to the proper folder and it is working now.
If the resources folder is in the root of your site/folder structure, remove the . before the slash.
<link rel="stylesheet" type="text/css" href="/resources/css/style.css">
What does "./" (dot slash) refer to in terms of an HTML file path location?
/ means the root of the site;
./ means the current directory;
../ means the parent of the current directory.
At first, the problem seemed to be that only my CSS file, which was linked into my HTML document, wasn't loading in the browser when opened, but then when integrating an image into the HTML document I found it also wasn't appearing in the browser when the document was opened (and I used Microsoft Edge, Chrome, and Firefox to open the document. All files are located in the same folder on my computer, and yet using relative paths to locate the files also seem to be doing nothing. The code looks as such. (Worth noting that I was messing around with both the background-image property in CSS and the tag in HTML to load the same file since neither seemed to work)
HTML Code:
<head>
<title>Quad Game Schedule</title>
<link type="stylesheet" rel="text/css" href="displaylayout.css">
</head>
<body>
<div class="fieldimg">
<img src="field.png" alt="Field Overhead Image">
</div>
<div class="F1">
<h2>Full Field Games</h2>
<ul>
<li>12:00 - TSPro vs Wings</li>
<li>12:45 - Team Evanston vs Bosnia</li>
</ul>
</div>
CSS Code (displaylayout.css):
body {
background-color: rgb(242, 242, 242);
color: red;
}
p {
color: red;
}
img {
align-self: center;
vertical-align: top;
}
.fieldimg {
height: 30%;
width: 45%;
background-image: image(field.png);
background-size: cover;
}
.F1 {
align-self: center;
float: left;
clear: none;
width: auto;
}
In the browser developer side bar, it says that there are no style properties for the webpage, which can't be true. I can always write the CSS into the HTML document, but the image is also an integral part of the end product and that won't load either. (Also maybe worth noting, with text-color for the p element and body used in CSS was merely for testing purposes)
Edit: this is the exact code for the test files I made that still don't work.
HTML:
<html>
<head>
<title>Test Webpage</title>
<link type="stylesheet" rel="text/css" href="test.css">
</head>
<body>
<h1>This is a test heading</h1>
<p>This is a test paragraph</p>
<img src="test.png" alt="Test Picture">
</body>
</html>
CSS:
h1 {
color: red;
font-size: 24pt;
}
p {
color: blue;
font-size: 12pt;
}
The image in the new folder for these test files was renamed as test.png.
Edit 2: I just found out that older files of mine that linked to external files still work, so the problem lies with the new files I make.
In your code you are trying to load the image twice, once as a background image for the div with class fieldimg, and once inside it in an ` tag:
<div class="fieldimg">
<img src="field.png" alt="Field Overhead Image">
</div>
.fieldimg {
height: 30%;
width: 45%;
background-image: image(field.png);
background-size: cover;
}
1.) The background image needs to have be defined like background-image: url(field.png), not like you did it ("image(field.png)")
2.) The height setting for .fieldimg (30%) won't work, because there is no container around it that has a height setting to which the 30% could relate. So this becomes 0px high and therefore won't be visible. To avoid this you can apply height: 100% to the body
If you fix both, you'll have to erase either the background image or the image tag, otherwise you'll get your image twice...
Your CSS contains an error that might be the cause:
.fieldimg {
height: 300px; /* set an absolute amount of pixels here instead of a relative number (which is relative to nothing) */
width: 45%;
background-image: url('field.png'); /* this is how you place images by setting a background image */
background-size: cover;
}
Reference
Also, remember that when not using relative paths in your CSS it is relative to the location of the .css file! So if using an image as a background image in a specific CSS folder, be sure the image is relative to that CSS file location.
I have this very simple file index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>We're learning selectors!</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1 id="yay">Yay</h1>
<body>
</html>
While the stylesheet is style.css
h1 {
.color: blue;
.font-style: italic;
}
Both the files are in same directory but still it doesnt work. Tried all browsers. But when I open dev-tools in chrome , i can change the color to blue shade under the "style-section"
h1 {
color: rgb(0, 15, 173);
}
But then why isnt the style.css getting loaded, while Im using the same correct code as above.
Already referred to CSS not working in stylesheet didnt help either
Just remove the "." from your style style.css ie
h1 {
color: blue;
font-style: italic;
}
You are defining css attributes as class names.
Ur code:
h1 {
.color: blue;
.font-style: italic;
}
How it should be:
h1{
color:blue;
font-style: italic;
}
The dott, which you used infront of the css attributes does just get used with classnames. For example:
Html:
<div class="ClassName"></div>
<div id="ClassName"></div>
CSS:
.ClassName{
font-size:12px;
}
#ClassName{
font-size:12px;
}
<!-- #className = div id -->
<!-- .className = div class -->
I'll give a tip how to divide and conquer problems like this:
First, you need to validate if the script is loaded at all. Trust me, if you're gonna do JavaScript, you'll need to narrow down your possible errors. A great tool for narrowing down could be Chrome's developer-tap, and check the console. It will tell, if a file was not loaded (if the path was incorrect or alike).
Second, validate your CSS! If you know the stylesheet is loaded, validate if the CSS is typed correctly. You could use a tool like CSSlint.
And.. That's about it - now you know that you're CSS is loaded AND that it's typed correctly. Displayed correctly is a whole other concern which I won't touch upon here.
I want to use an external .CSS file.
When I load a page in chrome I see only the Html part. The CSS part seems to be ignored.
So I go to inspect element and look at the sources tab an there are 2 files. When I open the html and CSS file it looks nice. But the page is still not rendered the way it should be.
Only when a edit something in the CSS file,the page gets re-rendered and everything looks fine.
When I save the html and css file together in a local folder and open the html in a browser everything looks fine too.
this is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>server</title>
<link href="server.css" rel="Stylesheet" type="text/css">
</head>
<body>
<ul class="navbar">
<li class="navbar">Assignment</li>
<li class="navbar">Solution</li>
<li class="navbar">Logout</li>
</ul>
<H1>server</H1>
</body>
</html>
And this is server.css file:
body {background-color: #efefef;}
ul.navbar {
margin: 0;
padding: 5px;
list-style-type: none;
text-align: center;
background-color: #000;
}
ul.navbar li.navbar {
display: inline;
}
ul.navbar li.navbar a.navbar {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #000;
}
ul.navbar li.navbar a:hover {
color: #000;
background-color: #fff;
}
I tried searching for tornado CSS external files and found tips on using a static directory but while both files do show up as source in the element inspection I do not think anything is wrong with the tornado script.
Edit -- I set aside my stubbornness and tried the "static" approach. This works fine. So I guess that writing out a .css file is different from delivering a static .css file. There seems to be some HTML interpretation going on but I would still like to here what goes wrong and why. -- tidE
These are the handlers I use:
class CSSHandler(BaseHandler):
#tornado.web.authenticated
def get(self):
self.write(file("html/server.css").read())
class MainHandler(BaseHandler):
#tornado.web.authenticated
def get(self):
self.render('html/assignment.html', title="server")
But again this part works. I can GET /assignment and I can GET /server.css. When I include the css part in a style tag inside the header of the html file everything works fine too. But this is not what I want to do. I want to provide some basic css stuff in one file for several html pages.
You need to set an appropriate content-type header for all non-html pages. self.set_header('Content-Type', 'text/css').
Also consider using StaticFileHandler (just set the static_path keyword argument to the Application constructor) instead of serving static js/css files yourself. It will take care of the content-type and other headers for you and improve cacheability.
So I'm kind of a programming noob, but I thought I had CSS referencing down...apparently not. I've referenced stylesheets, I've done it externally, internally, you know, the works. For some reason, however, when I went back to tweak an older app I had worked on that had the CSS initially included within the HTML and moved the CSS out, then referenced it, the CSS oddly stopped working altogether. I've got the directory set up as follows:
App name (folder)
static (folder)
main.css
templates (folder)
template_referencing_css.html
main.py
app.yaml
So here are the various references I've tried with main.css being inside the static folder:
<link type="text/css" rel="stylesheet" href="../static/main.css" />
<link type="text/css" rel="stylesheet" href="/static/main.css" />
Here is what I tried when I moved main.css to templates folder with the template referencing it:
<link type="text/css" rel="stylesheet" href="main.css" />
The css file is just a longer version of things like:
body {
font-family:sans-serif;
width: 850px;
background-color: #F0F8FF;
color: #008B8B;
margin: 0 auto;
padding: 10px;
}
.error {
color: red;
}
label {
display: block;
font-size: 20px;
}
remove the leading slash -
<link type="text/css" rel="stylesheet" href="static/main.css" />
In general this isn't necessarily a good idea, but try to use the full absolute path (like "C:/Whatever/another_dir/main.css"). At least this will tell you if the problem is finding the css file or not.