How to Add a CSS Rule to Your Web Page

How to Insert CSS Code into a Web Page


How to Add a CSS Rule to Your Web Page

by Christopher Heng, thesitewizard.com

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.

Software Needed

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 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 the CSS Rule is for a Single Page Only

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:

.boxed {
  border: 1px solid green ;
}

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:

<style type="text/css">
</style>

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:

<style type="text/css">
.boxed {
  border: 1px solid green ;
}
</style>
</head>

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 the CSS Rule is for Multiple Pages

If you have multiple pages that need to use a particular rule, you have at least 2 options.

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.

<link rel="stylesheet" type="text/css" href="boxes.css">

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:

<link rel="stylesheet" type="text/css" href="boxes.css" />

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/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

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.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Add a CSS Rule to Your Web Page





Home
Donate
Contact
Link to Us
No Spam Policy
Privacy Policy
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.