Cascading Style Sheets/Inserting
From WikiKnowledge
There are four ways to put CSS rules in a webpage.
Contents |
[edit] Embedding
You can use a <style> tag in the header of a webpage to hold CSS rules. You may also want to include the styles inside comments (<!-- -->) to hide them from older browsers which might not understand them.
<style type="text/css">
<!--
body{background-color:blue;}
-->
</style>
A word of warning about putting the styles inside comments, in XHTML, a server is allowed to simply remove anything inside comments, which means the style sheet will never get sent to the user’s browser. Another way is to enclose the styles in a CDATA section like this
<style type="text/css">
<![CDATA[
body{background-color:blue;}
]]>
</style>
[edit] Link
The best way to include CSS rules in a webpage is to put them in a separate text file with the extension of .css, and then link to it using the <link> tag. This method will allow you to use a single file to control how your entire website looks.
<link rel="stylesheet" href="path.css" type="text/css" />
Replace path.css with the name and path of your CSS file. Using this method you can also set the media attribute to give your page different stylesheets for different media. For example you can have one file which will control the design of the site when you look at it on a computer screen and another to control how the site looks when you print it. The possible values for the media attribute are:
| Value | Used for... |
|---|---|
| all | all devices. |
| braille | braille devices. |
| embossed | paged braille printers. |
| handheld | handheld computers. |
| printers and the print preview function in web browsers. | |
| projection | projectors. |
| screen | standard color computer monitors. |
| speech | speech synthesizers. |
| tty | media using a fixed-pitch character grid. |
| tv | televisions, with low resolution, low color and limited scrollability. |
The values are not case sensitive.
Linking a style sheet to an XML document can be done with this code
<?xml-stylesheet type="text/css" href="path.css"?>
again replace path.css with the name and path of your CSS file.
[edit] Import
A second way to link to other style sheets is to use the @import rule. The two examples below show how to use the import rule. Both rules are equivalent.
@import "path.css";
@import url("path.css");
An import rule must be the very first thing in a style sheet to work.
You can also give a comma separated list of media types after the url.
@import url("path.css") projection, tv;
[edit] Inline
Most tags in HTML/XHTML take a style attribute which allows you to include styles in the HTML/XHTML document. This is best used when you want to apply a style to a specific part of a webpage once.
<body style="background-color: blue;">
Here you give the body element a background color of blue. This technique is best avoided as it is similar to using deprecated presentational mark-up.
