A ridiculously simple bit of web coding is failing to work for me, and for the life of me I can't figure out what I'm doing wrong.
This is my HTML file:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Experiment</title>
<link rel="stylesheet/css" type="text/css" href="/team/css/style.css">
</head>
<body>
<div id="user_box">
<p>Hi. Whassup?</p>
</div>
</body>
</html>
And this is the CSS file it's linking to:
#user_box {
position: fixed;
left: 10px;
top: 10px;
padding: 5px;
z-index: 100;
height: 40em;
width: 16em;
background-color: white;
border: solid black;
}
It doesn't work. The CSS formatting is ignored entirely. However, when I copy the content of #user_box into a style= tag, it works exactly the way I think it should.
I'm confirming that the CSS file is where it should be and the browser can see it; when I view the source, I can click that link, and it downloads just fine.
I suspect I'm missing something obvious/stupid, but I'm failing to figure out what it is. I beg you, point out my stupid and get a shiny shiny check mark.
The correct rel for a stylesheet is simply stylesheet, not stylesheet/css. Remove that /css and all should be fine.
Try removing the rel="stylesheet/css".
Change the tag to have:
rel="stylesheet"
i.e.
<link rel="stylesheet" type="text/css" href="/team/css/style.css">
Make sure that team is a root folder in your web directory and that it has a subdirectory of css with a style.css file
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 trying to add a background color to my header but it's not adding it when i have it written in the css file.
HTML Code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="CSSPage.css">
</head>
<!--
<style media="screen">
#background-color {
background-color: hsl(120, 1%, 79%);
padding-top: 20px;
padding-bottom: 20px;
}
</style>
-->
<header id="background-color">
<hr>
<p>Sample</p>
<hr>
</header>
</html>
CSS Code: CSSPage.css
#background-color {
background-color: hsl(120, 1%, 79%);
padding-top: 20px;
padding-bottom: 20px;
}
It only works when it's on HTML but not when it's on the css file.
I've also tried adding !important but it didn't do anything.
The rest of the styles for other id works except this one.
Just change style class(#background-color{...}) as well as id to some other name if possible (other than background-color) and try.
I'm an idiot. Apparently the CSS file doesn't get applied even if you add new things to it if you don't manually save. I'm sorry for wasting everyone's time. It works now. Thank you for pointing me into JsFiddle's direction. Since it worked perfectly there.
I know it's been asked and I've compared my code to what others have posted but I haven't had any luck fixing it!
My assignment requires that I use XHTML and external style CSS.The HTML works but the CSS is not being applied to the webpage. I've tried changing the DocType. Both documents are in the same folder.
This is what I have...
HTML (index.html)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Homepage</title>
<link rel="stylesheet"
type="text/css"
href="style.css" />
</head>
<!-- etc... -->
CSS (style.css)
body {
background-color: #EEE;
font-family: Helvetica, Arial, sans-serif;
}
h1, h2, h3 {
margin: 0;
}
a {
text-decoration: none;
color: #000;
}
#container {
background-color: #FFFFFF;
width: 800px;
margin-left: auto;
margin-right: auto;
}
/* etc... */
I finally decided to retype the whole head and it solved the problem. So I'm assuming the problem was invisible characters in the the link tag. This must have happened when I switched from textEdit to Sublime. Thanks for trying to help.
This part <?xml version="1.0" encoding="UTF-8"?> is making your file an xml file. Just erase that.
This link is pointing to a style.css in the same folder that your html is
<link rel="stylesheet" type="text/css" href="style.css" />
You will need to make sure that your file is there.
Your link must have media declared. Like this specification
Well...as pointed by the guy in the comments, sorry guy, i'm new at this. You could try some standard headers http://www.w3.org/QA/2002/04/valid-dtd-list.html
i'm running some basic beginner tutorials in order to learn how to properly run html. I've come to the portion where i'm using a div tag in css to center the content. However, once i open the test page, everything stays locked to the right of the browser. I've been scouring the forums for any solution and nothing seems to fix the issue. Tested in Chrome and IE.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My First Website</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>
<h1> My Website </h1>
<p>Learn more about me.</p>
<img src="img/lady.jpg" alt="skyrim">
<h2>My New Section </h2>
</div>
</body>
</html>
Here's the CSS:
a {
color: red;
text-decoration: none;
}
h1 {
font-family: sans-serif;
}
div {
width: 500px;
margin: 0 auto;
background: red;
text-align: center;
}
You have no Doctype. This puts you in Quirks mode (the land of incompatibility).
Add one as the very first thing in your document.
<!DOCTYPE html>
It looks fine in my end:
http://jsfiddle.net/Riskbreaker/JH7NK/
If you mean that extra space you have vertically on top its your h1.
I edited to show you:
div h1 {margin: 0}
You need to add a DOCTYPE. This is an example of the HTML5 DOCTYPE
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
HTML here
</body>
</html>
I'm creating a webpage and I began using the style tag at the top:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Front Page</title>
<link rel="stylesheet" type="text/css" href="CSS/Styles.css" />
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
I want all my graphics design to be in my Styles.css but for some reason, it just doesn't work. When I add something like:
div.box {
margin:0 auto;
width:500px;
background:#222;
position:relative;
left: 50px;
top: -200px;
height: 100%;
border:1px solid #262626;
padding: 0 5px 5px 0;
}
To design this element:
<div class="box"></div>
It works when I put it in the tag, above the document, but not if I put it in the CSS file. It wasn't a problem before but now I've been adding everything to the style tag and it's getting really long (150 lines!). I want to move it all to the css file so my main page has less to scroll through. But I don't understand why the graphical changes just won't apply if put in the CSS file. Any ideas?
If your CSS file's path is alright, there are several things that may have happened:
It's possible that you simply need to clear your cache. CTRL+F5 usually does the trick. New users coming to your site won't need to do that.
It's possible that you've had a typo, or forgot to close a statement above with ;, check for that.
It's possible that this is a specificity issue, i.e. another rule, more specific is overriding your rules. Read about it here.
Are you on a case-sensitive file system (Linux)? Your path to CSS/Styles.css needs to be exactly right. Also, it is relative to the page and <basepath/>. Try using an absolute URL to rule out a path issue.
If you don't have a path issue, then you might have accidentally made a typo in the CSS file somewhere, causing your rule to be missed.
If your CSS file is good, then perhaps your browser has an old version cached. Have you tried clearing your cache?