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
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: 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:
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>
William Richard has been designing Websites for over 6 years and has used his knowledge to create a HTML reference center for everyone’s skill level. For information or HTML help contact: by email at wrichard@htmlstyle.com or visit http://www.htmlstyle.com
