I know I can include CSS on my page like this:
<style>
.style{
..
}
</style>
How do I add an external stylesheet file in an HTML page?
Add a comment
|
4 Answers
In your HEAD, add:
<link rel="stylesheet" type="text/css" href="your_css_file.css">
the css file itself does not contain <style> tags.
6 Comments
Jonno_FTW
you forgot
media="screen" and title="mycss"
ceejayoz
@Jonno_FTW Those are not required. Default behaviour is good enough for almost all common situations.
Geert
@Jonno_FTW: why would a title attribute be useful? Is it even allowed? Never seen it before in a
<link>.
djn
Titles are useful when your page has an alternate stylesheet (say a high-contrast or larger-font one): in Firefox you can switch between stylesheets with View->Page Style.
Nav
"In your HEAD, add..." :)
|
The simplest way to do so is to add a stylesheet link to your document HEAD section:
<link rel="stylesheet" href="style.css" type="text/css">
Doing so will reduce the performance on the first load (since the system must request two files instead of one) but improve subsequent performance because the style sheet remains in cache for a while.
Comments
From StackOverflow's page:
<link rel="stylesheet" href="http://sstatic.net/so/all.css?v=5885" type="text/css">
I don't think it will improve speed much unless the same CSS file is shared across multiple webpages in your website (so the browser can cache it). Otherwise there's the penalty of creating an extra HTTP connection to retrieve the CSS.
3 Comments
Sneakyness
Don't forget you can look at the source of any website to see how they do it.
rui
I guess the most common is to add a link so that you can organize your code better and also have a UI template that works across the whole website. Overall, it's better to stick with a standalone CSS. (not sure what you meant Sneakyness).
Mike
In most browsers you can right-click and "view source" to see how that website is pulling in its own css, whether it's inline or external.
The syntax of adding external CSS to an HTML file is
<link rel="stylesheet" href="style.css">
But it will be easy to remember and more consistent if I could do it as
<style rel='stylesheet' href="/style.css"></style>
