https://imgur.com/a/Hw2ThMR --Webpage
https://imgur.com/a/73H0bpR --CSS file
cant seem to link css file I have tried ALOT and it just wont work. i feel like its a directory issue somehow but i never had such a issue like this before. I have troubleshot quite a bit. and its getting pretty frustrating considering i should be studying, but I'm stuck here with this issue i know i need to fix and understand.
You wrote <link rel="stylesheet.css" href="stylesheet.css"> but correct
<link rel="stylesheet" href="stylesheet.css">
Background: For the website I am on (a roleplay forum) you are allowed to use custom css and html in posts. To do this, you have to use a [dohtml] BBCode tag. Then you can insert any css/html you wish.
Problem: Some users have used linked stylesheets to make theirs show up. And it works. But mine doesn't.
Other: I am unable to use a tag, because it's not a full html document. I am using it in the same manner, but for some reason mine is not working. Can anybody help me with this? Is there something wrong with my CSS?
<link rel="stylesheet" type="text/css" href="https://www.dropbox.com/s/23ktd8q6bdekhi8/scorix.css" />
EDIT: When someone links to this one, it works fine
<link rel="stylesheet" type="text/css" href="https://www.dropbox.com/s/w2uh6gphwjgmenu/betteralone.css?dl=1" />
The link should be a direct download link. This should work (at least, let's hope so):
https://dl.dropboxusercontent.com/s/23ktd8q6bdekhi8/scorix.css?dl=1&token_hash=AAFS1EYWJejOVo_PQ8c8RSK0rRbKC0kPt0fXEz5T7i5A7Q
Other than that, I don't see anything wrong with your HTML link code and your CSS validates flawlessly.
i came across two type of using external style sheet in one way
<link href="CSS/div1.css" rel="stylesheet" type="text/css" />
<link href="CSS/div2.css" rel="stylesheet" type="text/css" />
<link href="CSS/div3.css" rel="stylesheet" type="text/css" />
importing all the style sheet like this
and the other one is using one stylesheet and importing other stylesheet within it
<link href="CSS/div1.css" rel="stylesheet" type="text/css" /> and inside this
#import url('../CSS/div2.css');
#import url('../CSS/div3.css');
.crazy
{
display:block;
background-color:Black;
color:White;
}
i read somewhere that the second approach is better so i built a demo and checked that one in firebug in the first case it is taking 16ms and also downloaded less byte of data but in the second approach it takes 109ms and downloaded more bytes of data so iam confused which approach is better.
the first one is the suggested one because it's fasters for the browser to render them More on Steve's site
Go with the first! Your test results are pretty clear!
Historically, #import has been used because it wasn't support by older versions of IE and Netscape, making it easy to hide more advanced CSS from those browsers. Nowadays that isn't so much of an issue, and other techniques are recommended when you need to target specific browsers with CSS.
As for your tests, whilst there are technical reasons why the second approach would be 'slower', I'd argue a simple look at Firebug can hardly be used as empirical evidence.
I always go for the first as W3C shows
http://www.w3schools.com/css/css_howto.asp
I am updating a website to add some mobile friendly pages.
At the moment we have one big css page with everything in. My idea is to put all the mobile specific css into a separate file and then link both sheets. The mobile css will overide anything in the default css (bigger buttons etc).
Im quite new to css, what is the best practice?
One large CSS file leads to fewer HTTP requests, which can improve performance.
Several smaller files leads to easier organization which will make development and maintenance cheaper and easier.
I have a few stylesheets for any significant app I've worked on.
base.css - always applied.
print.css - this hides menus and other parts of the screen not really good for a printed page. Triggered by the media attribute.
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
ie6.css - applied second, and if and only if it's IE6. I hope to throw this out someday.
<clientname>.css - one stylesheet for each client that wants the site to have their logo/etc.
If I were trying for blazing fast performance, I'd combine them. However, I know sites getting hundreds of millions of hits a day don't bother, so I'd strongly recommend splitting them however makes sense to you, in order to make it easier to maintain.
For the most part, extra hardware is cheaper than extra developer hours and/or more bugs. Maintainability is usually the highest goal for me.
yes you should use more than one css file rather using one big file.
It helps you while maintaining your site also use different definitions (classe or id names) in different css otherwise it will take the one which declared later.
For example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="/stylesheets/stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/lightbox_new.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/another_css.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Your content here -->
</body>
</html>
In the case of styles for specific clients, I would say that it is a best practice to separate them.
Using separate stylesheets for different media is easily done.
<link href="browser.css" media="screen" rel="stylesheet" type="text/css" />
<link href="mobile.css" media="handheld" rel="stylesheet" type="text/css" />
<link href="print.css" media="print" rel="stylesheet" type="text/css" />
In this case, all the style will be downloaded and applied when the media type matches the device.
However there is another method which is neat if your app is designed for mobiles, because it downloads the stylesheet ONLY if the media type matches.
<style type="text/css" media="screen">
#import "screen.css"; /* Note that some (older?) browsers don't support #import, so you may have to download this sheet the traditional way even on mobiles */
</style>
<style type="text/css" media="handheld">
#import "mobile.css";
</style>
<style type="text/css" media="print">
#import "print.css";
</style>
I'd use two as well. Keeps things more tidy when editing for each device (computer and mobile device). I have one huge CSS stylesheet which I use for all browsers with the help of the css browser selector script, and I hate having to scroll through 6000+ lines of CSS, so I'd say the best way at least from experience is to separate them out!
Group your CSS meaningfully and serve it carefully.
For example, if you have CSS that is applied through out your site (e.g. CSS reset) make it separate file and include it for each page.
Then for each logical component of your site create separate CSS file and serve it on pages that belong to respective logical component. (Say you have a blog and polls on your site, if blog never needs CSS for polls you don't need to include it in blog.) But bare in mind this isn't practical for small sites.
Group your CSS by media for which they are used. If you have style sheet for printing keep it separate of your basic sheets if it makes sense (don't use separate files if you only have single CSS property for printing since it is not worth the request time).
Keep in mind that more sheets assume more HTTP requests and each request costs certain amount of time.
So there isn't explicit way these thing should be handled, it's all about making your CSS easier to maintain and easy for client to download (less HTTP requests, smaller size etc.)
I would use multiple style sheets to keep things better organized, then compress them into one file before putting them on the site, to improve performance.
You should have a range of CSS sheets for various tasks, else things get messy fast!
I think its better to use 1 for style, 1 for ie6 one for ie7. Nothing more.
Organization should be automatic inside the style.css. Using logical classnames and comments.
Less httprequests is good. Less markup is good. :)
I prefer two style sheets myself. The first one, and the one that always comes first in my HTML, is a reset style sheet. The implementation of this first style sheet helps web pages to display more consistently across different browsers.
Often, it is not necessary to create more than one additional style sheet. Generally, CSS commands specific to IE are ignored by Firefox and other compliant browsers and vice-versa. The real problem arises when an item on a page must be positioned and sized to be exactly the same across multiple browsers - at that point, more than two sheets become necessary although it is sometimes possible to get good results through proper ordering within the sheet.
Is it just me or does a site like:
http://www.infoq.com/news/2009/04/fubu-mvc
often load without a style, because the author put the stylesheet over on:
http://cdn1.infoq.com/styles/style.css
I know this is all trendy way to do css, image and javascript files now. But I seem to bump into this issue all the time. Is it only a Firefox issue?
I just saved the source locally and tested it out. It seems that when the styles do not appear, the LINK element is resolving as:
<link rel="stylesheet" type="text/css" media="screen" href="http://cdn3.infoq.com/styles/style.css;jsessionid=2BAD2D184D56C3163ADC70B99E711F47" />
..the important part being the ';jsessionid....' which is knocking the css out of commission.
On a reload, that jsessionid apparently kicks into action for some reason, and the LINK element resolves normally as:
<link rel="stylesheet" type="text/css" media="screen" href="http://cdn4.infoq.com/styles/style.css" />
I'm not sure what is actually causing the jsessionid to not work, then work on reload...but that seems to be the culprit in one way or another. Also, I had the same exact experience in IE7 and Safari...so definitely not a browser specific thing.
I believe the issue is because firefox checks for crossdomain.xml to see if the request is allowed, and IE just grabs it regardless.