New css definition doesn't get applied from linked stylesheet - html

In the head of the document:
<link type="text/css" rel="stylesheet" href="css/resources/css/lessons-matching-test.css"/>
In the body of the document
<div class="tests">
Link
</div>
In the linked css stylesheet I added this new style
.tests
{
background-color: blue;
/* some stuff */
}
Why isn't my style being applied when I add class=tests to my div?

When I create a new HTML-file and insert your code (without the external css and js files) I get the expectated result.
<!DOCTYPE html>
<html lang="en"><!-- Forgot the quotes -->
<head>
<meta class="metatype" content="matching-test">
<meta charset="UTF-8">
<style type="text/css">
.tests
{
background-color: blue;
/* some stuff */
}
</style>
</head>
<body>
<div class="tests">
Link
</div>
</body>
</html>
What happens when you exclude the js files and/or the css file?

Two cases
your lessons.js is doing something with .tests
<script type="text/javascript" src="js/resources/js/libs/lessons.js"></script>
Your css set .tests as important so that you cannot change
<link type="text/css" rel="stylesheet" href="css/resources/css/lessons-matching-test.css"/>

The problem is that your old styles are being used due to caching. Your new styles do not show up because the browser is using the old styles. There are a couple ways to go about fixing or changing this.
The technique for avoiding that is called "cache busting". When a server side handler is involved this can be handled in a higher language. But if there is no access to one, then usually version names are used.
lessons-matching-test-v1.css
Naming your css file this way every time you make a change will allow that new version to be used and cached. Ever version, you would increment the number, so version 2 would be lessons-matching-test-v2.css.
Another approach is to attach a query string to the path every time you make a new version
href="css/resources/css/lessons-matching-test.css?v=1.0"
and then every time you make a new version, change the query string, so version 2 would be href="css/resources/css/lessons-matching-test.css?v=2.0"

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 doesn't apply to class but does to the body element

I've experienced this problem multiple times and I haven't found any clear solution yet, so I was hoping you guys could help. I have simple index.php:
<?php
require('libraries/db.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="libraries/style.css">
<meta charset="UTF-8">
<title>Phantom 0.1 - Log In</title>
</head>
<body>
<div class="container">
</div>
</body>
</html>
and style.css in libraries/styles.css:
.container {
background: url("/libraries/images/background.png") no-repeat fixed center;
}
the css works when I try to change, for instance, background color of the body element, but whenever I try to change anything from the .container (or pretty much any other class/id element) the changes won't show.
I've tried it on multiple browsers, cleared the cache and css validator (just in case) but no luck there.
Seems like the problem might be not setting the width/height of the picture. You should also add a ?> on the end in the PHP document in libraries.
First look//Sometimes requiring another file using PHP can lead to the of that file instead. When you run the website localy or online, do inspect element and check if your CSS document line is in the head. https://gyazo.com/fe8f2282e6686d432f75ff994e65c0f7
Also try going into sources when inspecting and check if all the lines are there, there might be a log made if you use Chrome. Do CTRL F5 to load everything over again.

Where should css go in .html page?

I have a index.html page and a style.css file.
I have a style class called .slider and a style class called .logo. Should I put both .slider and .logo inside the style.css page or should i put .slider in index.html and .logo inside .css?
im asking this because i dont know if I should put styles only related to one page inside a global style.css or should i just put it inline in the page it applies to?
Typically you embed css that is page specific. Here is how I do my css:
Global css (seperate file(s)):
<link type="text/css" rel="stylesheet" href="css/style.css" media="all" />
NOTE: In today's web world we use a ton of plugins/themes and these plugins/themes tend to roll out newer versions so when you override these plugins/themes make sure you create a css file specific to that theme.
For instance,
Bootstrap 3.1
<link href="/css/bootstrap.3.1.css" rel="stylesheet" type="text/css">
Create this for all your bootstrap overrides so you can use the latest version when it comes out.
<link href="/css/bootstrap.overrides.css" rel="stylesheet" type="text/css">
Page specific css(embedded):
<head>
<!-- last element in head //-->
<style type="text/css">
.pageSpecific
{
color: red;
}
</style>
</head>
When I am in development stages or the html element does not require css classification.
Simple style format (inline):
<th style="min-width: 65px;">Column Header</th>
You may have print specific css as well:
<link href="/css/print.css" rel="stylesheet" type="text/css">
and inside this file wrap your css as such:
#media print{
<!-- print specific css here//-->
}
Keep in mind that you may want to use a css classifcation at a later date when at the time it may seem page specific. Always code for reusability!
Finally:
I like to use css minifier when I put my file(s) into production. I do the same with my javascript files using UglyJs. There is also LESS css that you can use but for now I would stick to these simple conventions or something similar.
Styles can go in one of three places.
Inline on the element itself
In the html page
In a separate file
I would suggest either putting it in a <style> tag in the <head> of your html or putting it in a separate file, either will work just as well. Obviously having the styles in a separate file means you could reuse those styles on another page if needed.
Either way, it won't make a difference. Personally, I like to have all of my CSS in one place, but you can do whatever you want. If you do put all of your CSS in one document, use comments to separate it into groups, so everything will be easy to find.
You should NEVER have inline or on-page CSS. It should all go in the stylesheet (of which you should only have one per media-type) - why? Because stylesheets are cached, and the cache is way better to hold it than the HTML-files (which may also be cached, by all means, but with dynamic content, they often load quite more often than CSS).
Second, it's a nightmare to update and change, if not everything is in one file.

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>

Placing CSS information on an HTML page

Where are all of the places you can put CSS style information on an HTML page?
I know you can place CSS style info in the head of an HTML page, where else is it valid to put CSS elements?
I would like to place my CSS someplace else on the page due to inheritance, e.g:
<style type="text/css">
...
</style>
You can use
<link rel="stylesheet" type="text/css" href="style.css" />
in the head to link to an external stylesheet.
You can also have inline style attributes, such as
Hello
And you can also set the styles in your scripts, e.g. using jQuery (which can go where ever your script is):
$('textBox').css("font-weight", "bold");
However, it is good practise to try to keep all the style information in one standard spot, i.e. the head of the document - it makes it easier for others to maintain your work for you.
Note that if you really want to override a particular attribute, the best way to do it is to use the !important option, such as
color: red !important;
You can use this with any of the methods listed above, and it will override any later settings that conflict.
You can link external stylesheets in the <head> block. You can use more than one stylesheet, and they are loaded in order (in this example, both screen.css and print.css override some elements of style.css.
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<link rel="stylesheet" href="screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
You can import it from an external stylesheet in the <head> block:
<style>
#import url(style.css)
</style>
Or import it using another method:
<style type="text/css" media="all">
#import "style.css";
</style>
You can put the CSS in the <head> block:
<style type="text/css">
p {font-face:Arial;}
</style>
You can put the CSS inline into the html:
<ul> <li style="list-style:none">Item 1</li></ul>
You can add the CSS to the DOM via javascript:
function addCss(cssCode) {
var styleElement = document.createElement("style");
styleElement.type = "text/css";
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = cssCode;
} else {
styleElement.appendChild(document.createTextNode(cssCode));
}
document.getElementsByTagName("head")[0].appendChild(styleElement);
}
You can specify it "inline"
<div style="border: 1px solid red" />
Other than that I'm not used to place it anywhere else than separate files / <head>
Off hand:
In other documents. Include CSS files with the LINK element:
<link href="style.css" type="text/css" rel="stylesheet">
Inline with HTML elements:
<h1 style="color: red">Title</h1>
That is usually the only two other places you will put CSS. You can also apply CSS to documents via JavaScript.
As the others have said, non-inline CSS belongs in the head, if you want to write syntactically-correct code. Check the schema if you're not sure.
If you need to generate the CSS during dynamic page creation, you can easily inject it into the DOM, at the bottom of the head, using javascript:
document.getElementsByTags('head')[0].appendChild( -- css here --);
Be forewarned that this will cause your page rendering to slow down and "blink," as the browser must restyle the page when your new CSS is inserted. The same thing will happen if you ignore the schema and place your CSS in the body.
This leads to a poor user experience.
If you're concerned with inheritance in css then you need to remember this general rule. 
Inline styles > everything else. 
Tag > id
Id > class
Then you have combinations of these rules. 
Tag + id (div#main) > id
Parent tag + tag+id > tag+id 
Remember these are just general rules but they should take care of 99% of your situations. Placing styles in your scripts are generally a bad idea because it affects perfoance as others have noted and it adds another place for you to update when you need to change  the styles. 
So, you can specify it inline as an attribute on the element you want to style...
<p style=" font-weight:bold; ">
Or, you could add it in a style block in the page body or header
<style>
p {font-weight:bold;}
</style>
And lastly, you could include it from a linked CSS file by importing...
<style>
#import url(css/bold.css)
</style>
Or by linking it...
<link rel="stylesheet" href="css/bold.css" />
Honestly, linking is, 99.9999% of the time, is the best way to include stylesheets on a page as it neatly separates your CSS from your code, making updates to either much faster.