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.
Related
I have a Next.JS site that sometimes needs to be accessed by a backend process to generate a PDF of the contents on the page. The problem is, when generating the PDF, I only have access to the HTML of the page (i.e., links out to external stylesheets do not work). To work around this limitation, I would like to put the page's stylesheets directly in <style> tags in the page's <head>. For example, the following code
pages/test-page.tsx:
import TestPageStyles from '../styles/TestPage.module.css';
const TestPage = () => {
return <div className={TestPageStyles.example}>Example styled element</div>;
};
export default TestPage;
styles/TestPage.module.css:
.example {
color: white;
background-color: red;
text-decoration: underline;
padding: 10px;
margin: 100px;
text-align: center;
}
Produces (approximately), the following HTML:
<html lang="en">
<head>
...
<link
rel="preload"
href="/_next/static/css/66df4145b26ca3d2.css"
as="style"
/>
<link
rel="stylesheet"
href="/_next/static/css/66df4145b26ca3d2.css"
data-n-p=""
/>
...
</head>
<body>
<div id="__next">
<div class="TestPage_example__JxNEo">Example styled element</div>
</div>
</body>
</html>
where .TestPage_example__JxNEo is in /_next/static/css/66df4145b26ca3d2.css
Instead of the <link>s in the head, I'd like to have something like this:
<head>
<style rel="stylesheet">
.TestPage_example__JxNEo {
color: white;
...
}
</style>
<head>
I understand that this is less efficient than the built-in way Next is doing things but this is unfortunately a hard requirement for my project. Is there any way to achieve this using idiomatic Next?
I'm relatively new to this but as far as I can tell from my research, this should be working. I'm trying to link a css stylesheet to an .erb file. Here is the code I'm using:
<link rel="stylesheet" type="text/css" href="../css/stylesheet.css">
I've also tried
href="./css/stylesheet.css"
and
href="css/stylesheet.css"
for reference my erb file and css file both sit in different subdirectorys of the same main directory. Here is the code contained within my stylesheet, just in case this is the problem:
body {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
background-color:powderblue;
}
h1 {
font-family: verdana;
}
h2 {
font-family: sans-serif;
}
With a server.rb like
require 'sinatra'
set :public_folder, __dir__ + '/static'
get '/' do
erb :index
end
A views/index.erb like
<link rel="stylesheet" type="text/css" href="/css/stylesheet.css">
Hi!
And your stylesheet in static/css/stylesheet.css it should work, the important bit you may be missing is setting the public folder.
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.
index.html file contains this
<link href="style.css" type="text/css" rel="stylesheet"> <link>
<nav class="header">
<img src="/Users/DeMarcus/Desktop/DevProjects/Websites/CodeCademy/p.4 Datsomo/Resources/images/pattern.jpg" alt="">
<h1>Dasmoto's Arts & Crafts</h1>
i Have this link which I'm using to connect my html file to my css file. Its just that when i load my page it appears without any css.
I know I've written my css correctly and used classes to identify my div containers. Can anyone help me with what I'm doing wrong here?
css file contains this
header{
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;`.
}
try this :
<link href="./style.css" type="text/css" rel="stylesheet">
By adding ./ before style.css, you are explicitly telling the browser that your file is in the same folder.
Also, check the case of the css file. I can see that in the img src you have used capital characters and spaces. Try to avoid spaces and capitals in file names as servers are usually case sensitive.
First check if the css is getting loaded.
To check this right click on the page -> view page source. Click the link in the href attribute to see if you get your css file.
If you can see your css file you probably have a syntax error in your css file.
If you can't see your css file, you need to change the link to your css file.
To link to your css file use this syntax:
<link rel="stylesheet" type="text/css" href="style.css">
It also seems you need to change the code in your css file to something like this:
.header {
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
}
Note I added a . before the header, since it is a class.
Another note: you should close your <nav> tag.
I have the following in the .css file when the application is not running:
#tabsuseradmin .ui-tabs-panel {
height: 500px;
overflow: auto;
margin-right: 10px;
}
But during runtime, in the browser developer, the same styling comes as:
#tabsuseradmin .ui-tabs-panel {
height: 900px;
overflow: auto;
margin-right: 10px;
}
I searched "900px" in my entire Visual Studio project, and did not see it anywhere for a height attribute. I am stuck on this and don't know what is happening to cause this to become 900px. What should I do?
Load order of my CSS files:
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<link href="/Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="/content/themes/base/jquery-ui.css" type="text/css" rel="stylesheet">
<link href="/content/docsupport/style.css" type="text/css" rel="stylesheet">
<link href="/content/uielements.css" type="text/css" rel="stylesheet">
<link href="/content/headerfooter.css" type="text/css" rel="stylesheet">
The uielements.css contains the styling in question, and the headerfooter.css doesn't contain anything that overwrites in the css above it (I tested by removing it entirely).
Thank you.
Load your css files inside of your head tag, after the loading of the files create a style tag with the rules that you want to take precedence immediately after the css file loading. This will allow your rule to overwrite preexisting rules set in the css library files.