If Jesus Had A Website

For the last entry in our CSS Primer, I want to highlight ways in which CSS can be extended to create even more advanced effects. As a refresher, we've already covered the basics, like why CSS should be used, the basic elements used for CSS layout, placing DIV elements and styling them with backgrounds and borders, and manipulating fonts via CSS. So today, we'll focus on "what's next"…

The next step in extending the HTML and CSS design structure is called Dynamic HTML (DHTML). In addition to using HTML and CSS, DHTML also incorporates the use of JavaScript to create events for elements. For example, if you wanted to create a multi-leveled menu in an expandable tree structure, you could accomplish this through DHTML, whereas this would not be possible with HTML and CSS alone.

The addition of the Javascript allows you to respond to certain events (clicks, hovering, etc.) by manipulating the properties of an HTML element on the fly. An image gallery is a great example of this. We could create an image gallery with one big image on top and all the thumbnails below. Then on each thumbnail, we could place code that would change the image being displayed in the big image area when the thumbnail was hovered over.

DHTML is also extremely flexible, so I can't possibly even begin to scratch the surface of everything it can do. It's only limitations are your coding ability and the capabilities of JavaScript. However, that can also make it difficult to learn.

However, there are a number of sites that offer collections scripts that can be used to accomplish almost anything you'd like to do. Some I'd recommend are:

• Dynamic Drive
• DHTML Goodies

Instead of trying to go into any more details, I'm going to put a cap on our CSS Primer right there. There is a lot of power in the use of CSS and HTML (which grows exponentially with the addition of JavaScript) that I encourage you to explore if you haven't already. Heck, there's even a lot of powerful options that were too much for me to even cover here. Even if you're a seasoned web design vet, there's something more that can be learned. But isn't that always the case?

Today, I just wanted to highlight a few posts from other Christian blogs that I found interesting, and thought others could benefit from.

• Jim Walton discusses complacency and his recent wake-up call in Called To Complacency. Glad to hear you're doing ok now Jim!
• Thanks to Dan Lee for pointing out MinistryHome. I'm still just beginning to check things out (my site's here), but it looks like a great service.
• Also from Dan Lee is a good article about using the Fruits of the Spirit as a tool in blogging. Sometimes in all of our blogging work, we forget the KISS rule. Sometimes we just need to get back to basics, and that can be very powerful as an outreach tool.
• Strategic Digital Outreach also has an interesing article discussing if we should include a gospel presentation on our websites. It's an interesting analysis, which covers both the benefits and drawbacks of doing so.

Alright, that's it for today.

Now that we've mastered the art of borders and background colors (ok, maybe not mastered, but at least are familiar with them), we can look at how to style the fonts to do as we wish.

This was actually the area of CSS I had initially dealt with because I was trying to have different font colors in different areas of the page. I had a light background for the majority of my main content, but I wanted to use a dark background for my side menu bar. I quickly learned that I either had to have FONT tags everywhere, or I could learn a little CSS to achieve my desired look.

If we start with our continuing code from previous examples, and add following to the #header section of the CSS:

font-color: #FFFF66;

This will give us a header with a green background and yellow font.

However, if you put a link in that section of the HTML code, you will see that the link color has not changed. This is because font styles can be applied to almost any HTML element that can have data within it. Therefore, we'll be looking at much more than just DIV tags.

I know what you're thinking: But Greg, aren't the styles supposed to be cascading?

In this case, the link color is not a decendant of the font. Instead, it is a seperate entity. In order to change the color of the link, you'll need to include the following code in your CSS file:

a { color: #66FFFF }

This will give you cyan links throughout your page. But what if you only wanted them that color in your in your #leftcolumn DIV. Well, we can do that too!

#leftcolumn a { color: #66FFFF }

What this code is saying is that you want all link elements within an element with an ID of #leftcolumn to be cyan. If this is the only link style definition in your CSS, the rest of your links should keep their default blue color.

Link elements are also fun because they have four different statuses as well. You can define a different style for unvisited, visited, and active links, as well as for links you are hovering over. Instead of making this article any longer than it has to be, I'll refer you to the following CSS Link Tutorial to give you more details.

Now, what if you wanted to have a title on your page that was in a different font from the rest of your text to make it stick out? Well, we can do that too!

Let's assume that we want to use the H1 tag to indicate any titles on our page. We can then add the following code to make them stick out. In this case, we use the font-family style to change the font type:

h1 { font-family: courier, serif }

Now, you'll notice that I have listed more than one kind of font. This is because not all browsers support the same set of fonts. Therefore, we want to make sure we use web-safe fonts. You can always use any kind of font, but don't expect it to show up the same on everyone's computer. If the first font you specify isn't supported by their browser, then it will try the next one on the list. You can list as many fonts as you like, but should always list one of the web-safe fonts last, or your content will be displayed in the browser's default font.

Fonts are a very powerful way to accent your site and give it it's own flavor. And using CSS, you can truly customize them to your heart's desire. No longer are you restricted to the font styles in the BODY tag and FONT tags. Be free and let your letters run wild!

Hey everyone! Sorry for the lack of updates recently. I got a chance to take a long weekend on the Jersey Shore with relatives, and ever since I've gotten back I've been playing catch-up with e-mails, work, and seemingly everything else.

If all goes well, I'll get the next edition of the CSS Primer up this afternoon.

Recently, we went over a brief tutorial on how to use CSS and DIV tags for layout on our sites. This week, we'll spend a little time talking about how to get that layout some flavor to bring it to live.

Backgrounds

Last week, you actually got a sneak peek at how to set background colors. Let's look at that code again:

#main { width: 770px; margin: 0 auto;}#header { border: 1px solid #ccc; height: 70px; background-color: #66CC66;}#leftcolumn {  width: 170px; float: left; border: 1px solid #ccc; background-color: #6666CC;}

#centercolumn { border: 1px solid #ccc; width: 596px; float: left;}

This code created a green header, a blue sidebar, and a white content area. All you have to do is provide the hexidecimal color code. Simple enough…

However, what if you'd like to use an image for your background? That's not too difficult either. For example, instead of using this line

background-color: #6666CC;

we could instead use this line

background: url("back.jpg") repeat;

The url parameter allows us to specify the location of the image (as a relative link or an absolute link), and the repeat parameter tells the browser to repeat the image across the width and height of the DIV area.

Furthermore, we can control how an image will repeat. If we instead use repeat-x, we can have the backround image only repeated horizontally. Or we can use repeat-y to have the image only repeated vertically. Lastly, we can set the backround image so that it will not repeat by using no-repeat. Each of these has it's different uses in design, so if you're looking for a different look, you should try working with them.

That's about the extent I'll be covering backgrounds, but if you'd like to learn even more about specific background settings, please check out this page for a full list of background options.

Borders

In the example from the last CSS Primer article, you'll also see the settings for a basic border for a DIV.

border: 1px solid #ccc;

This creates a solid gray border that is 1 pixel thick around the DIV. The color and width properties should be pretty self explanitory, but we want to look closer at the style of the border, as well as separate border controls.

The solid border style will give us a solid line every time, but we also have some other options to choose from. Solid is the most commonly used style, but the others can be using for creating DIVs that are not so separated from what's around them, or to hilight them in a stronger way.

We can also control our borders separately. We do this by calling more specific properties. For example, I could use the following CSS on one of my DIVs.

border-top: 1px dotted #000;

border-left: 2px dash #F00;

border-bottom: 3px double #0F0;

border-right: 4px solid #00F;

This will give me a DIV with a dotted black line on top, a dashed red line on the left, a green double-lined border on the bottom, and a blue solid border on the right, with each border getting wider going counter-clockwise. Granted, you probably wouldn't actually create a DIV with crazy borders like this, but it should show you the simple power and flexibility of the property.

We'll go ahead and take a break there, but we've just started to scratch the surface of the power of CSS when it comes to site appearance. Next time, we'll cover fonts and simple effects, so be on the lookout for that later in the week.

This morning, Dan Lee of Blog Ministry announced the creation of the Blog Ministry flickr Lab. This is his blogging answer to the Church Marketing Lab, and is using it to try and encourage better design on Christian blogs. I think it's a great idea which I had briefly thought would be useful following my first visit to the Church Marketing Lab. Thanks Dan, for bringing the idea to fruition.

I'm eager to get involved! What better resource to bounce new ideas off of than each other?

Last week we covered the main idea behind the DIV tag and some background about what it's meant for and some of the advantages of using it. Now, it's time to start putting the tag to work.

Let's start with the following code:

<html>

<head>

<title>IJHAW Layout Demo - One Column</title>

<link rel="stylesheet" type="text/css" xhref="main.css" />

</head>

<body>

<div id="main">

  <div id="centercolumn">

      <p>Main Content</p>

  </div>

</div>

</body>

</html>

If you're not familiar with the LINK tag above, this is the code that allows us to access the CSS information stored in a separate document.  We can then just edit that document instead of changing all of our code.

You'll also notice that both the DIVs on this page are using the ID attribute, because they'll only appear on the page once. 

We'll then pair this with the main.css file containing the following:

 #main { width: 770px; margin: 0 auto;}#centercolumn { border: 1px solid #ccc; width: 770px; float: left;}

The combination of these two pieces of code will then create a page with a single column that is 770 pixels wide (like this).  The margin setting on the main DIV also centers the column on the page.

Ok, so that makes for a good warmup, but I'm sure you would like more sections to work with.  So lets put together a 2-column layout with a header (like this).  We'll start with the following html page.

<html><head><title>IJHAW Layout Demo - Two Columns With Header</title><link rel="stylesheet" type="text/css" xhref="main.css" />

</head><body><div id="main">

   <div id="header">      This is my Header   </div>      <div id="leftcolumn"> Left Column</div>      <div id="centercolumn">      <p>Main Content</p>   </div></div>   </body></html>

You'll notice that I now have added two other DIV sections in my main DIV section.  Now, without any style applied to them, each DIV would appear one on top of the other in a single column.  In most cases, this is not what we'd like to see, so let's take a look at the CSS that will allow us to arrange them as we'd like to see them. 

 #main { width: 770px; margin: 0 auto;}#header { border: 1px solid #ccc; height: 70px; background-color: #66CC66;}#leftcolumn {  width: 170px; float: left; border: 1px solid #ccc; background-color: #6666CC;}

#centercolumn { border: 1px solid #ccc; width: 596px; float: left;}

When we combine these two, we get an easy layout that many people are familiar with.  Notice that the centercolumn has been set with a width of 596 pixels.  This is because there is a 1 pixel border on both itself and the leftcolumn DIV (4 pixels of width total), and the sum of the width columns should be equal or less than the width of the DIV they are contained in.  If they are add up to more than that, then there is a good chance they will get reshuffled in a way that you did not intend.

So those are the basics of site layout using DIV and CSS.  Things can get much more complex, but the basics still apply in each case.  Next time, I'll be discussing how to make your DIVs appear the way you'd like.  This will include colors, background images, fonts, and some basic effects.  Until then, have fun playing with your layouts.

Now that we've touched on why CSS is well suited for website design and layout, I'd like to start to talk about how it gets pieced together by looking at a few of the elements that go into using CSS.

The DIV tag is the core building block of using CSS within your HTML code. While some people familiar with using tables for layout relate it to a table cell, it can more accurately be referenced as a box. Just like a cardboard box, they can come in all kinds of sizes, and can be arranged to be inside one another or besides one another.

To continue the analogy, filling in your web page with DIV tags becomes a lot like packing a moving van with boxes. You have to find places for the big stuff and the little stuff. You also need to tie off some things so they stay where you want them. And here's where the CSS becomes involved.

What CSS then allows us to do is to give different attributes to our DIV boxes. Using CSS, we can specify the style of our box (size, location, appearance, alignment, etc.). This is done in one of three ways in a DIV Tag:

1. Through The Class Attribute – The Class attribute is used to apply a style to multiple DIVs. For example, in a blog you probably want all the postings to be displayed similarly in distinct boxes. Using the Class attribute allows you to apply the same style to each of them.
2. Through The ID Attribute – The ID attribute is used to apply a style to a single object. For example, if you wanted two distinct columns on your page, you can make one with an ID="right" and one with an ID="left", and set their styles to make them appear as you wish. This styles would then not be reused on a given page.
3. Through The Style Attribute – The Style attribute allows you to modify the style on a single DIV object. Using the Style attribute is not recommended in general "best practices", but there are cases when it may be needed.

If you haven't worked much with DIVs, at this point you may still be wondering what the benefit of using the tags are. Next time we'll start to talk about all the fun style changes we can make to DIVs using CSS, and the big picture should really begin to develop. See you then!

After a month of voting, our third poll has shown that there is definately a breadth of experience among our readers. However, more than half of your are what I'd call "seasoned vets" with 3-10 years of experience of working on the web. That's where I fall myself, so I find that interesting.

Thanks to everyone who voted. I was curious to see what kind of background my audience had so I knew where to focus my writings. So, it looks like I can stick with some of the semi-technical stuff I'm typically drawn to. However, if anyone ever has anything they'd like me to cover that I haven't, then you can either leave me a comment at any time, or reach me by email at gnilsen [at] ifjesushadawebsite [dot] net.

You'll also see the new poll up, asking what your preferred language for website creation is. I'm already checked off for ColdFusion myself, but I'm curious to see what everyone else is using. RSS readers, be sure to make the jump to vote!