I was asked by a visitor how he could insert a CSS rule into his web page. I assume that he was thinking of a CSS rule that he had seen on a site somewhere, quite likely even one of thesitewizard.com's CSS tutorials, and wondered how he could add it to his website.
Since my visitor did not specify the software he was using, I will try to make my answer usable whether you use a visual web editor like Expression Web or BlueGriffon, or a plain text editor like Notepad or TextEdit.
If you use a visual web editor, open the web page in it and switch to the software's "Code" or "Source" view. Here's how to do that for three commonly-used editors:
If you use Expression Web, look for the series of tabs at the bottom that says "Design", "Split" and "Code". Click the "Code" tab.
If you use BlueGriffon, there are a few buttons at the bottom labelled "Dual View", "Wysiwyg", "Source" and "Print Preview". Click the "Source" button.
If you use Dreamweaver, click "View" on the menu bar, followed by "Code" on the drop-down menu that appears.
If you use a plain text editor like Notepad, TextEdit or one of the myriad other free ones around, just open the page in it and you should already be able to see the HTML source.
If you only want the CSS rule to affect one page on your website, add it to the HEAD section.
Let's say that you want to insert the CSS from my article on how to create a box on a web page:
Scroll to the top of the web page in the editor. If you glance at the lines that form the start of
the page, you should be able to spot a string of text that says "<head>".
This is the "<head>" tag, and it marks the beginning of the HEAD section of a web page.
The end of the HEAD section is demarcated by a "</head>" tag. (Notice the "/" just before the word "head".)
All the lines between "<head>" and "</head> are part of this section.
Add the following two lines just above the closing "</head>" tag line:
Then insert the CSS code between those two lines.
For example, if you are using the box code mentioned above, the final output should look like the following:
Depending on the CSS code you used, there may be other changes that you need to make to your web page.
For example, the above code merely creates a CSS class called "boxed". It does not make
boxes magically appear at random spots on the page. You will need to insert other HTML code
to style one or more items on the page with this "boxed" class for it to be useful. Since such
additional code is specific to the task you are trying to accomplish, it's not possible for me to describe it
in a general way here. Please see the relevant
CSS tutorial
for the other steps needed. For instance, my
rectangular box tutorial
also shows you the HTML to modify to make a box.
If you have multiple pages that need to use a particular rule, you have at least 2 options.
Insert the rule (using the method described earlier) into every page that needs it. This is the inferior option, since if you want to make changes to the rule, you will have to go through every one of those pages to modify it individually.
Insert the rule into a separate, standalone style sheet file, and add a link to that file to every page that needs the rule. This file is known in webmaster lingo as an external style sheet. It is the superior solution if you have many pages using the same rule since it puts it in a single location. When you want to modify the rule, you need only do it once, and all pages depending on that rule will automatically reflect the change.
An external style sheet is just a plain text file containing only CSS rules. It doesn't have any
HTML in it. That is, it does not have any "<head>" or "<style>"
lines or, indeed, any HTML tags at all. You can dump multiple CSS rules into that one file. If you are unsure what
such a file looks like, go to the
Website Layout Wizard and generate
the code for any one of the layouts provided. The "styles.css" file created is an example of an external
style sheet.
Since it's an ordinary text file, you will need to create it with a plain text editor like Notepad or TextEdit. If you use a visual web editor, switch it into the Code or Source view. Whichever editor you use, start with a completely blank page and paste the CSS rule into it. Then save the file and close it. You're done with the file.
Note: when saving the file,
give it a
name ending with a ".css" extension. (If you use Notepad, please read
How to
Save a File with Notepad Without the TXT Extension since that editor will automatically add a ".txt" extension
to the name behind your back, unless you take certain specific steps.)
Obviously, don't use a filename already in use by another CSS
file on your site, or you will end up overwriting the other one, and ruining your design.
Do NOT use a word
processor like Microsoft Word, LibreOffice, Wordpad, Write or anything like that. Only use a
plain text editor, or
a web editor that knows how
to handle CSS files.
Once you have saved the external style sheet, modify the web page to include a line like the following
somewhere in the HEAD section. Place it immediately above the "</head>" line, if you aren't sure
where to insert it.
Replace "boxes.css" with your actual filename and location. The above line assumes that your external style sheet
is called "boxes.css", and it is placed in the same directory as the web page containing the link.
If your page uses XHTML, and not HTML5 or HTML 4.01, add a space and a slash just before the final ">", so that
it looks like this:
If you don't know whether your page uses XHTML, HTML5 or HTML 4.01, ignore what I just said, and use any of the above (with or without the "/"). It actually doesn't matter which you use in practice, since all browsers will handle either piece of code correctly. It's only important if you want to test the page in a validator and receive a "0 errors" report.
Copyright © 2018-2019 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Add a CSS Rule to Your Web Page
