How to Attach an External CSS Style Sheet
Why You Should Link to an External CSS Stylesheet
If you incorporate all of your CSS into your HTML, your web design it becomes bloated which causes the files size to increase, which causes your page to load slower, which causes people to leave your website in a mad fit to opt for a faster loading site. Plus it just makes your code look better in my opinion.
How to Attach It
Typically, most web designers have a nice and neat hierarchy of folders for which to place certain types of files. Notice I say typically because there are some who do not. In this case, let’s place out CSS stylesheet in a folder called “css” which is directly located in the root folder. The stylesheet is named “style.css”.
To link to this file is simple.
The link reference is located in the the head section of your site between these tags, <head></head>. Usually they are placed just before the ending </html> tag or right below the meta tags. All we have to do is use a little HTML 101 and place the following link reference which calls your stylesheet.
<link href=”/css/layout.css” rel=”stylesheet” type=”text/css” media=”screen, projection” />
Link Explained
This basically says to link to stylesheet.css file which is located in the folder named css. The rel stands for relative which says the link is relative to a stylesheet.
Type is pretty self explanatory. Most style sheets are a text format css stylesheet.
Media specifies what the intended medium the site will be displayed on. If designing for the web you can just put “screen, projection ”
There are a host of other mediums to choose from including:
- All
- Aural
- Braille
- Handheld
- TTY
- TV
You can have multiple stylesheet links for different occasions. Let’s say you want a printer friendly version of your page as well as a regular viewing page. This would be coded as:
<link href=”/css/layout.css” rel=”stylesheet” type=”text/css” media=”screen, projection” /> <link href=”/css/layout.css” rel=”stylesheet” type=”text/css” media=”screen, projection” />
Hopefully you found this useful and will start applying to your websites. If you like this, tell your friends, leave us a comment and make sure to subscribe to our RSS Feed.
