 |
|||
|
|||
How To Create And Link Style Sheets
Submitted by William Richard on 2001-11-09.
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. Below you will find a downloadable example as well as an inline example.
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
Here is how it should look: click here
You can add more later.
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.
Here is how it should look: click here
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 "Veiw, 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.
Creating Internal Style
With internal style sheets you do not have to create an external css file. Internal style sheets are included in each document with the tags.Here is how it's done:
Create your <style></style> tags between the <head></head> tags. Include all the selectors, properties and values you want to affect your document. When you are done it should look something like this:
<head>
<style>
<!--
.normal {
font-family: Verdana, Helvetica;
font-size: 10pt;
color: #555555
}
td {
font-family: Verdana, Helvetica;
font-size: 10pt;
color: #202020
}
a:link, a:active, a:visited {
font-family: Verdana, Helvetica;
font-size: 10pt;
color: #0000cc;
text-decoration: none;
}
a:hover {
color: #cc0000;
text-decoration: underline;
}
-->
</style>
</head>
Creating Inline Style
Inline style is defined on a case-by-case situation. Let's say for example that you do not want to create either of the style examples above but still want some functionality and greater control that style offers. Well have no fear, create an inline style sheet.Here is how it's done:
Select the tag that you want to modify with style. We will use
for our example. Now decide what properties and attributes that you want to add to your tag.
Now it should look something like this:
<p style="font-family:verdana,helvetica; font-size:10pt; color:#00ff00;></p>
Linking CSS
After you have created a style sheet it needs to be linked to your document. There are two ways to accomplish this task. Below you will find and example of both.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:
1) Upload the whatever.css file to your the root directory on your Webserver.
2) Create the following code between the tags of every
document you want to be affected by the whatever.css file:
<LINK REL=STYLESHEET TYPE="text/css" HREF="whatever.css">
3) 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">
Still need help? help@htmlstyle.com
Inline Style Sheets
With inline style sheets you do not have to create an external css file. Inline style sheets are included in each document with the <style></style> tags.Here is how it's done:
Create your <style></style> tags between the <head></head> tags. Include all the selectors, properties and values you want to affect your document. When you are done it should look something like this:
<head>
<style>
<!--
.normal {
font-family: Verdana, Helvetica;
font-size: 10pt;
color: #555555
}
td {
font-family: Verdana, Helvetica;
font-size: 10pt;
color: #202020
}
a:link, a:active, a:visited {
font-family: Verdana, Helvetica;
font-size: 10pt;
color: #0000cc;
text-decoration: none;
}
a:hover {
color: #cc0000;
text-decoration: underline;
}
-->
</style>
</head>
BLOG TALK 
Become a WebProNews blog partner.
Twitter Uncomfortable With 'Tweet' Being Used In Third Party AppsLooks like Twitter is not looking the other way as much these days. TechCrunch reports that there is some concern at the ...
Flickr Just Now Allowing Connectivity With TwitterHulu Receives Good News Concerning Their Online Ad FormatGlobal Gaming Factory Buys Up Pirate Bay