Make an External Style Sheet File (.css file extension)
How to make an external style sheet file:
Things you will need include the code you place inside the <HEAD></HEAD>of your website pages, a text file, style sheet code for your text file, and an FTP connection to your website. All of this is explained below.
Steps to make a .CSS file on Windows
1. Open your website directory folder
2. Create a new text file. Right click within your website folder + Select New > Text Document
3. Name the text document "style" without quotes and save it.
Note: You have now created a text file with the extention ".txt" which we will later change to ".css"
4. Open a HTML web page you want to apply the style sheet to. Place the following code inside the <HEAD></HEAD> of your web page.
<link rel="stylesheet" href="style.css" type="text/css">
My code looks like the example below but yours may differ slightly especially in areas of META. Just make sure the style sheet code is correct:
<HTML>
<HEAD>
<TITLE>Mike's BBQ and Outdoor Supplies</TITLE>
<META name="description" content="Mike's BBQ and Outdoor Supplies">
<META name="keywords" content="bbq,supplies">
<META name="distribution" content="Global">
<META name="robots" content="index,follow">
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css">
</HEAD>
5. Now you are done editing the HTML file. Next add styles to your text file you created in steps 1-3 . Below is just for example purposes to give you a general idea of the format.
body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-color: #F0F0F0; }
.nav { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; }
.content { color: #333333; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif }
.content2 { color: #853A2C; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif }
a:link { color: #AB555F; text-decoration: none; }
a:visited { text-decoration: none; color: #AB555F; }
a:hover { text-decoration: none; color: #BF9A64; }
a:active { text-decoration: none; color: #AB555F; }
Note: The final steps include uploading your edited HTML file and your "style" text file via FTP. You will also be converting the text file ".txt" to ".css"
6. Make your FTP connection and navigate to your web directory.
7. Upload your edited HTML web page and text file "style.txt" to your same web directory.
8. You will now need to change the "style.txt" file name. The method for changing file extension differs depending on what FTP client you are using. For example IP Switch WS_FTP professional allows you to simply click a filename twice and change the extension. You will need to change "style.txt" to "style.css" without quotes.