How do you put <style> in css?

Problem

I want to take my css and put in to its own sheet.

How I do this? This my code

<style> body{color:red;} </style>
Problem courtesy of: SpeedRacer

Solution

You save your CSS into a separate file, like style.css and include in inside your <head> tag:

<head>
    <!-- other stuff such as metas, title, etc. -->
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
Solution courtesy of: Jakub Michálek

Discussion

You will need to create a css file that you link to in the head of the page you want the css by using a link like shown above but be sure to add it above any jquery links and that to speed up the time it takes your page to load.

link to add to header:

<link rel="styesheet" type="text/css" href="style.css"/>

example css file:

/*this css demo file i will call style.css for demo purposes */

/* div styles by id */
#id
{
    color:#000000;
    float:right;
    border:solid 1px #929292
}

/* div style by class */
.class 
{
    color:#000000;
    float:right;
    border:solid 1px #929292
}

/* class style within a div id to use that style only when an item  
* is within that certain div id
*/
#id .class
{
    color:#000000;
    float:right;
    border:solid 1px #929292
}

i hope this helps.

Discussion courtesy of: Parody

You would not include the <style></style> tags in your CSS. Those tags are markup meant for the HTML document only. Here's what you would do:

Create a CSS file (for example custom.css). Inside the file you would have the following:

body {
    color: red;
}

Then in your HTML document, add the following markup to link to your external stylesheet:

<link type="text/css" rel="stylesheet" href="custom.css" />

Note: You may have to adjust your href value depending on your file structure.

Discussion courtesy of: War10ck

This recipe can be found in it's original form on Stack Over Flow.