Could anyone tell me why my stylesheet wont link to my html text? I feel like I've tried everything under the sun and am now just staring at it blankly. It's probably something insanely obvious.
h2 {
font-family: sans-serif;
text-align: center;
color: blue;
}
p {
font-family: sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Konrad Zuse </title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" />
</head>
<h2> Konrad Zuse </h2>
<p> Konrad Zuse was a German computer scientist who is responsible for creating the worlds first programmable computer. </p>
<p> He also designed the first high-level programming language, Plankakül. </p>
<p> Born on the 22<sup>nd</sup> of June 1910 in Berlin his family moved to Braunsberg, now know as Braniewo, Poland. His father worked as a postal clerk whilst Zuse attended Collegium Hosianum. Zuse passed his Abitur in 1928, meaning he could go on to study at university. Attending the Technische Hochschule Berlin, now Technical University of Berlin, Zuse studied engineering and architecture both of which he found tedious. He began a path down civil engineering and graduated in 1935. Once graduated Zuse began work at the Henschel aircraft factory in Berlin. He was made to calculate routine maths by hand and started to think up a machine that would do his calculations for him. </p>
Here are some tips.
When you load page right click on page and go to Inspect element. Then go to Network tab, click on CSS checkbox and refresh page. It will display css that it tries to load. If name of file there is white then CSS is loaded. If it is not then it might be path problem. It would be cool if you could post image of Network tab from console
Also. You are missing <body></body> and closing </html> tag. Take care of that first
In order for your css to be linked to your HTML file, you need to have the proper path. If you link your css file as stylesheet.css then you will need both your files in the same folder (as shown below)
If you want instead to use a css file that is not with your html file, you would need to start your path from your html file. For example, if you have your index.html in a parent folder and your stylesheet.css in a child folder, your path would be href="/resources/stylesheet.css" (as shown below)
Lastly, if your stylesheet.css would be in the parent folder, then you would need to go up with .. that means go back to parent folder. Your path would be href="../stylesheet.css" your html file still being the starting point.
Related
My CSS file will not work and I have tried everything. They are both in the same "templates" directory in the app titled "bake".
Using a simple example that doesn't work, here's my HTML head and the code I'm trying to change:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta charset="UTF-8">
<title>DataBake</title>
</head>
<body>
<th style="text-align:right"> <h5 id="green">Username:</h5></th>
<p id="test">If you're new to DataBake please register here.</p>
</body>
Here is my CSS file:
#charset "UTF-8";
#green{
color: green;
}
h5{
color: green;
}
#test{
color: red;
}
The CSS works when neither the HTML nor the CSS are in directories and they are the only two files I'm working with. But other than that, I have putting the css file in a separate directory. I have tried changing the link to the 'style.css' to using relative and absolute paths.
When I follow the link from the HTML , it takes me right to the CSS file. When I load the css file independently, it loads fine.
Both files are encoded to UTF-8.
I have cleared my cache and history and reloaded countless times.
I have moved the order between it and my bootstrap link around.
I have used different browsers.
I have checked for typos or little mistakes.
My coding teacher couldn't figure it out either.
Can someone help me figure out why it is not working?
UPDATE
When I put the absolute path into my browser, it works perfectly, but the relative path through my localhost turns up a 404 error for the css stylesheet.
FOUND THE ANSWER
I needed to incorporate {% load static %} into the header, and turn the href of the stylesheet link to "{% static 'css/style.css' %}". Couldn't be happier to finally have this solved.
First of all: There are many things that in my opinion could have been written better when drafting this question.
It's very difficult to help you with your problem when there's so little shared. You should at least share some code where you're actually using the styling. Time to time there's just some typos you end up missing and extra pair of eyes might pick them up.
The one thing that comes to mind that you could try is adding space between the css selector and the bracket. So not #green{ but rather #green {.
I'm suggesting this just because few months ago I agonized with some styles that did not show up in my React project where I was using css-modules. It took embarrassingly long time until I noticed that the class giving me grief was written without the space before bracket and it just didn't compile correctly.
try and remove bootstrap (or add it before you include your file). What kind of server are you using ? maybe it is serving your css file as TXT/html (look at it on the server response, which would mean your browser may not accept it as a stylesheet)
You have to put 1 more dot before ./
I hope it would work.
<link rel="stylesheet" type="text/css" href="../style.css">
EDIT: I never said that the problem was the dot anyway. The OP should share the entire CSS file together with more information so we could help find the answer.
I've never seen a reference to a path using a dot like:
<link rel="stylesheet" type="text/css" href="./style.css">
You should ask yourself if the file is in the same directory as the file referencing it? above? below?
Starting with “/” returns to the root directory and starts there
Starting with “../” moves one directory backwards and starts there
Starting with “../../” moves two directories backwards and starts there
Other than that, is difficult to understand the issue without more details, many things can cause this problem.
I created a webpage in the Vs code. Then I choose a font from google-font and embedded its link in the head tag of HTML. Then added font family in CSS. It worked properly. As I was testing the webpage in a live sever extension. I noticed whenever I write a single character in CSS, the page shakes a lot. When I stop writing code, shaking stops. During shaking Font becomes bigger, smaller, darker e.t.c without reason although I did nothing abut font .what is the problem behind this? How to stop this shaking?
body{
font-family: 'Girassol', cursive;
font-size:25px;
}
<!DOCTYPE html>
<html>
<head>
<title>Dropdown Menu design</title>
<link
href="https://fonts.googleapis.com/css2?family=Girassol&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="indexstyle.css" />
<script src="try.js"></script>
</head>
<body>
<p>
The University was established as compensation for the annulment of the
1905 Partition of Bengal. The partition had established East Bengal and
Assam as a separate province, with Dhaka as its capital. However, the
partition was abolished in 1911. In 1913, public opinion was solicited
before the university scheme was given its final shape, and the Secretary
of State approved it in December 1913.[1] The first vice-chancellor of the
university was Philip Joseph Hartog, who had been academic registrar of
the University of London for 17 years.[
</p>
</body>
</html>
Thanks for your answer. I just solved my problem using a method. As I was using vs code. I set up an autosave option. The autosave delay option was set to 100 milliseconds. When I converted it to 1000 milliseconds, it worked without shaking the page.
It's probably because as you type your CSS, it becomes temporarily invalid until you finish the rule you're typing. Since you're using a live preview extension, while the CSS is invalid, the rules aren't applied, so you will see changes to your pages appearance.
"This won't transfer to the FileZilla correctly from Notepad++ the images won't show? I asked the teacher for help, but he doesn't know the material well enough to trouble shoot the problem. Internet Explorer will run the module and the text runs just fine, but Google Chrome say Error 2, and FileZilla won't register the pictures, they only show as black box icons, pls help"
<html>
<head>
<img src="images/images12.jpg" style="padding:6px" align="center" height="400px" width="400px">
<style>
#this is the set up for the text body {
font-family: Papyrus, fantsy;
text-align: center;
}
h1 {
font-family: Papyrus, fantsy;
text-align: center;
}
h2 {
font-family: Papyrus, fantsy;
text-align: center;
}
</style>
header for the home page
<title> Woody's Wondering's</title>
<header>
<h1>Which way did Woody Go?</h1>
</header>
<nav>
<b>
Home
Places To Go
Whats Free
<br>
<br>
Kids....Cheap easy Fun!
<br>
Adults Only
</b>
</nav>
<main>
<h2>You Next Adventure is only a click away!!!</h2>
<p>Welcome to Woody's Wonderings were everything is cheep and easy to find in Ohio.....How Cheap, well pracically 20 dollars to free. </p>
<h2>Meeting all your fun fun needs!!!</h2>
<p>Keeping the site updated with new and improved places & Events year around
</p>
</main>
<footer>
<small><i>
Jessica Harper</i></small>
</footer>
</body>
</html>
Your image is in the head of the html document. Correct structure for html is,
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Template</title>
<!–– Style sheets & other importations go here ––>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!–– Your content goes here ––>
<!–– Javascript files go here ––>
<script src="js/scripts.js"></script>
</body>
</html>
From w3schools,
The element is a container for metadata (data about data) and
is placed between the tag and the tag.
HTML metadata is data about the HTML document. Metadata is not
displayed.
Metadata typically define the document title, character set, styles,
links, scripts, and other meta information.
But I tested myself, and the images do work if the image exists in the path. Please check the image exists in the location you have in the img tag.
I am assuming you have uploaded the images along with the html file. If not please upload the images through filezilla to the correct location.
The best way to find what is the issue is to check the browser console. You may find an error saying no image found in path/to/your/image and that is where you have to put your image!
Your HTML is malformed and does not have an opening <body> tag, which could be causing some issues. I'd recommend using the W3C HTML Validator to validate your code.
Errors like this are easier to visually spot if you use some sort of code-formatting/"pretty-print" tool (I like this one).
Notepad++ probably has a plugin for this as well.
I am having trouble getting my HTML code to link to my CSS code once I FTP it onto the server. Both CSS File and HTML File are in the same directory on the server. I would like to note that I have attempted to clear the browsers cache and use a different browser and nothing seems to be working.
Here is my HTML code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<base href="http://people.rit.edu/~username/rop/" target="_blank">
<title> My ROP Home Page </title>
<link href= "style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class = "things">
<h1> All About Me </h2>
<div id = "activities">
<h2> I'm a fan of video games </h2>
<p> As the title suggests, I love to play video games. I have been playing video games since I was 8 years old. I started with a Nintendo 64 and have since then begged my parents for every new system to date (obviously that wont work anymore).
This hobby is part of the reason I wish to become a web developer. When I was young, I spent time browising websites like IGN, and thought that one day I could make something like that. Now I set my sights a little higher, seeing as I want to be able to develope professional websites.
</p>
<h2> My Favorite Food is Pizza ( I Can't get enough!) </h2>
<p> Seriously, I could have Pizza everyday of the week and not get sick of it. I like all kinds of toppings except pineapple. I must have pizza at least once a week no matter how unhealthy that may be. Of course, local buisnesses make better pizza then large chains.
</p>
<h2> I am a SOIS student focusing on Web Development and other IT centered courses</h2>
<p> SOIS is the School of Individualized Study. Basically I create a major that is more in line with what I want to get out of R.I.T. Students of SOIS must pick two specializations in order to create a degree. Other than that, it is just like other degrees at R.I.T with many of the same requirments.
For example, I specialize in Web Development (front-end) and some networking.
</p>
<h2> I'm a Big Fan of cheesey monster movies </h2>
<p> For reasons unknown, I have been drawn to old Godzilla movies that clearly have not aged well. I think it's neat to see how they made those films without cgi or technology. Seeing the behind the scenes of the mini cities is always a neat experience for film fans.
</p>
</div>
</div>
<div id = "brian">
<img src ="brian.jpg" alt="brian" style="width:304px;height:228px;">
</div>
</body>
</html>
CSS code
h1, h2, p{
background-color: #100733;
}
title {
font-family: Helvetica, Arial, sans-serif;
text-align: center;
text-transform: uppercase;
}
.things {
color: white;
font-size: 18px;
}
#brian {
float: right;
}
#activities {
font-size: 18px;
text-align: left;
}
p {
background-color: #100733;
color: white;
}
Any help would be greatly appreciated.
Didn't you forget about the opening < in the first line (Doctype)?
Make it <!DOCTYPE html> and be sure that your style.css file is in the same directory as your index file.
EDIT:
Not Found
The requested URL /~username/rop/ was not found on this server.
Apache Server at people.rit.edu Port 443
So it does not work because of the base tag. Are you sure that the provided location works? When I open https://people.rit.edu/~username/rop/ it gives 443.
EDIT 2:
Change:
<base href="http://people.rit.edu/~bxa9985/rop/" target="_blank">
To:
<base href="https://people.rit.edu/~bxa9985/rop/" target="_blank">
First of all
Make sure that you can access the css file using the browser.
If your url is, say example.com, and you access your html file like this example.com/index.html, then be sure that you can actually see the css if you enter example.com/style.css
It may be that you haven't set the permissions right in the server if you uploaded the files through ftp.
Then other considerations
Make sure that you have the first opening character <
See this
!DOCTYPE HTML>
should be like this
<!DOCTYPE HTML>
Take out spaces after and before equal sign (=)
this
<link href= "style.css" type="text/css" rel="stylesheet">
should be like this
<link href="style.css" type="text/css" rel="stylesheet">
My html and css won't link the css is suppose to make the Hayes and Ash words red on the header. My code:
<!DOCTYPE html>
<html style="background-color:#FFA100;>
<head>
<link rel="stylesheet" type="text/css" href="C:\Documents and Settings\Test.DOBRUSKY\Desktop\stylesheet.css"/>
<title>Hayes and Ash</title>
</head>
<body>
<h1>Hayes and Ash<h1>
<div id="hayes">
<img src="http://i.imgur.com/xXSDVAm.jpg?1"/>
<p>I am Hayes harharhar</p>
</div>
<div id="ash">
<img src="http://i.imgur.com/zcBLpU6.jpg?1"/>
<p>This is Ash I am very fluffy!</p>
</div>
</body>
</html>
The href link:
href="C:\Documents and Settings\Test.DOBRUSKY\Desktop\stylesheet.css"
should be a URL, not a local file system path. And it can be relative to the location of the HTML document, such as:
href="stylesheet.css"
or
href="http://www.example.com/somewhere/out/there/stylesheet.css"
<link rel="stylesheet" type="text/css" href="stylesheet.css">
Link the css file this way as show above and check it also
Close the h1 tag
<h1> Hayes and Ash </h1>
The color may be applied to all the text in the body.
You are making a direct reference to your local computer in your link statement.
C:\Documents and Settings\Test.DOBRUSKY\Desktop\stylesheet.css
The best practice is to put your style sheets in a folder inside your project, then reference the style sheet there. Your href reference would look like this if you put your style sheet in a folder named "styles".
href="~\styles\stylesheet.css"
You can of course put your stylesheet inside your project's main folder if you want but it's nice to have the folder structure for adding more css files to your project.
Check out Method 3 in the following article.
http://html.net/tutorials/css/lesson2.php
That same problem happened to me two days ago.
I tried many different ways to type in the src. None of them worked. Double checked them and triple checked them, in case of missing character or typo error.
Finally, the problem I found was that I created the directories and files with powershell. CSS file had no issue, but the html file didn't like to be created from the powershell (I don't know the reason for that) (that problem didn't occur using the terminal at Macbookpro). So I opened a notepad, and pasted the exact same code from the previous file (the one created using echo command at powershell), saved it as .html and then, the css file linked with the html and styled it just fine.