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
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?
How do I fix the encoding of my webpage. The webpage can be found at
cis.csuohio.edu/~daloucks/test.html
I'm doing this for a class and we are required to eliminate all the warnings. Once I add the meta tag I get stray tag errors. I was told to change the encoding in my editor to UTF-8 (I'm using notepad++), this added more errors. I used plain notepad and this also didn't solve the problem.
i.imgur.com/N6jjOfM.png These are the errors I am getting, after I changed test to text. I'm using a validator at https://validator.w3.org and that is giving me the warnings for the encoding of the document.
Change your document to look like this and then revalidate
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Test </title>
<style>
body{
background-color: #d0e4fe;
}
h1{
color: orange;
text-align: center;
}
p{
font-family: "Times New Roman";
font-size: 20px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
</body>
</html>
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.
For some crazy reason my body tag is not working at all. It is the only CSS that isn't working. I am trying to have a background behind the content of my website and have the content be about 80% of the body. So that I can have two bars on either side of my website which kind of acts as a border. Kind of how there seems to be two white bars on either side of stack overflow.
<style type="text/css">
body{
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #000;
margin: 0;
padding: 0;
color: #000;
}
#content {
font: 14px/1.4 'Times New Roman', sans-serif;
width: 80%;
max-width:1260px;
min-width: 780px;
background-color: #89837A;
margin-left: auto;
margin-right: auto;
}
Here is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<!--Replace link with good web font you want.<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' /> - See more at: http://www.newthinktank.com/2011/09/how-to-layout-a-website/#sthash.lWAaNgcS.dpuf -->
<link rel="stylesheet" type="text/css" href="CPLS_Stylesheet.css">
<!--<div class='error' style='display:none'>Event Created</div>-->
<title>MyWebsite</title>
</head>
<body>
<div id="content">
HEADER
<div id="contentBackground">
CONTENT
</div><!--End of contentBackground-->
</div> <!--End of content-->
</body>
</html>
No matter what color I change the body tag to the background always stays white. The content is the correct color.
Don't put style link at the top of the some other link. that's why body design is not working. Put style link under the all the link
Is this: <style type="text/css"> in your CSS or is that just a mistake?
Unless that's an accident when your wrote that code, that's not valid CSS. The only time that's allowed is using the style tags within a HTML document to wrap CSS code.
Okay:
index.html
<style>
body {
background-color: white;
}
</style>
Not okay:
style.css
<style>
body {
background-color: white;
}
Since there's no closing tag, it looks like you accidentally copied that from a tutorial using the <style> tag inside a HTML document.
If you are using some kind of CSS framework make sure you place your custom CSS files, at last, the same thing happened with me I adjusted the order of the files that I
was including and it worked fine.
I don't know the exact reason why this problem is occurring.
The same problem has been occurred to me. However, I tackled it by using !important after the property in body in CSS file.
e.g. body{ background:black !important;}
If you found the actual reason do share it with me.
I know this was asked long ago but here is one solution. Put your css file link as the last one in the part of your html.
I know this was asked long ago, but I have just had the exact same issue.
Add a fake element style in your stylesheet before the body.
e.g.
#myFakeElement { color:red ; }
body{
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #000;
margin: 0;
padding: 0;
color: #000;
}
Remove from the style sheet....
I just copied the code to my editor and it worked:
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