CSS file doesn't work when put on a remote server - html

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">

Related

How do I get my stylesheet to connect to my html file?

I'm currently working on a project for school, and I was wondering why my stylesheet isn't linking to my HTML file, I've tried rewriting it, putting it in different places, and still nothing! Here's the code if needed
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
<link type="text/css" rel="stylesheet" href="css/stylesheet.css"/>
</head>
<body>
<h1>About Me</h1>
<p>Hello everyone and welcome to my little website!</p>
<p>You can just call me Golden Rose<p>
<p>I play/watch and review games, movies, and tv shows (especially horror).</p>
</body>
</html>
body {
font-family: sans-serif;
}
If you can ensure the file location is correct, you may need to do a browser refresh. This can be done in Chrome by pressing control and f5 at the same time. This will clear all cache and force the stylesheet to load.

Why my webpage shakes after adding google font link in my html head tag?

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.

CSS3 not linking to HTML5?

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.

HTML transfer to Filezilla (images won't show)

"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.

External CSS stylesheet not linking

First off, I would like to add that I have looked through many posts before this, none matching my exact situation.
Problem:
"Lounge.html" is the 'index' html file shown below
"test.css" is the external .css file I am trying to link to, also show below
"Lounge.html" and "test.css" are both in the same folder; the root folder
All "img" and "a" elements are in working order
When I run "Lounge.html" in either Microsoft Edge, or Internet Explorer, the style is not applied to my page.
I would appreciate some help with getting this external link working.
Regards,
AA
h1, h2 {
font-family: sans-serif;
color: gray;
}
h1 {
border-bottom: 1px solid black;
}
p {
font-family: sans-serif;
color: maroon;
}
<!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=ISO-8859-1" />
<title>Head First Lounge</title>
<link type="text/css" rel="stylesheet" href="test.css" />
</head>
<body>
<h1>Welcome to the New and Improved Head First Lounge</h1>
<p><img src="images/drinks.gif" alt="Drinks" /></p>
<p>
Join us any evening for refreshing
elixirs,
conversation and maybe a game or two of
<em>Dance Dance Revolution</em>.
Wireless access is always provided;
BYOWS (Bring Your Own Web Server).
</p>
<h2>Directions</h2>
<p>
You'll find us right in the center
of downtown Webville. If you need help finding
us, check out our
detailed directions.
Come join us!
</p>
</body>
</html>
This may be the problem of browser cache. Clear the cache and check it again. Simple way to clear cache is add some radom string after adding ? to the url. Example
http://example.com/test.html?somerandomtext
To fix this issue, if "fix" is what you would like to call it, I simply uploaded both files (html, css) to a web hosting server. The 'index' html file was immediately affected by the external stylesheet, unlike my attempt at local methodology.
Try updating the browsers.
For IE : If you are still getting the error, insert
<meta http-equiv="X-UA-Compatible" content="IE=edge">
in your <head> section and try loading it.
Hope this will help!