I know it's already been asked but that person had a typo, and the answer mentioned firebug so it's not current (and is closed).
In WordPress, I noticed that main file, style.css is not being applied, specifically:
The file IS loaded correctly
Its styles are NOT being applied
When I inspect element for an element I know is being targeted by style.css, nothing from style.css is there (styles tab of inspect element) at all. I've inspected several elements.
It's loaded through WordPress as so (an unchanged call generated with _underscores):
wp_enqueue_style( 'themexzz-style', get_stylesheet_uri(), array(), _S_VERSION );
This is the produced link (and clicking on it works like it's supposed to):
<link rel='stylesheet' id='themexzz-style-css' href='http://localhost:8012/themexzz/wp-content/themes/themexzz/style.css?ver=1.0.0' media='all' />
I'm using
Xampp with php 7.2.3
with wordpress 5.5.3
meta charset="UTF-8"
Database collation is utf8mb4_unicode_ci
It's an underscores generated theme
Thanks in advance.
#Xhynk - You were right. It was the:
you may have invalid CSS way at the beginning of that file, blocking
all the rest of the CSS being applied
As it is an underscores theme and I apply my own CSS from another file, it didn't even cross my mind that there might be invalid CSS in style.css
Thank you #Xhynk
The position of CSS files in head tag also matters,
Assume that you have loaded 2 CSS file in the head tag
<link rel='stylesheet' href="..../style.css">
<!--(have property of background color blue and text white)-->
<link rel='stylesheet' href="..../mycss.css">
<!--(have property of background color white and text black)-->
if you place tags in this order
<head>
<link rel='stylesheet' href="..../style.css">
<link rel='stylesheet' href="..../mycss.css">
</head>
Both the files will be loaded but CSS will be applied of the myss.css file,
this happens because of CSS overwrite
You can change the position of the link tags to get your desired output
Related
I'm trying to add my .css file, but it is not working and not applying.
But when I put the same style code in HTML it works, so the problem is links, but I think I am doing it right.
enter image description here
I have also tried putting <link rel="stylesheet" href="style.css"> but I know I gotta put the folder names too, so both don't work.
Also, something was wrong with linking, because I tried putting in <img> and it still wouldn't link or show but when I tried online image, it would link.
change the 9th line as
<link rel="stylesheet" href="../static/style.css">
because u need to go back from dashboard.html use"../"
Then goes to the stylesheet file as "static/style.css"
Path should be ../static/style.css in href attribute
I've been trying to connect html with the CSS.
I've checked that:
The stylesheet path of the css is correct, and it is: css2/css2.css
The <link rel="stylesheet" type="text/css" href="css2/css2.css" /> code is well written and I think it is.
I also tried to try several code editors in case it was a preview problem, I've already tried Atom and brackets and the two do not show that the CSS gets connected.
HTML code :
The html close tag is written too at the bottom.
CSS
here is where the html and CSS file is placed
As you have mentioned in your statement that css files is css/css2.css
so it means you should link css file by this code.
<link rel="stylesheet" type="text/css" href="css/css2.css" />
You added css2 instead of css as folder name
This code will 100% work, Just make sure your HTML file and CSS2 folder need to be on same level (in same folder).
otherwise this CSS file not link to your HTML.
I've used inline and imported css loads but having trouble with external and never tried it before.
I copy and pasted everything from this link css link
into a css file, I don't actually know specifically which animations I want to keep and get rid of yet, that will come later.
How do I actually add it into the html though? In the Header I have the
<link rel="stylesheet" type="text/css" href=\animate.css">
link so my html is inked to my css.
If I wanted to add for example .animated.hinge to a <p> how would I do this?
Preferably without any javascript or php, haven't progressed that far yet!
Thanks!
The problem is that you are using a backslash instead of a forward slash and missing a double quote when you are linking to the CSS file.
<link rel="stylesheet" type="text/css" href="/animate.css">
Web sites are all about files. If you have a file called animate.css in the same folder as your index.html, you can simply call it with the next tag
<link rel="stylesheet" type="text/css" href="animate.css">
This means that you are referencing the animate.css file. There you select your objects by clases and just use them in the html file.
Also you would add classes to the p element like so
<p class="animated hinge">Paragraph</p>
We can include external css file through the link tag in head tag. Please see below syntax for the same. also check the file path(href path), it should be relative or absolute.
<link rel="stylesheet" type="text/css" href="/custom.css">
You are missing one double inverted comma at start and you have to use '/' in the href attribute instead of '\'.
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.
I have 2 pages:
http://local.host:8080/test/login
http://local.host:8080/test/admin/manage
Added css in login.jsp using c:url:
<c:url value="css/style.css"/>
When I open 1st link - everything works well. I tried to add the same style.css file to manage.jsp (2nd URL), but when I open 2nd link - css is not included. In Page Source I have:
<link rel="stylesheet" type="text/css" href="css/style.css"/>
How to define to take style.css from the root of URL (http://local.host:8080/test) ?
I think it is, because the specified path is relative to the current page (login is at an other level of path-nesting* than admin/manage).
A trivial but bad solution would be adding ../ for the css of admin/manage. But this soultion has the drawback, that you always need to adjust the ../ when you change the level of path-nesting* for an page.
To overcome this problem, make the path in the c:url-tag start with an /! (this make the tag aware that the url is context relative (relative to http://local.host:8080/test/), and the tag will automatically addhttp://local.host:8080/test` in front.
<c:url value="/css/style.css"/>
will be rendered to : http://local.host:8080/test/css/style.css
For the link use this way
<c:url value="/css/style.css" var="cssUrl"/>
<link rel="stylesheet" type="text/css" href="${cssUrl}"/>
*I do not know the correct term for "path nesting" at the moment - fell free to change it
Order of attribute might be the problem. Correct the order
<link href="css/style.css" rel="stylesheet" type="text/css" />