Where should I put my css file if I have only one file (style.css) ?
I use sass for my project and I convert all my sass files to only one css file.
But I don't know where I have to put this file.. because normally I would create a static folder for each app but I think that makes no sense if I have only one file...
You just need to put the CSS file somewhere and tell HTML were to find using the link tag.
For example, if the file is in the folder "style" the tag will be.
<link rel="stylesheet" href="/style/file.css" />
Usually the main css style fail was in the root folder or in a style folder.
Related
I have trouble to make my Css and Javascript working. Here is a capture of my current work. I have created a folder with my different html pages and same for Css and js (i only have one css for everything and several js).
It worked when all my htmls, Css and Js are into the main folder but when it comes to organize into severel foldes, nothing is working except my Htmls.
enter image description here
Thank you very much.
Try this out
<link rel="stylesheet" href="/css/style.css">
Try this for the CSS
<link rel="stylesheet" href="../css/style.css">
All your files are in different directories and if you have to link your HTMLs with the CSS and JS files, you have to get out of the HTMLs directory to the parent directory. And, then specify the path to the CSS, JS, and Images.
Use this to reach the parent directory of the current directory.
../
I see you are using Visual Studio Code, there is a trick for call CSS and Javascript
#Styles.Render("~/css/style.css")
#Styles.Render("~/css/yourstyle.css")
and is a good practice to separate css from javascript folder
#Scripts.Render("~/Scripts/yourscript.js")
My bootstrap css file is located at
C:\Users\SCEA\Downloads\bootstrap-3.3.7\css
and for linking this to my php file I have given absolute path as:
<link href="C:\Users\SCEA\Downloads\bootstrap-3.3.7\css" rel="stylesheet">
but the effect of css is not visible.Is my css file not getting linked?
You might have a typo before css. The backslash before it might need to be a period.
<link href="C:\Users\SCEA\Downloads\bootstrap-3.3.7.css" rel="stylesheet">
If are running server in your local computer I suggest moving this file within the server document root.
Your comment:
css is a folder inside bootstrap-3.3.7
Probably in the CSS folder are the actual css files.
You need to refer to the actual CSS files and not to the folder itself.
Here is a quickfix using CDN:
Put these links in and it works guaranteed
I'm trying to use the angular2-busy library in an angular project created with the CLI, but am having an issue importing the stylesheet:
<link rel="stylesheet" href="/node_modules/angular2-busy/build/style/busy.css">
The browser is telling me that it cannot find the file, even with the correct path. I also checked that the file exists, and it does. When I take out the rel="stylesheet" I don't get the error, but then the animations don't work.
Here is the package I am trying to use, if anyone is curious:
https://www.npmjs.com/package/angular2-busy
Angular CLI have it's own way to initialize your global css/js.
They are located in .angular-cli.json configuration
Locate "styles": and add your css there
Example :
"styles": [
"../node_modules/angular2-busy/build/style/busy.css",
"styles.css"
],
Hope that helps.
Basically there are three different ways to do that :-
By adding it to the "styles" array in angular-cli.json file as is shown by #penleychan in his answer.
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
]
You can directly import the css file into styles.css file (or any other css file) that is included in "styles" array in angular-cli.json file by adding the #import statement at the top of that file.
#import "~bootstrap/dist/css/bootstrap.min.css";
Include the css file in index.html page by adding a link element.
<link rel="stylesheet" type="text/css"
href="node_modules/bootstrap/dist/css/bootstrap.min.css"
/>
You can find a more elaborated explanation and a few more alternatives at this link
How to Use Angular with Linked Cascading Style Sheets (CSS)
Always use LINKED CSSS rather than the compiled and embedded JavaScript memory version of CSS Google Angular uses. Why? Linked <link> external CSS is superior in every way to embedded CSS, mainly because linked CSS is cached across thousands of page views, visits, and users online, saving you huge bandwidth values with increased CSS rendering speed in the browser, while implementing simpler, faster CSS management, overall.
HOW TO FIX ANGULAR FOR LINKED CSS
In angular.json delete all the references to CSS files under "styles". It should look like this now:
"styles": [],
Move your CSS files to the"src" folder inside your project, then add links <link> to your external CSS files inside index.html. Add in your link paths to your CSS file starting at the "src" folder and including the "styles" folder or any folder system you desire (see below). You can store your css wherever you want in your project now as long as those folders of files are under your "src" root folder. My physical CSS files in my project for the path below now sit under "src/styles". So the link path should just be my "styles" folder plus the file name:
<link href="styles/mystyles.css" rel="stylesheet" />
Any CSS files for bootstrap, font-awesome, etc. that you want in your project have to be manually copied from your "node_modules" folder in your project into a folder under your "src" folder, just like in the location used for the CSS file above in #2. Or, you can reference them from some fully qualified url online. If you want to create a link to them as above in "index.html", or import them into the html file directly (example below), that will also work. If you were importing them before from the "node_modules" folder that will not work as the Angular CLI or webpack resolved those paths by compiling your CSS imports into JavaScript. After you move those CSS files and link or import them from the src folder, they will not be compiled into Angular JavaScript now. When using #import, be sure to drop your bootstrap and font-awesome CSS files in the same "src/styles" folder as your main style sheet and import them into that stylesheet like this:
<style type="text/css">
#import "bootstrap.min.css";
#import "font-awesome.min.css";
</style>
In the same angular.json file above, under the "assets" JSON setting, add a reference to the location of your CSS files in #2 and #3 so the builder can copy them into your dist folder. Any CSS files linked or imported from that folder will get moved by the "dist" folder system when Angular is compiled. Note the new styles path at the bottom. If you have CSS in other folders you can add them here as well. This tells the builder to create the CSS directories in the "dist" folder Angular uses and copy all the CSS files inside them, so when you build for production your index.html links point to the right CSS files on the server:
"assets": [
"src/favicon.ico",
"src/assets",
"src/api",
"src/styles"
],
You now have a powerful set of link elements to all your CSS in the head of your index.html file and can edit them in the Angular project like you normally do, knowing they will work in both the Angular development test server and in your dist production copy. Your website will also benefit from browser caching of CSS one time in memory and permanent file caches.
It took me a day to dig through documentation and testing to figure out what should have been a natural part of any simple website API with linked CSS. I'm sorry Google Angular made this so convoluted. But this change works great!
This simply removes your CSS from the compile and build angular system that pushes all your CSS into a JavaScript file, which simply embedded your CSS into an inline style sheet block in the memory of your browser and head of your HTML page. Using your own linked CSS html tags is far superior and allows better caching and control of CSS cascade rules.
Good Luck!
Try
<link rel="stylesheet" href="node_modules/angular2-busy/build/style/busy.css" >
You are missing the self closing / at the end of your code. It's possible the browser is not fixing this for you.
<link rel="stylesheet" href="/node_modules/angular2-busy/build/style/busy.css" />
Also removing rel="stylesheet" would definitely not fix the problem since the browser needs to know exactly what kind reference you are referring to.
If fixing the closing tag does not work then your path is wrong. You can also try adding a ../ to the beginning of your path. This will make it relative to the folder the site is in.
<link rel="stylesheet" href="../node_modules/angular2-busy/build/style/busy.css" />
How to use 2nd CSS file on my WordPress website ?
Here is my code:
<link rel="stylesheet" type="text/css" media="all"
href="http://www.mydomain.com/wp-content/themes/twentytwelve/style.css" >
But I need to extra CSS file with seam themes. Now I am how to connect my new CSS file? Please anybody help me.
Just use that exact code and duplicate it as much as you want.
Just change the href to each new file name.
You need to be aware that any changes made to the theme will be erased if the theme is updated.
I suggest you read up on FTP and upload the CSS files in the CSS folder for your theme. You need to know where the CSS's location is for it to be called effectively.
Once you have uploaded the CSS file to the theme's folder, do the following:
In WordPress administration, click on the left side menu item Appearance, then click on the sub-menu item Editor. You will see on the right hand side a whole lot of links show up. Click on the header.php link.
In the header.php file, you'll notice a section that starts with <head>. Enter the path to where your CSS file is located on the server like so:
<LINK href="link/to/your/stylesheet.css" rel="stylesheet" type="text/css">
Click on the Update File button on the bottom of the page. Verify your work.
You can have as many css files as you like. The attributes that are loaded from the last css file will override attributes of any previously declared and conflicting attributes but you can specify them in as many files as you like. You can "connect" or link you new css file in your html using this :
Looks like you needed it for wordpress themes.
You need to have one main style.css file. You have to include it by using type="text/css"/>. Once this is done you can add additional css files by doing something like this: /address-to-css-file.css" type="text/css" media="screen" />. bloginfo('template_directory') is a function which prints out the directory of your template.
You can also use #import in your main stylesheet (style.css) . Add these lines:
#imports url('link to css');
Or you can use
http://codex.wordpress.org/Function_Reference/wp_enqueue_style this link has a description of how to use this.
I have made a webpage in Servlet and now i want to add a stylesheet.css to it
Where should i exactly put the .css file ? like in ROOT of tomcat or some where else and what exact path i have to use??
link href='style.css' rel='stylesheet' type='text/css'
Thanks
Sundhas
Put the file somewhere in WebContent. There where your JSP files also are. Or did you abuse the Servlet to generate the HTML output? Well, at least, the public files needs to be placed in the WebContent folder. The folder name might differ from environment to environment, but it is at least the very same root folder where the WEB-INF folder resides. You normally place public content there.
Thanks EveryOne!
I figured this out
Well actually you don't have to paste the FILE.CSS in Root of tomcat
you actually have to paste the .css file where your netbeans Projects reside
for example C://Documents and settings/NetbeansProject/ProjectName/Web
Paste the .Css over there
and so this remains same : link href='style.css' rel='stylesheet' type='text/css'
~Sundhas~
Put your css into the webcontent folder. In the href provide an absolute link to the css and for html formatting use out.prinln statement.
Since you are using a relative path, it should be in the same location as your jsp. If you write your HTML in the Servlet, it should be placed in the root of the webapp.