Menu
CSS can be added to HTML documents in 3 ways: Inline - by using the style attribute inside HTML elements. Internal - by using a <style> element in the <head> section. External - by using a <link> element to link to an external CSS file.
There are three ways of inserting a style sheet: External CSS. Internal CSS. Inline CSS.
As it is with every coding language, there are several shortcuts or hacks with CSS that allow you to write cleaner code, improve design elements, and save valuable time. Furthermore, you can directly insert these snippets to your site using a code editor.
We have different ways to load a CSS File.
1 - HTML - The conventional way to load external CSS files on a page is:
<head>
<link rel="stylesheet" type="text/css" href="file.css" />
</head>
2 - CSS - Using the tag import from your CSS file
@import url("another_file.css");
3 - JavaScript - Using only JavaScript to do it, you should create a Javascript function:
<script type="text/javascript">
function loadCSS(filename){
var file = document.createElement("link");
file.setAttribute("rel", "stylesheet");
file.setAttribute("type", "text/css");
file.setAttribute("href", filename);
document.head.appendChild(file);
}
//just call a function to load your CSS
//this path should be relative your HTML location
loadCSS("path_to_css/file.css");
</script>
4 - JavaScript - Either you can add dynamic definitions such as:
<script type="text/javascript">
var sheet = (function() {
var style = document.createElement("style");
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);
return style.sheet;
})();
sheet.insertRule("span { visibility: hidden }", 1);
</script>
what about:
$('head').append('<link rel="stylesheet" type="text/css" href="{yoururl}">');
Do you mean define CSS again and override previous CSS like?:
<html>
<head>
<style type='text/css'>
* {color:red;}
p {background-color:yellow;}
</style>
</head>
<body>
<style type='text/css'>
* {color:green;}
p {background-color:black;}
</style>
<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." </p>
"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." </p>
</body>
</html>
You could copy the entire style sheet there or of course then include it with php or javascript.But like this, looking at the head CSS stylesheet and overriding all the styles appearing there in the body should work. Not sure if this is clean though.
You could use the @import url("your_styles.css"); method.
If you have access to the stylesheets being called in the head of the document, you can add this at the top of the CSS doc.
You could try adding an alternate <head> to your doc as well, which I do not advise, but if you have to then you can also do this:
<style type="text/css">
@import url("your_style.css");
</style>
If backwards compatibility is not a concern for you, there is also the HTML5 scoped attribute which has been addressed in this question: Does <STYLE> have to be in the <HEAD> of an HTML document?
Hope this helps!
EDIT:
Found two links in regards to @import feature. One is a working draft from Mozilla Developers center which was last updated on Jul 31, 2012:
https://developer.mozilla.org/en-US/docs/CSS/@import
Also a Sitepoint Reference article with browser support stats:
http://reference.sitepoint.com/css/at-import
I would imagine this is still a functional, usable feature when necessary.
Apperently, it seems to work for me, if it looks like
<link href="/main.css" rel="stylesheet" type="text/css" />
but not, if it contains the /cssin rel.
<link href="/main.css" rel="stylesheet/css" type="text/css" />
Just tested this myself, thought about posting this to underline this pitfall.
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