This article answers questions like: Why should Christian webmasters use CSS? What is CSS? How do I implement CSS on my site? Want the answers to these questions? Read this.
Note: This article was originally published on Digitract’s site but is no longer found there. I originally moved the text to C-W-M because of an issue with parsing the URL. I have kept a link to Digitract’s site because I think they are a great site and I would like you to visit them.
Why Christian Web Designers Need CSS, written by Sean Buscay, was originally published on DigiTracts.com in their Web Design category.
DigiTracts is a great Christian site that provides resources for E-vangelism to enable Christians to share their faith online. They have an assortment of highly interactive professionally designed digital tracks. The Christian site provides great tools for webmasters and Christians to share their faith. Visit them here: DigiTracts.com .
Sean Buscay
www.christian-web-masters.com
Sean Buscay is on a mission to CREATE, ADVANCE, and EXPOUND faith in JESUS using web technology. He is the owner of Christian-Web-Masters.com .
Cascading Style Sheets (CSS) is a mark-up language like HTML, used to format various elements on a webpage. These elements include everything HTML can format (such as text type and size, backgrounds, margins, padding, and color) and more (like link rollovers, or text highlighting). Like HTML, CSS is just text that is saved in a text file. The text is saved with the file extension ".css" or directly in your ".html" document.
There are many advantages to using CSS. In my opinion the top two reasons to use CSS are:
CSS allows for the separation of content and design/formatting. This is an important step for the developing webmaster. The formatting for all webpage elements can be placed in a single style sheet that all the pages on the website link to. In this style sheet, the webmaster defines for the pages that links to it, various design elements such as color, size, padding, margins, and even the positioning of elements.
As we know, sometimes we webmasters make mistakes. CSS helps reduce mistakes as they save the webmaster from having to apply formatting in every single page to all the page elements. Thus using CCS reduces the risk that a webmaster may miss a font tag here or there and saves us from having to remember what the specifics of the formats were from page to page to page to page? You get the picture. Now here?s the really great part. Because the formatting for the whole website exists in one single file, site-wide changes can be made quickly and easily in one single sheet.
There are many other good reasons to use CSS. I'll mention some briefly to introduce you to some of the benefits of CSS. You'll find more detail in the further reading and resources listed at the end of this article.
Sean Buscay
www.christian-web-masters.comSean Buscay is on a mission to CREATE, ADVANCE, and EXPOUND faith in JESUS using web technology. He is the owner of Christian-Web-Masters.com .
You can paste CSS directly in your html page. Although it does not have to be placed in between the header tags, it usually is. Below is an example that redefines the HTML?s h1 tag:
<head>
<title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
h1 {
font-family: "Times New Roman", Times, serif;
font-size: 14px; color: #CC00FF;
}
-->
</style>
</head>
The highlighted section is your CSS. Notice that it begins and ends with HTML's <style> tag.
Sean Buscay
www.christian-web-masters.comSean Buscay is on a mission to CREATE, ADVANCE, and EXPOUND faith in JESUS using web technology. He is the owner of Christian-Web-Masters.com .
The second and most powerful way to employing CSS on your site is by linking your HTML documents to an external style sheet. The external style sheet contains all of your CSS for formatting your page elements. You simply link your HTML pages to it. This way, all of your page?s formatting is contained in one place and making changes is a breeze. The sample below highlights a link to an external style sheet called ?styles?.
<head>
<title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
Note that you can use absolute or relative paths to style sheets. You can even reference a style sheet with a full URL.
The third way to employ CSS on your site is using the ?import? method. This method is similar to linking to an external style sheet and has the same benefits. The import method?s main advantage is that older browsers and browser types that do not support the import method will not read the style sheet your page links to. This is important if you want to use new or cutting edge CSS. An older browser might render your nice CSS in ways you did not intend, sometimes really messing up a web page. You use the ?import? method for CSS formatting that you want to render in newer browsers only. An example of importing a style sheet is show below.
<title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
@import url("styles.css");
-->
</style>
</head>
Note: You can use all three methods of employing CSS all in one HTML page. You can also link to multiple style sheets. You may for example define your main CSS in an external style sheet and link to it. Then, for CSS that only displays well in new browsers you use the ?import? method.
Sean Buscay
www.christian-web-masters.comSean Buscay is on a mission to CREATE, ADVANCE, and EXPOUND faith in JESUS using web technology. He is the owner of Christian-Web-Masters.com .
These tips are meant to whet your appetite for using CSS. These tips are more in the form of a "Quick Start" than a tutorial. For full tutorials refer to the "Resources and further reading" section of this article.
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
This will display the links on your page without an underline. When a user hovers over your link, the underline appears.
<html>
<head>
<title>Test Nav</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.topNav {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-transform: uppercase;
}
.topNav a:link {
border: 1px solid;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 5px;
padding-left: 5px;
background : White;
text-decoration: none;
margin-right: 4px;
}
.topNav a:hover{
color : #FFFFFF;
background : #9900CC;
}
.topNav a:active{
color : Black;
background : #CCCCCC;
}
.topNav a:visited{
border: 1px solid;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 5px;
padding-left: 5px;
margin-bottom: 3px;
text-decoration: none;
}
-->
</style>
</head>
<body>
<p class="topNav"><a href="link_one.html">link one</a> <a href="link_two.html">Link two</a></p>
</body>
</html>
This example creates a CSS class called topNav. It defines the formatting for links in the class. It is implemented by putting your navigation links in a paragraph and assigning that paragraph to the topNav class. You can see a version of this type of navigation buttons on my site www.christian-web-masters.co... . The main navigation buttons on my site use this technique. Using no images saves me a lot in bandwidth and causes the pages to load fast for my users.
Sean Buscay
www.christian-web-masters.comSean Buscay is on a mission to CREATE, ADVANCE, and EXPOUND faith in JESUS using web technology. He is the owner of Christian-Web-Masters.com .
Discuss this article and ask questions here.
Sean Buscay
www.christian-web-masters.comSean Buscay is on a mission to CREATE, ADVANCE, and EXPOUND faith in JESUS using web technology. He is the owner of Christian-Web-Masters.com .