For some reason, my SCSS code does not work on my html file live server. I simply input background color to red but it does not show the correct color on live server. The script in html file for linking css file should be correct.. The post does not allow me to put too much code. Please let me know if I need to provide more code.
Someone please help!
Thanks!
Here is my html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>The 2021 Frontend Developer Crash Course</title>
<link rel="stylesheet" href="css/main.css"/>
Here is my scss file code:
#import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,700;1,700&display=swap");
ody {
background: #d81c1c;
margin: 0;
font-family: "Poppins";
}
.navbar {
background: rgb(173, 25, 25);
}
So, you have a few issues here.
Firstly, as Akshay pointed out, your first tag in the css file is 'ody'. I'm assuming this should be 'body'.
Secondly, when setting a colour to the background you should use background-color rather than background. The background css is for assigning an image.
Finally, you havent mentioned, but scss needs to be compiled down to css. I'm assuming this scss file is main.scss and you're compiling down to main.css using visual studio?
To make sure your css is right, I would use the developer tools in Chrome. press F12 in chrome, select the correct element and then under 'Styles' add the css you're looking to use. It lets you che
Related
I'm creating a website.My .html file is not linking to my .css file.
HTML:
<!DOCTYPE html>
<link href="https://fonts.googleapis.com/css2?family=Montserrat" rel="stylesheet">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="404.css">
<title>Pacebi - 404</title>
</head>
<body>
body text here
</body>
</html>
CSS:
body{
font-family:'Montserrat';
background-color:whitesmoke;
color:black;
}
button{
font-family:'Montserrat';
background-color:whitesmoke;
color:black;
}
Note that I've done the exact same thing to my other pages. This is specifically not working.
Could it be the fact this is a 404 page in any way?
Using an online web programming tool (replit.com). (OS would not affect. If it did, I've been editing from a Windows 10 and Android 11.
Update: It's working now, I cleared browser cache and put the path for 404.html in the same directory as my .css.
i think your linked it wrong, well that is the only reason why it would not be connected
Your code is correct. It's working fine on my side.
Yes. I'd change the name to something still relevant and see if the issue persists.
I checked with your code. It was working fine on my side. Could be a cache issue. Empty your browser cache and refresh it. It should work fine then.
It is not linking because your css body code should be the html file code and if that doesn't work I think your file name should be style.css cuz 404 is a interactive code for windows to follow your file path.
It does not matter if your file is named 404.css or 503.css, it has to be in the same folder as your html file in your case.
That said, it seems your CSS is ill-formed or badly copy/pasted.
You miss the tag name for which you are defining the first styles. i guess it's the body
MISSING_SELECTOR {
font-family:'Montserrat';
background-color:whitesmoke;
color:black;
}
button{
font-family:'Montserrat';
background-color:whitesmoke;
color:black;
}
Also you can add the type but that does not matter much:
<link rel="stylesheet" type="text/css" href="404.css" />
Browsers HTML parsers are quite robust to the fact they don't really need the HEAD and BODY tags in order to know where to place the objects.
Nevertheless try to put all your links and metas inside the head if you are using it.
Good luck! :)
I tried the code on replit.com and it worked fine for me:
The only reasons why I think it might not have worked on your computer is if you named the file incorrectly, or if you put the css in a different folder.
Suppose you did it like this, then it would not work because the file path would be incorrect:
The second reason is if you put the css in a different folder, so the file path would be wrong:
My CSS file somehow not loaded when i clicked my html file directly in my folder. But somehow with vscode when go live after compiling the scss to css it works fine.
do you guys have any idea why?
I place my css file in dist folder when using the Live Sass Compiler.
I tried open the html directly from folder using all the browser i have but the css not loaded.
body {
background-color: aqua;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/dist/test.css">
</head>
<body>
<h1> TEST </h1>
</body>
</html>
Because you use absolute path, you should use relative path
instead of /dist/test.csstry dist/test.css
If you want to read more, here is an article about absolute/relative path:
https://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
The preview work on vscode because vscode probably use a localserver to run your html file. something like localhost:3000/index.html. So in this case your html file is at the root of the domain, that's why the absolute path will be the same as the relative path
You can try this
<link rel="stylesheet" type="text/css" href="/dist/test.css"/>
you can try ./dist/test.css, this will also works fine
HTML and CSS noob running into my first problem.
I am using Notepad++ and I have my css and HTML files both saved in the same folder. But whenever I launch the HTML file in a browser the css ID that I am using is not doing anything specifically centering and changing color.
This seems like one of those easy fix kind of things.
Main.css
<style>
#change{color:red; text-align:center }
</style>
example.html
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<Title>sample</title>
<link rel="stylesheet" href="folder/main.css" />
</head>
<body>
<p id="change">Sample sample sample </p> //HERE IS WHERE THE ID IS
</body>
</html>
anyone have an idea what im doing wrong
To combine the two current answers:
If the directory structure of your website is simply the index.html and main.css in the same folder, than the path to link the two is:
<link rel="stylesheet" type="text/css" href"main.css"/>
The Style tags in your current css page are redundant and unnecessary. Style tags could be used in the html, though are rarely used.
Finally, not sure if this is just the code you have posted, but the html here is acting as if it is all a comment,and make sure to delete that if that is in your current code (/*).
Remove the <style> and </style> tags. Your main.css file should only contain CSS:
#change{ color:red; text-align:center }
check css path.
Are paths like below?
- example.html
- folder/
|- main.css
remove tag in main.css
In css files, any html tag MUST NOT be existed.
and welcome to the world of web designing! Things can get quite frustrating, but as long as you show your will to solve a problem, everything will go smoothly. I love the fact that you tried to solve the problem prior to posting. Even though it is a basic thing, let's go step by step:
main.css does NOT need <style> tags. Those are only required when editing CSS internally, inside of <head> element of HTML page. In *.css files, you just start defining CSS rules.
make sure that you follow proper spacing like #change { color: red; text-align: center; } (ALWAYS FINISH A CSS RULE WITH A SEMI-COLON)
you can also break them down like this:
#change {
color: red;
text-align: center;
}
Characters /* and */ are CSS comments syntax. ANYTHING between those characters shall be ignored by the browser.
<link rel="stylesheet" href="folder/main.css" /> might potentially be the cause of the problem, since you stated that html file and css file are in the same folder. If that is the case, you don't need "folder/main.css" but only href="main.css" /> Also it wouldn't hurt to add <link rel="stylesheet" type="text/css" href="main.css" /> to let the browser know the type of the file you're linking to.
Here is a working example.
#change {
color: red;
text-align: center;
}
<html lang="en">
<head>
<meta charset="utf-8">
<Title>sample</title>
<link rel="stylesheet" href="folder/main.css" />
</head>
<body>
<p id="change">Sample sample sample </p>
</body>
</html>
I'm trying to teach myself html/css. I can't get Aptana to recognize my css stylesheet.
Here's what I have for my html file (index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Josh's Worthwhile Practice</title>
<meta name="author" content="Joshua Soileau" />
<link rel="stylesheet" href="style.css" type="text/css"/>
<!-- Date: 2012-07-11 -->
</head>
<body>
<div id="nav">
<ul>
<li><h4>Solutions</h4><p>what we do</p></li>
<li><h4>Work</h4><p>what we've done</p></li>
<li><h4>Team</h4><p>who we are</p></li>
<li id="nav_logo">LOGO</li>
<li><h4>Blog</h4><p>stuff we say</p></li>
<li><h4>Contact</h4><p>talk to us</p></li>
<li><h4>Client</h4><p>login</p></li>
</ul>
</div>
</body>
</html>
And here's my .css file (style.css, in the same directory as index.html)
* {
clear: both;
padding: 0;
margin: 0;
}
body {
background-color: #eee;
font-family: Arial, Helvetica, sans-serif;
}
#nav {
color: #121415;
width: 100%;
height: 30px;
}
I have the link tag in my html code:
<link rel="stylesheet" href="style.css" type="text/css"/>
But when I open index.html in a browser or the Aptana preview pane, it just shows the plain html with none of my css pulled in.
Am I missing something obvious?
I found my answer. I had left an empty css tag in the file and Aptana didn't like it. This is my fault, I left it out of this post because I didn't think it was relevant.
I had:
#nav li {}
Sorry for not given you guys all the info, you were all very helpful and I helped me learn some new things. Thanks!
Try removing the type="text/css" attribute. Most modern browsers will complain if a type is specified and doesn't exactly match the Content-Type header the file returns, and when loading files locally there is no Content-Type header.
Your style.css file must be in the same location as index.html for it to work.
What do you see in the address bar of the browser when previewing?
What happens if you replace index.html with style.css? Are you able to see the CSS file?
Does it work without Aptana's preview, if you open the index.html file directly?
Also open up firebug or developer tools and hit the network tab to check if the browser is making a request for the CSS file and what if any errors are being reported. Also check the response headers.
You may also want to verify what Aptana is doing to your source after it generates the preview. Does doing a view source in the preview browser show the exact same link / path to the stylesheet?
Do you have a similar issue as this user with absolute path's in Aptana's preview: Aptana Studio 3 preview problems with absolute path
I'm pretty sure aptana has autocomplete on files and other html/css tags so try
<link rel="stylesheet" href="
I believe that when you have typed this if should start to give you all the files within your folder hysterical set up. If it doesn't try a / or the likes?
try putting it in a folder for example CSS
<link href="CSS/aki.css" rel="stylesheet"
type="text/css" />
I'm pretty new to CSS and have found a nuance that I don't understand.
I'm trying to set the viewport background color, and using the color red in this example.
If I use the following code in an external .css file then add it to my html file in the 'head' section, the viewport color is NOT changing at all -- it is the standard white background:
==== my-external-css-file.css ===
root
{
display: block;
background-color:RGB(255,0,0);
}
==== my index.html file ====
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>theRed</title>
<meta name="viewport" content="user-scalable=no, width=device-width"/>
<link rel="stylesheet" href="my-external-css-file.css"
</head>
I am learning CSS using a book and the book uses the external .CSS file approach that does not work. So I took upon myself to abandon the external CSS file and put the root's color change directly in the "head" section of my index.html file -- if I instead put the root color I want directly inside index.html, the entire viewport background is red as expected:
==== my index.html file ====
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>theRed</title>
<meta name="viewport" content="user-scalable=no, width=device-width"/>
<style type="text/css">
:root
{
background-color:RGB(255,0,0);
}
</style>
</head>
Since both times I'm setting the root's "background-color" to red, and in both cases I'm doing so in the correct part of the html file, in the "head" section -- why is the external .css file's attempt to set the background color NOT working?
I'm new to CSS so I'm thinking there is some nuance here I'm not aware of? I'm using Netbeans for my development IDE and when I create a new .CSS file, Netbeans is automatically putting the "display: block" statement in the new .css file so I assumed it was needed and left that alone.
The root node of HTML is the <html> element, so the selector should be html not root.
In your external CSS, you have forgotten the : for the :root pseudo-selector. In HTML it will always be html so there is no reason to use :root AFAIK.
There is no such thing as root you can either use elements like html or body for color.
I think in your example you would set your body to:
body {
background-color:RGB(255,0,0);
}