This question already has answers here:
calling multiple external css files at once to html page
(5 answers)
Closed 7 years ago.
I'm just wondering if there's a way to link multiple css-files to one html-file without having to write down every link like below?
<link rel="stylesheet" type="text/css" href="style/alla.css">
<link rel="stylesheet" type="text/css" href="style/meny.css">
<link rel="stylesheet" type="text/css" href="style/fotografier.css">
<link rel="stylesheet" type="text/css" href="style/footer.css">
You can merge them into one, there are multiple tools to do that:
http://www.shrinker.ch/
https://github.com/zenorocha/browser-diet/wiki/Tools#css
Related
This question already has answers here:
In which order do CSS stylesheets override?
(11 answers)
Does the order of css stylesheet definitions matter?
(7 answers)
Closed 12 months ago.
I'm trying to use Google Fonts, is there any difference between the 1st case and the 2nd case? For example, whether the font defined in the styles.css file is rendered in the browser late in the second case.
<!-- 1st case -->
<link rel="stylesheet" href="google font url">
<link rel="stylesheet" href="./styles.css">
<!-- 2nd case -->
<link rel="stylesheet" href="./styles.css">
<link rel="stylesheet" href="google font url">
If you wanna use the font you are getting from Google in styles.css you would wanna take the first approche, this one:
<!-- 1st case -->
<link rel="stylesheet" href="google font url">
<link rel="stylesheet" href="./styles.css">
Otherwise, you couldn't, cause CSS is getting interpreted top to bottom. If you wanna see a difference use for example this font in this order:
<link href="https://fonts.googleapis.com/css2?family=Shizuru&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles.css">
And in your styles.css, define the following:
*{
font:inherit;
}
html{
font-family: 'Shizuru', cursive;
}
Take a look at the page, and then change the order like so and see the difference:
<link rel="stylesheet" href="./styles.css">
<link href="https://fonts.googleapis.com/css2?family=Shizuru&display=swap" rel="stylesheet">
In general, CSS files are loaded in the order that they appear in the page.
Thus, if your second link somehow conflicts with the first one the later will apply.
Yes it make a difference.
There is a simple rule the later defined overwrite earlier defined styles.
In 1st case you have some control over the final page style because you can modify attributes defined from 3rd party styles.
This question already has answers here:
Can't get stylesheet to work with ejs for node.js
(5 answers)
Closed 2 years ago.
(Beginner here...)
My CSS won't link to my HTML. I am using GOORM IDE, I have read other questions on this topic and tried the solutions from them but none seem to work (when I apply the CSS inline, it works perfectly), I have so far tried:
Moving the main.css to the same folder as the header.ejs file
Adding type="text/css"
Changing the href to:
main.css
/main.css
/stylesheets/main.css
/public/stylesheets/main.css
../stylesheets/main.css
None of which have worked. Any ideas? I want to keep the CSS in a separate folder if possible. I have included a screenshot of the file structure on GOORM also if that is useful.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght#0,400;0,700;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="main.css">
mmm I'm not sure really but I think your path based on the image should be
<link rel="stylesheet" href="stylesheets/main.css">
Yes, I also think, there should be the path to the .css-File.
for example, I called my css in the head like this:
<link rel="stylesheet" href="app/css/app.css" />
So you need to call your file:
<link rel="stylesheet" href="public/stylesheets/main.css" />
Btw: is the link to the fonts correct? Is this a valid repository?
Tested in VSCode, this works for me:
You've got your header.ejs in views/partials and your main.css in public/stylesheets.
This means your link has to move up two directories. Use:
<link rel="stylesheet" href="../../public/stylesheets/main.css>
This question already has answers here:
Is it possible to have multiple css files for a single html file (to modularise the style sheets) [duplicate]
(2 answers)
Closed 4 years ago.
I'm new to HTML and I'm trying to href 2 things. I don't get an error, but my style.css sheet doesn't work. Any ideas?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css; style.css">
Do them separately:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
This question already has answers here:
Link a .css file in another folder
(5 answers)
Closed 10 months ago.
This is what I'm trying to link into my HTML and it's not working I tried taking off the two periods and that doesn't work either.
<link rel="stylesheet" style="text/css" href="..CSS/file.css">
In your case:
<link rel="stylesheet" style="text/css" href="../CSS/file.css">
More cases:
You can go up directories with ../
So for each ../ you will go up 1 directory
If you are in /public/files/ you can do
<link rel="stylesheet" style="text/css" href="../CSS/file.css">
to get into /public/CSS/
If you need to acces the root it could be:
<link rel="stylesheet" style="text/css" href="../../file.css">
to get into /
You can also link it from the current script directory:
<link rel="stylesheet" style="text/css" href="./CSS/file.css">
If you are in /public/files/ it would be /public/files/CSS/
And last from root to the directory:
<link rel="stylesheet" style="text/css" href="/public/CSS/file.css">
It would be /public/CSS/ and your file
<link rel="stylesheet" style="text/css" href="../CSS/file.css">
if you want to import css files to another css file use below syntax:
#import "url or path to file";
<link rel="stylesheet" style="text/css" href="../../CSS/file.css">
Or use full url :
<link rel="stylesheet" style="text/css" href="://www.yoursite.com/file.css">
In full url, :// is instead specify http:// or https://
This question already has an answer here:
Why is CSS not applying to HTML?
(1 answer)
Closed 6 years ago.
one of my students has the following code:
<title> Portfolio
</title>
<link rel="stylesheet" type="text/css" src="portfolio1style.css">
</head>
portfolio1style.css is in the same file as HTML file and is definitely spelled correctly.
the CSS works when we put it in the doc internally.
What's going on here?
Thanks
Try to add href="portfolio1style.css" instead of src
You want it to look like this:
<link rel="stylesheet" type="text/css" href="portfolio1style.css">
Switch the src to href