I need to dynamically link in the CSS (and JS if you know - haven't tested) but when I do that the browser is not rendering the styles?
Here is my code:
<link rel="stylesheet" href="css/test"/>
If I manually upload and save the file as test.css it then works.
<link rel="stylesheet" href="css/test.css"/>
Is there a way to say to the browser, "This is a CSS file. Please disregard that it doesn't have a css extension"?
MORE
The reason is I'm setting up a server that allows the user to create their own CSS dynamically. I'm storing this information in a database and don't want to create a physical (digital) file each time the user updates the css or a new user creates their account. So, the URL might be, href="http://somedomain.com/home.php?user=453&css=true" or something like that and that, if placed in the URL of the browser, would return the raw CSS.
An external style sheet is simply a listing of CSS rules. It cannot contain HTML tags. The <link> tag, which goes in the head of an HTML page, is used to link to an external style sheet. There is no limit to the number of external style sheets a single HTML page can use.
For example, the stylesheet link type is body-ok, and therefore <link rel="stylesheet"> is permitted in the body. However, this isn't a good practice to follow; it makes more sense to separate your <link> elements from your body content, putting them in the <head> .
There are three different ways to link CSS to HTML based on three different types of CSS styles: Inline – uses the style attribute inside an HTML element. Internal – written in the <head> section of an HTML file. External – links an HTML document to an external CSS file.
Yes, It is possible to include one CSS file in another and it can be done multiple times. Also, import multiple CSS files in the main HTML file or in the main CSS file. It can be done by using @import keyword.
Browsers look in the first place at the MIME-type of the content they receive, this is in principle independent of the extension of the file. The MIME type is sent by the web server as part of the HTTP header (the envelope of the file, if you will.)
The correct MIME type for CSS stylesheets is text/css
. If stylesheet files have the text/css MIME type (defined in the HTTP header), your browser will use them to apply the styles no matter what the extension.
If the MIME type is wrong, the result is undefined: it depends on the browser and the HTML version & strictness if the style gets rendered or not. You can check the MIME type by using your browser's debugger.
See this screenshot for an example in Chrome.
Each paragraph has color: red
rule in the corresponding file, but one isn't applied. As you can see, the style in the text/plain file does get rendered, although its MIME type is not correct. The browser does give a warning. The style in the text/html file generated by PHP is not rendered (and a warning is given.)
PHP and other scripting engines allow to manipulate the MIME type however, as I have done in the test.css.fixed.php file (code below.) As you can see, the browser no longer complains and applies the styles regardless of its extension.
In PHP, the MIME type can be set as follows (this is test.css.fixed.php):
<?php
header("Content-Type: text/css");
?>
p.test_css_fixed_php {
color: red;
}
The header
function changes the HTTP header that is sent by the server.
If you don't work with a scripting engine, you can configure your web server to set the MIME type correctly (see e.g. Apache mod_mime configuration).
Note that the HTML version and strictness also have influence on this. In Chrome, styles in a text/html file seem to get rendered anyway when the HTML type is not strict. But you cannot count on that, so it's a quick & dirty fix at best.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With