Linking html to css does nothing (ATOM) - html

Im trying to link my css file in the html file but anything ill try doesnt work.
changing paths
creating another file/folder
renaming
<head>
<link rel="stylesheet" type="text/css" href="/css/style.css">
<meta charset="utf-8">
<title>Gamerologie</title>
</head>
.h1 {
font-size: 300px;
}
this title need to change it's color to red but nothing happens

I may have misunderstood your question, but the CSS you are providing isn't supposed to change the font's color, just the size. In addition to that, you are selecting every item whose class is "h1". Only when you remove the dot, you'll be selecting every h1. Hope that helps!

Related

My CSS file errors out no matter what I try

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.

CSS styles disapear when adding media attribute to html?

I have a very confusing problem and I'm not sure what's wrong. My CSS styles completely disappear when I add the media attribute to the link tag in the head of the html file. When I remove the attribute, the styles show up just fine. But I need this attribute to set the size for the display. Here is what I have in my head:
<head>
<title>Learning Addition</title>
<meta charset="utf-8">
<link rel="stylesheet" href="DesktopCss.css" media="screen and (max-width:481px)" >
</head>
Anyone know what the problem can be? Thanks.
You probably just copied the media query without understanding what's happening in it. Or else you simply overlooked the error in it.
Your query defines that this css file should be used only up to maximum screen size of 481px. Which is highly likely what you're not trying to do.
You should change max-width to min-width to make it work.
Also one more change that I would recommend is using all small case in the file name of your css file, and also changing the original name of your file on your server to small case, to avoid browser incompatibility issues.
Your code should look something like this:
<head>
<title>Learning Addition</title>
<meta charset="utf-8">
<link rel="stylesheet" href="desktopcss.css" media="screen and (min-width:481px)" >
</head>
If you're trying to load CSS that will apply to a desktop browser, unless you're using the world's smallest monitor, you should be saying
screen and (min-width:481px)

HTML page will not respond to ID's in CSS

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>

Why does the order of the link elements in <head> matter?

From Code Academy's Make a Website: CSS Styling:
<head>
<link href="font.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
</head>
"Inside the head element are two link elements. The order of these
link elements matters.
The browser first sees the link for the custom font font.css, and
makes the font available to use in the page.
Next the browser sees the link for main.css. Since the browser now
knows about the custom font, we can use it from main.css to style
elements."
I want to have an intuition/answer as to why does the order matter (link to fonts before the main CSS stylesheet)?
I tried to do it in the other order (link to main stylesheet before link to fonts) and it still worked.
Order matters when you're overriding CSS definitions. This is part of the "cascade" of cascading style sheets. If main.css does not contain any font definitions, then the order doesn't matter.
For example: you were given a default CSS file from a designer, but you need to tweak it a little. Instead of editing the default.css file, you create a custom.css file and change only the handful of definitions that you wanted to tweak. Now the order matters.
<head>
<link href="default.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">
</head>
If you were to put custom.css first, then your changes would never appear.
Here's an article that gets into various levels of further detail. Warning, it can make your head spin.

CSS Not Recognized

So I am trying to make my first mobile-first website and my first problem is that the index.html file doesn't recognize my style.css file to stylize all the different div tags. The style.css file is located in a css folder, along with the normalization.css file. Here is my code for the index.html file:
<!DOCTYPE html>
<html>
<head>
<title>Put on a Show, Monkey-Boy</title>
<link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet' type='text/css'>
<link href="/css/style.css" rel="stylesheet">
<link href="/css/normalization.css" rel="stylesheet">
</head>
<body>
Were the CSS working properly, there would be a background color, the divs would have their own individual colors and sizes, fonts would be stylized in Nunito and Lato respectively, and positions of block text would be different. I am using the latest version of Chrome.
I looked at the other threads relating to this topic, but none seemed exactly the same as the problem that I am having.
Any help would be much appreciated!
Thanks so much in advance,
Todd
you forget a closing curly bracket after the *-selector.
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Fiddle: http://jsfiddle.net/6pxn0oro/2/
Also you should put your normalization.css before the style.css , so you don't overwrite your created styles.
you can try to remove / on your link.
Before:
<head>
<link href="/css/style.css" rel="stylesheet">
<link href="/css/normalization.css" rel="stylesheet">
</head>
After:
<head>
<link href="css/style.css" rel="stylesheet">
<link href="css/normalization.css" rel="stylesheet">
</head>
Hope that helps.
After how many years of development, you wouldn't believe how often I find myself scratching my head with this exact problem.
Firstly, make sure the css folder is in the root directory of your site. This is where the leading slash (/) is pointing to. Alternatively, if you remove this as suggested, then it becomes a relative path. Relative to the directory you're in. So in that case, the css folder should be in the same directory as the your index.html file. (Note, that depending on how you have your webserver setup, what you see as the root directory, may not be the actual root directory. In which case a relative path can be useful).
Also, make sure your css is correct, no typos in class names or anything like that. I'll usually apply something very simple that I know will work, such as a background color to the body element. For example:
body {
background-color: #000000;
}
Use a code editor with syntax highlighting to help you address any errors both in your CSS, and in your HTML.