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
Related
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
The issue is CSS Does not effect on website after bundle although all of bundle process is fine
From the view source code page i can see the css file but it does not take any effect on website. The code bellow is what i used to call css and saw from view source code page and from my layout file.
<link rel="stylesheet" type="text/css" src="/Content/css?v2">
Does anyone have any idea for this?
Thank you.
You used
External Style Sheet
With an external style sheet, you can change the look of an entire website by changing just one file!
Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:
your code
<link rel="stylesheet" type="text/css" src="/Content/css?v2">
try like ths
src should change to href
<head>
<link rel="stylesheet" type="text/css" href="/path/yourcssfilename.css">
</head>
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 am trying to add a css file to a basic html file (in /dashboard along with the css file) and it is not working:
#{
ViewBag.Title = "Index";
}
<head>
<link rel="stylesheet" href="~/Views/Dashboard/Dashboard.css" type="text/css" />
</head>
<body>
<h2 id="yes">Index</h2>
<h1>#ViewBag.test</h1>
</body>
I have tried multiple ways, including adding the file to the contents folder, and adding
#Styles.Render("~/Content/css")
Is this a syntax issue? Or a lack of understanding of how the layout system works? Still wrapping my head around asp.net and MVC...
You are not supposed to be loading CSS under the #section Scripts. There's a reason CSS is loaded first!
For example, check this reference here by Patrick Sexton: Call CSS First
Ensuring the calls for CSS
files come first helps ensure the browser gets it first. This saves
time by reducing network calls and not letting javascript activity
delay the browser from getting CSS
Real Solution - Loading your CSS First
Step #1
If you want to load different CSS files depending on the .cshtml file, and assuming they all use the same _Layout.cshtml, you can do something like this:
On your _Layout.cshtml, in between your <head> HTML tag, write this:
#RenderSection("Stylesheets", required: true)
Putting this in your <head> tag will ensure it gets loaded first!
Note: The required: true part is optional.
Step #2
Then, on your .cshtml Views, add this at the top:
#section Stylesheets {
}
And inside there, load your <link> tags.
Try this below at end of the body tag
#section Scripts
{
<link href="~/Content/yourcssname.css" rel="stylesheet" />
}
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