I have been styling my HTML with inline <style></style> tags in the <head> section. When I tried to move styles to CSS file for the first time from HTML file but, I cannot get my link to work.
I have created a new folder and inside this folder a new HTML file and CSS file are present. I am using VS Code.
I have tried pasting my HTML and my CSS into CodePen and it renders, so I know it's not an issue of the CSS itself not being correct.
My HTML file looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Try this again</title>
<link rel="Hope this works" href="newcssstyle.css" type="text/css">
</head>
<body>
<h1> Here we go </h1>
</body>
</html>
My CSS file looks like:
h1{
font-family: Arial, Helvetica, sans-serif;
color: blue;
}
Why does linking a CSS file not work?
In your example, you only have to change the rel="Hope this works" to rel="stylesheet" in order for it to recognize it as a stylesheet, as demonstrated in the following:
<link rel="stylesheet" href="newcssstyle.css" type="text/css">
Setting the rel attribute value to stylesheet distinguishes the difference between, say, a stylesheet link and an icon image link. You can see all the possible values for the rel attribute on MDN.
Furthermore, if it still doesn't work, ensure that the file "newcssstyle.css" is in the same directory as the referenced HTML file. If you put it in a folder such as "stylesheets", ensure that you add the relative folder path to your HTML file.
For example, if you had a directory like this:
Parent Directory Name:
index.html
Stylesheets:
newcssstyle.css
Then you would reference "newcssstyle.css" (relative to "index.css") as href='Stylesheets/newcssstyle.css'
Whereas, in a directory like this:
Parent Directory Name:
Html_files:
index.html
Stylesheets:
newcssstyle.css
Then you would reference "newcssstyle.css" as href='../Stylesheets/newcssstyle.css' instead (where .. means "go up one level to the parent directory").
element creates relationship between current and external documents.
Important point about i the attribute which stands for relationship. This attribute define how the linked document is related to the current document. How it is read..
Also please make sure your .css file has the same name as Your href.
You can read more about it here -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
Related
I have a spring boot application. Now I need to add css to it.
I added a css file and the link to it in the html file.
But for some reason it's not working.
This is how I've done it.
Added csstest.css file below to src/main/resources/static/css.
body {
background-color: blue;
}
h1 {
color: red;
margin-left: 20px;
}
Added the following code to test.html at src/main/resources/templates.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/csstest.css"/>
</head>
<body>
<h1>This text should be styled, but it's not.</h1>
</body>
</html>
But when I open the html page the css is not being applied. Why?
I've seen a tutorial telling to add a configuration on dispatcher-servlet.xml.
But my application is a spring boot app that doesn't have that file.
The tutorial was not for a spring boot app (which is my case).
The tutorials for spring boot don't tell to do that.
So not sure what's the issue.
Assuming your #Configuration class extends WebSecurityConfigurerAdapter, override this method. Also, do not forget to use the annotation #EnableWebSecurity on your config class
#Override
public void configure(WebSecurity web) throws Exception {
web
.ignoring()
.antMatchers("/css/**");
}
If you want spring-boot/thymeleaf to detect your CSS file related to your HTML file then you have to add the the resource path using thymeleaf expressions.
In the header tag of your HTML file include this ->
<head>
<link rel="stylesheet" th:href="#{/css/YourCssFile.css}">
</head>
To make this work you need to place your YourCssFile.css inside the resources folder.
The path should look something like this src/main/resources/static/css
Note:- you dont have to give the entire path in the th:href tag
in the html file. Mention the filename directly if the css file has been placed directly inside the static folder else if the css file has been placed inside a seperate folder then mention the folder name followed by a forward slash(/) and then the css_file_name.
Example:-
If the css file is placed in src/main/resources/static/css/mystyle.css
then the corresponding th:href tag => th:href="#{/css/mystyle.css}"
If the css file is placed in src/main/resources/static/mystyle.css
then the corresponding th:href tag => th:href="#{/mystyle.css}"
If the css file is placed in src/main/resources/static/css/homepage/mystyle.css
then the corresponding th:href tag => th:href="#{/css/homepage/mystyle.css}"
Hope you get the idea ;)
The CSS will not be applied because they didn't found the csstest.css file under
src/main/resources/templates/css.
You must place the test.html file under the src/main/resources/static in order to point to the csstest.css file under src/main/resources/static/css since this section of code in test.html
<link rel="stylesheet" type="text/css" href="css/csstest.css"/>
Worked for me.
This is the result when serving test.html file
Thanks
Since you are using thymeleaf, try th:href instead of href inside your tag.
<link rel="stylesheet" type="text/css" th:href="#{css/csstest.css"} />
I hope this will solve your problem
I have been styling my HTML with inline <style></style> tags in the <head> section. When I tried to move styles to CSS file for the first time from HTML file but, I cannot get my link to work.
I have created a new folder and inside this folder a new HTML file and CSS file are present. I am using VS Code.
I have tried pasting my HTML and my CSS into CodePen and it renders, so I know it's not an issue of the CSS itself not being correct.
My HTML file looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Try this again</title>
<link rel="Hope this works" href="newcssstyle.css" type="text/css">
</head>
<body>
<h1> Here we go </h1>
</body>
</html>
My CSS file looks like:
h1{
font-family: Arial, Helvetica, sans-serif;
color: blue;
}
Why does linking a CSS file not work?
In your example, you only have to change the rel="Hope this works" to rel="stylesheet" in order for it to recognize it as a stylesheet, as demonstrated in the following:
<link rel="stylesheet" href="newcssstyle.css" type="text/css">
Setting the rel attribute value to stylesheet distinguishes the difference between, say, a stylesheet link and an icon image link. You can see all the possible values for the rel attribute on MDN.
Furthermore, if it still doesn't work, ensure that the file "newcssstyle.css" is in the same directory as the referenced HTML file. If you put it in a folder such as "stylesheets", ensure that you add the relative folder path to your HTML file.
For example, if you had a directory like this:
Parent Directory Name:
index.html
Stylesheets:
newcssstyle.css
Then you would reference "newcssstyle.css" (relative to "index.css") as href='Stylesheets/newcssstyle.css'
Whereas, in a directory like this:
Parent Directory Name:
Html_files:
index.html
Stylesheets:
newcssstyle.css
Then you would reference "newcssstyle.css" as href='../Stylesheets/newcssstyle.css' instead (where .. means "go up one level to the parent directory").
element creates relationship between current and external documents.
Important point about i the attribute which stands for relationship. This attribute define how the linked document is related to the current document. How it is read..
Also please make sure your .css file has the same name as Your href.
You can read more about it here -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
I've placed a style sheet style.css inside the /assets/styles-folder and embedded it via <link rel="stylesheet" href="style.css" type="text/css"> in my something.ejs file.
But the stylesheet is not loading. Has anyone an idea?
Use the following to give the correct location of style sheet:
<link rel="stylesheet" href="../../assets/styles/style.css" type="text/css">
The first .. will take it to views folder, the next .. will take it to parent folder Employees, now you can give the path to your stylesheet.
This is because the path must always be relative to current .ejs or some other current file's location in the directory.
Meteor compiles the css files into one css file and inserts it as first child of head element in html.
<head>
<!-- meteor inserts my concatenated css file from client folder here -->
<title>page</title>
<link href="/sometheme/theme.css" rel="stylesheet">
<!-- other css files here -->
</head>
I don't want to create a package for the theme assets I am using. I just want to use them directly in the html like above and I want to develop my css in the client folder with a preprocessor.
How can I get meteor to inject the generated css as last element of head rather than first which is default?
Thanks
EDIT:
To clarify further, I want meteor to inject the compiled css as shown below. I could manipulate the DOM and move that link after DOM is ready but it's a hack. Is there an API to configure this?
<head>
<title>page</title>
<link href="/sometheme/theme.css" rel="stylesheet">
<!-- other css files here -->
<!-- I WANT METEOR TO INJECT COMPILED CSS HERE -->
<link rel="stylesheet" type="text/css" class="__meteor-css__" href="/main.css?da39a3ee5e6b4b0d3255bfef95601890afd80709">
</head>
You can use #import url; declaration on top of your css file.
main.css
#import '/sometheme/theme.css';
body {
}
This will load /public/sometheme/theme.css before your css
Just place your css theme and meteor will concatenate it into existing css. Meteor have a special way with file order:
HTML template files are always loaded before everything else
Files beginning with main. are loaded last
Files inside any lib/ directory are loaded next
Files with deeper paths are loaded next
Files are then loaded in alphabetical order of the entire path
To achieve your goal, just make sure you the your css is deeper than the theme folder and be aware with the alphabetical ordering
Edit:
If you want to load file from /public, just place <head></head> in one of html file (e.g.: app.html) and reference your stylesheet there.
app.html:
<head>
<link href="/sometheme/theme.css" rel="stylesheet">
</head>
It will refer /public/sometheme/theme.css
Here is my structure within the root folder: css/fonts/ and books/book1.html
Within the css folder I have a stylesheet which has a link to the fonts folder like: src: url('/font/fontName.ttf');
In the books folder, I link the stylesheet through: <link rel="stylesheet" href="../css/stylesheet.css" type="text/css" charset="utf-8">
I have a:
body { color: red } in the stylesheet and all the color was effected as intended. However, for some reason the fonts were not loaded. When I moved the book1.html outside the books folder, and changed the stylesheet link to : <link rel="stylesheet" href="css/stylesheet.css" type="text/css" charset="utf-8">
Can someone please help ?
If you change the following:
url('/font/fontName.ttf');
To:
url('/css/fonts/fontName.ttf');
It will work no matter where your css file is in the directory structure.
It's hard to fully understand your file/folder structure from your image, but does this work in your css?
src: url('./font/fontName.ttf');
(I added a dot before your forward slash)