I am learning web design and i have a very simple issue that i haven't been able to find an answer to. I created a very simple page for an example and both documents are in the same folder. it works as a snippet on here, but then it doesn't work on my computer. I have checked the filepath for the stylesheet several times, but it doesn't work. If anyone can help that would be very appreciated. Thanks!
(im not sure if the snippet is useful but i thought i would include it anyways)
body {
background-color: #eee;
}
#header {
background-color: #66CCFF;
color: white;
}
<div id="container">
<div id="header">
<h1>text</h1>
</div>
<div id="content">
<div id="nav">
<h3>nav</h3>
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
<div id="main">
<h2> other text </h2>
</div>
</div>
</div>
This mainly has to do with the path of the file. Try this:
href="./style.css"
If that doesn't work show us the error you get
Just remember to follow this, to avoid again issue in case of accessing through parent directory:
parent folder:
<link rel="stylesheet" type="text/css" href="../style.css" />
same folder:
<link rel="stylesheet" type="text/css" href="./style.css" />
Related
I am new to html and css, I just desined sample website on xd adobe. image of it is attached. The html works but when I am working on the css part, its is not working, It does not show on the website. I am coding at a scss file and not css file. I will appreciate any help! You can see I wrote on the css file that the logo should be without underLine but still its not working
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;700&display=swap");
body {
background: #F2F2F2;
font-family: 'Poppins';
margin: 0;
}
.navbar {
background: white;
padding: 1em;
.logo2 {
text-decoration: none;
font-weight: bold;
color: black;
font-size: 10em;
}
}
.container {
display: flex;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JustFly</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="navbar">
<div class="container">
<a class="logo2" href="#">JustFly</a>
<img id="mobile-cta" class="mobile-menu" src="images/menu.svg" alt="Hamburger Menu">
<nav>
<img id="mobile-exit" class="mobile-menu-exit" src="images/exit.svg" alt="Hamburger Menu">
<ul class="primary-nav">
<li class="current"> Home </li>
<li> FAQ </li>
<li> Pricing </li>
</ul>
<ul class="secondary-nav">
<li> Contact </li>
<li class="GoPremiumBtn">Buy Now </li>
</ul>
</nav>
</div>
</div>
<section class="hero">
<div class="container">
<div class="col">
<h1 class="head">Fly Like Never Before.</h1>
</div>
<img id="mainImage" class="mainImage" src="images/icons8-fighter-jet-96.png" alt="Fighet Plane Image">
</div>
</section>
</body>
</html>
[Code][1]
[Output][2]
[Design][3]
[1]: https://i.stack.imgur.com/K19ny.png
[2]: https://i.stack.imgur.com/Iluoa.png
[3]: https://i.stack.imgur.com/fGDMf.png
Your code looks fine and could also be tested successfully. The only thing which may cause your problem is your path to the CSS file.
Check if the path in <link rel="stylesheet" href="css/main.css"> is correct.
You said you are using scss for writing styles so you must be using local node setup or might be using the ruby compass thing.
Please check if your local development setup is outputting the css file at correct path.
you should try below command if using node-sass
sass --watch scss/main.scss:/css/main.css
Then add this to your HTML
<link rel="stylesheet" href="./css/main.css">
I'm having an issue setting my text color. I want to set the h1 element to #513271 but it doesn't seem to want to work. Below is my current code and below that are several solutions I've tried that also did not work.
My CSS is saved as stylesheet.css & it is in the same folder as my HTML (which is tributePage.html).
jumbotron h1 {
color: #513271;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link href="\stylesheet.css" rel="stylesheet" />
<html>
<head>
<title>Lizzy McGuire, an Evolution</title>
</head>
<div class="container">
<div class="jumbotron">
<body>
<h1 style="jumbotron-h1" class="text-center">Hey now, hey now.</h1>
</body>
</div>
</div>
</html>
I have also tried the following solutions. I have literally tried all of these by themselves, in various combinations, etc.
Change the CSS file path
C:\Users\Ashle\Coding\Assignments\FCC -- Tribute Page\stylesheet.css
C:\Users\Ashle\Coding\Assignments\FCC -- Tribute Page\
\stylesheet.css (I've used \ through \\\)
stylesheet.css\
Change the external CSS link style (no spaces between side carets, just included them so this would print below)
< link href="stylesheet.css" rel="stylesheet" type="text/css"/ >
< link href="stylesheet.css" rel="stylesheet" >
Change the h1 element name in CSS
h1, #h1, .h1
jumbotron h1, #jumbotron h1, .jumbotron h1
jumbotron-h1, #jumbotron-h1, .jumbotron-h1
purple text, #purple text, .purple text
purple-text, #purple-text, .purple-text
Change the font color with an inline element
< h1 style="color:purple;" class="text-center" >Hey now, hey now.< /h1 > Now, oddly enough, THIS will turn the title purple.
Thanks so much for your help!
For your CSS what you want is
.jumbotron h1 {
color: #513271;
}
Note the period before jumbotron to indicate it's a class
I hope my answer help you:
This is your original code:
<html>
<head>
<title>Lizzy McGuire, an Evolution</title>
</head>
<div class="container">
<div class="jumbotron">
<body>
<h1 style="jumbotron-h1" class="text-center">Hey now, hey now.</h1>
</body>
</div>
</div>
</html>
You cannot have a div element outside the body tag.
You need to include the link to css file in the head tag. Fix your code like this:
<html>
<head>
<title>Lizzy McGuire, an Evolution</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Hey now, hey now.</h1>
</div>
</div>
</body>
</html>
You can see that in your css file you declare a 'jumbotron h1', but in your HTML code jumbotron appear to be a class, and to style a class in external css file you need to a dot (.) before the class name. Your css need to look like this:
.jumbotron h1 {
color: #513271;
}
Hope this help.
Your tag is not properly placed nor your external css tag is missing.
and
the class is not used for styling (except if you used bootstrap).
Here is the correct one:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Lizzy McGuire, an Evolution</title>
<link rel="stylesheet" href="dir/style.css" > <!-- put the external css link here -->
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Hey now, hey now</h1>
</div>
</div>
</body>
</html>
CSS:
jumbotron h1 {
color: #513271;
text-align: center;
}
I recommend you to practice doing external css files instead of inline/internal.
I had a similar problem where my stylesheet was not being reflected in my HTML doc. I finally figured out that my .css file was actually a .css.txt file. "mystyle.css.txt".
In any directory on your computer (I used the one the html/css files were in) click view at the top, then options. Select the view tab, then uncheck the option "Hide extensions for known file types". When this was unchecked i was able to delete the .txt extension from the .css file and it became a true .css file and reflected in my .html doc perfectly.
I am working on creating a website with 000webhost.com. I made it entirely with HTML and CSS. I have a problem. If I run my website by simply opening the index.html file from my computer, he does it perfectly. the download button works whatsoever. but if I 'm going to hightechprogramming15.netne.net and I click on the download button, it downloads a different file called download.htm. Can anyone help me? Thanks in advance!
Here is my code:
<html>
<head>
<title>HighTechProgramming15</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>HighTechProgramming15</h1>
<link rel="stylesheet" type="text/css" href="style.css">
</div>
<div id="content">
<div id="nav">
<h3>Navigation</h3>
<ul>
<li>Home</li>
<li><a class="selected" href="Page2.html">Downloads</a></li>
<br />
Link to my YouTube channel
</ul>
</div>
<div id="main">
<h2>Downloads Page</h2>
MessageBox Generator
<br />
</div>
</div>
<div id="footer">
Copyright © 2016 HighTechProgramming15
</div>
</div>
</body>
I had the same problem i think you'll have to put MessageBox%20Generator.exe in place for MessageBox Generator.exe and Maybe you'll have to put download attribute i
body {
background-color: #0B0B0B;
background-image:url(resources/body.jpg);
background-repeat:no-repeat;
}
That is my CSS, it won't work when I put it on a style sheet file but it will work when enclosed in a a style tag. I've checked other questions and tried its solutions but none worked for me. Is there anything wrong with that CSS? Here's the body btw:
<body>
<br>
<div id="wrapper">
<div id="container">
<div class="controller" id="prev"></div>
<div id="slider">
<img src="resources/Slideshow/AvrilAlbum.png" width="583" height="583" id="transparent">
<img src="resources/Slideshow/HTNGU.png" width="583" height="583" id="transparent">
<img src="resources/Slideshow/LetMeGo.png" width="583" height="583" id="transparent">
<img src="resources/Slideshow/OnTour.png" width="583" height="583" id="transparent">
<img src="resources/Slideshow/LetMeGoBuyNow.png" width="583" height="583" id="transparent">
<div><img src="resources/Slideshow/RockNRoll.png" width="583" height="583" id="transparent"></div>
</div>
<div class="controller" id="next"></div>
</div>
</div>
<a class="twitter-timeline" data-dnt="true" href="https://twitter.com/AvrilLavigne" data-widget-id="436842073010888705">Tweets by #AvrilLavigne</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</body>
Your CSS link should be contained in the head.
<head>
<link rel="stylesheet" type="text/css" href="bodyCSS.css">
</head>
This is when the CSS document is within the same folder as the html document. If your CSS document is outside of the html folders location. Then it needs to be:
<head>
<link rel="stylesheet" type="text/css" href="your/folder/bodyCSS.css">
</head>
And in this case. If your CSS document is in a DIFFERENT folder than your Background Image Folder, it will try to append the image link to the active folder of the html document. So it seems this is a case of misdirection on the background image location.
Do you have this line in between your head tags?
<head>
<link rel="stylesheet" type="text/css" href="YOURCSSFILE.css">
</head
Also, make sure that you are using the relative link to your image.
how is the folder structure setup in accordance with your .css file? Maybe try
background-image:url(../resources/body.jpg);
if the .css file is in a folder that is at the same level as your resources file
You are probably incorrectly linking your style sheet. Perhaps pointing it to the wrong directory. Can I see your head?
Just change your style, when you linking that from file css/style.css.
body {
background-color: #0B0B0B;
background-image:url(../resources/body.jpg);
background-repeat:no-repeat;
}
because here you should use relative url to location resources/body.jpg, resources folder is not in the same level as you style.css.
From style.css you should move one step back by using (../) and then jumps to resources/body.jpg.
Hope by correcting your css,you solve your problem.
Your complete Html page is below, here i am just include head tag and link css file.
<!DOCTYPE html>
<html>
<head>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
sam as your code....
</body>
</html>
I currently have a css file that I want to link in visual studio. I have included the file in my project yet it is still not working.
I am simply using css to change the body background. Here is my code:
Css - folder: /css/Style.css:
body
{
background-image: url('Images/body-background.jpg');
background-repeat: repeat-x;
}
Html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="css/Style.css" />
</head>
<body>
<div id="header">
</div>
<div id="page-wrap">
<ul id="nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
<p>Main Content</p>
</div>
<div id="footer">
</div>
</body>
</html>
It all works perfectly when I put the style internally in the head it works perfectly. What's going on?
The link in the css file to your image is relative to the css file.
try
background-image: url('/Images/body-background.jpg');
to get it from root, or
background-image: url('../Images/body-background.jpg');
to get it relative to the css file.
This will work in css file.
body
{
background-image: url('/Images/body-background.jpg');
background-repeat: repeat-x;
}