Tuesday, December 24, 2024

Creating an External Style Sheet

Share

Creating style sheets is fairly simple. To create a style sheet you will need to have some understanding of which selectors, properties and values work together. You can get that information in the CSS Properties section.

Creating an External Style Sheet

Open a text editor such as Notepad. Decide which tags you want to be used as selectors by your style sheet. Example: if you want your <p></p> tags to use your style sheet then you will need to put “p” (without the quotes) in your open text editor. After each tag press enter. Do this for every tag you want to affect.

Here is how it should look:

p

a:link, a:active a:visited

hr

Now you will want to take a look at the properties available for each of the selector we put in our css document. After we decide which properties and values we want to apply to our selector we enter them in the text editor next to the selector.

Mega Marketing Contest…

Here is how it should look:

<STYLE>
P
{
FONT-SIZE: 20pt;
FONT-FAMILY: verdana,helvetica;
align: center
}
A:link
{
FONT-SIZE: 10pt;
COLOR: #0000cc;
FONT-FAMILY: verdana,helvetica;
TEXT-DECORATION: none
}
A:active
{
FONT-SIZE: 10pt;
COLOR: #0000cc;
FONT-FAMILY: verdana,helvetica;
TEXT-DECORATION: none
}
A:visited
{
FONT-SIZE: 10pt;
COLOR: #0000cc;
FONT-FAMILY: verdana,helvetica;
TEXT-DECORATION: none
}
HR
{
WIDTH: 400px;
COLOR: #ff0000;
align: right
}
</STYLE>

Save the css file with a *.css extension. By default, Notepad will place a *.txt extension. To change the extension just type it along with the name of the file when you save it. Note: To change the extension you must have “Hide file extensions for known file types” turned off. This is done by opening Windows Explorer and selecting “View, Folder Options, View (tab)” and uncheck the box next to “Hide file extensions for known file types”. After you have saved your *.css file you will need to upload it to your Webserver.

Last, you will need to link your *.css file to your Web documents

Linking an External Style Sheet

If you created a style sheet with a text editor and named it whatever.css, you will need to link your documents to that style sheet. Here is how it’s done.

Upload the whatever.css file to your root directory on your Webserver.

Create the follow code between the<head></head> tags of every document you want to be affected by the whatever.css file:
<LINK REL=STYLESHEET TYPE=”text/css” HREF=”whatever.css”>
If you place your Web pages in a folder in the root directory and the whatever.css is located in the root directory then you will need to modify the link to look like this:
<LINK REL=STYLESHEET TYPE=”text/css” HREF=”../whatever.css”>

Murdok provides free highly informative newsletters for web developers, IT professionals and small business owners. We deliver 50 million email newsletters per month and have over 4,000,000 unique opt-in subscribers. From our extensive range of email newsletters we can provide you with a selection of newsletters that best meet your interests.

Table of contents

Read more

Local News