The past couple of weeks have been action packed. Netvibes announced that it is going to take it’s platform and make it open source in an effort to compete effectively with the big guys. iGoogle decided to take on facebook by integrating “open social” into it’s start page. And now we have Yahoo announcing it’s own social platform.

But is an open social strategy really going to help keep folks away from Facebook? I’m not so sure that it is. Why you ask? The reason is tied up in the brand. Now, I know, it has been a long time since I talked about brand strategy, but as the web becomes “whatever you want” on Google, Yahoo, MSN, Netvibes, etc. The value of the brand becomes even more important. Ask yourself this question. What does Google’s brand stand for?

That one is simple, search.

Now ask yourself what does Yahoo’s brand stand for?

In my mind this one is a little muddy because I think of a portal which means “anything”. And this is part of the reason why Google was able to place it’s stamp on search and claim it as a verb.

Now think about Facebook. People ask “do you have a Facebook?” And for those of us that do, having a facebook means something. It means, yes I have a social profile online where you can get some information about me, check up on random things I’ve posted, and contact me. It is like having a little online interactive yearbook where you can communicate with your friends.

Why is this important? Well in terms of brand perception that doesn’t happen with either Google or Yahoo. People don’t say “do you have a Google?” and they don’t say “Do you have a Yahoo?”

They do say “Google it”, and Yahoo has tried to get people asking “Do you Yahoo?” although no one can tell me exactly what that means.

My point is this. Google, Netvibes, Yahoo, etc can build social into everything, but until they have the brand perception it isn’t going to do much to stop the Facebook’s and MySpace’s of the world. I imagine the best approach would be to purchase Facebook or MySpace and build your services into one of them rather than dilute the value of your own brand. By Google going social platform with profiles it becomes less about search and this creates a bit of opportunity. What happens when Google becomes a diluted portal like Yahoo? Well, in my mind there comes an opportunity for a new type of search engine. Maybe something even more powerful than Google’s search that has some 2.0 features. Something that is focused on search, but learns from the web community. Not necessarily social with profiles etc but Maybe it could learn slang, or allow people to flag inappropriate sites, tag them, rank them and re-categorize them. Or hell, maybe they could flag advertising that is not appropriate or has nothing to do with the search and give companies honest community ratings along side the search. I guess this is similar to Digg, but rather than just be about headlines, it should be about the entire web.

Anyway.. To answer the question– Will an open social strategy get more people to visit? It will get some initial buzz and in the short term should get people to at least check out the new features, but as a long term strategy, as a reason to abandon the MySpace’s and Facebooks it faces some serious challenges.

Before we can understand what CSS is, you’ll first need to understand what HTML is. HTML is essentially the code used to give a web page it’s basic structure. HTML stands for Hyper Text Markup Language and it is written in the form of tags. These tags make up the structural elements of a page. According to wikipedia:

Elements are the basic structure for HTML markup. Elements have two basic properties: attributes and content. Each attribute and each element's content has certain restrictions that must be followed for an HTML document to be considered valid. An element usually has a start tag (e.g. <element-name>) and an end tag (e.g. </element-name>). The element's attributes are contained in the start tag and content is located between the tags (e.g. <element-name attribute="value">Content</element-name>). Some elements, such as <br>, do not have any content and must not have a closing tag.

I assume that if you are looking at a CSS tutorial, you probably have an idea of what HTML is. However, if you are just trying to get a feel for things because you maybe said something like “yeah, I’m familiar with CSS” in a job interview then this is a good place to get a basic understanding.

Anyway… back to HTML for a quick second. So, HTML is made up of tags that create the basic page structure. It is separate from design. For example, a basic HTML page would that look something like this:

<html>

<body>

<p>My HTML Page</p>

</body>
</html>


Everything in between the body tag would show up in a web browser. In essence, HTML is the building block of the page and in order to learn CSS you need to know HTML first.

If you want to get a more detailed description you should check out Wikipedia’s entry on HTML:
http://en.wikipedia.org/wiki/HTML

Now that we’ve got that out of the way we can talk about CSS, or in other words – Cascading Style Sheets.

So, what is CSS?

CSS stands for Cascading Style Sheets. A style sheet is simply a text file with some rules that define how the elements of a page will be styled and what the layout will look like. For example, you can style text by assigning fonts, determining line spacing, and justification. You can style images by giving them boarders and padding, setting the size and providing them with mouse over effects, and you can control the layout of a page by positioning elements on the page.

Before CSS nearly all of the presentation for web pages was housed within HTML markup. This created all sorts of problems for folks. For example many people chose to use “font tags” to specify which fonts they wanted to use across their site. They would place these tags in each page and as the site grew and became outdated they soon realized they wanted to update their site. This created a problem because simply updating a the font across the site became a very big task. CSS solved this by allowing a single “style rule” to control the font across the entire site.

The concept to grasp is the CSS controls page appearance, while (x)HTML controls the basic structure. When creating websites you always want to separate form from content or in other words, separate the appearance from the structure. In the coming tutorials I’ll take you through the basics of the language, help you to learn how to construct CSS rules and by the end you’ll be well on your way to designing beautiful websites.

The power of CSS comes from the ability to define rules for elements on the page. For example if you have a paragraph element like this:

<p>Paragraph Element</p>

You will construct a rule that tells it what to look like on the page. A rule is made up of two main parts. The selector and the declaration. The selector determines which elements are effected, and the declaration says what is going to happen.

For the above example lets imagine we wanted to make the paragraph blue. To do so, we could construct a rule like this:

P { color: blue;}

In this case the selector is “P”. The declaration is held inside the curly brackets and consists of the property/value pair “color:blue”. It is important to note that the property/value pair ends in a semicolon. This allows you to place multiple property/value pairs inside a declaration. So for example, you could also give the paragraph a border:

P { color: blue;
border: 1px;
}

And if you wanted to get really fancy you could also give it a background color. How about red:

P { color: blue;
border: 1px;
background: red;
}

Looking at this in a browser we get something really ugly

When creatign style rules you need to always remember the semicolon between the property/value pairs, however just like with HTML you can be very relaxed when it comes to how you write the rules. For example this code:

p {color: blue;}

Works the same as this code:

p {
color: blue;
}

You can add spacing and returns to format your code and make it readable.

And that is it for tutorial 1. You now know how to construct a style rule.

- Cole

For designers the three column layout is one of the most complicated, yet most requested designs. It generally consists of a header, a left side bar, a content column, a right sidebar, and a footer. The key to understanding how to create this layout is in understanding how to design with floats. This tutorial won’t go into every concept, but if you follow along you will get an understanding for how to create a simple three column, flexible layout using floats.

For those of you who simply want to download the complete files. You can get them here:
Flexible, Three Column Layout Template HTML
Flexible, Three Column Layout Template CSS

To get started building we’ll first build the basic HTML page.
<html>
<head>

</body>
</html>

So far, this is just like any other HTML page. It has a head element with a title, and a body. Next we’ll want to link this page to a style sheet. We’ve called our style sheet style_sheet.css. To link to the style sheet we use the link tag:

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

Notice that the link tag targets the style sheet (style_sheet.css). The “rel” attribute defines the file as a style sheet, and the “type” attribute has a value of “text/css”.

We place the complete tag in our HTML page just under the title tag in the head of the document.

<html>
<head>

<title>Three Column Layout</title>
<link href="style_sheet.css" rel="stylesheet" type="text/css" />

</head>

<body>

</body>
</html>

Next we’ll add some div tags to give the page structure. Working like divs is like working within little boxes. Some boxes contain content and some simply contain more divs. Essentially the goal is to use CSS to organize the boxes on the page in a way that helps you achieve the layout you would like. To get started well need to first create the boxes we’ll use to organize the page. These boxes including a container, which houses the page, then a header, then a main content wrapper, then the content, the left sidebar, and the right sidebar, and finally the footer.

The code looks something like this:

<html>
<head>

<title>Three Column Layout</title>

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

</head>

<body>


<div id="container">

     <div id="header">
	<h1>The Header</h1>
     </div>

     <div id="wrapper">

		<div id="content">
		<h3>Your Content</h3>
           	<p>this is your paragraph content</p>
           	<p>this is your paragraph content</p>
        	</div>

        	<div id="left-sidebar">
          	<h3>Sidebar Nav</h3>
	  	<ul>
		<li>nav link 1</li>
              	<li>nav link 2</li>
              	<li>nav link 3</li>
		</ul>
        	</div>
      </div>

		<div id="right-sidebar">
      		<h3>right sidebar</h3>
	  	     <ul><li>nav link 1</li>
              	           <li>nav link 2</li>
              	           <li>nav link 3</li>
           	                 </ul>
      		</div>


<div id="footer">
    <h3>Footer</h3>
</div>

</div>
</body>
</html>

Now that we have the divs in place lets take a look at what we want to do with our CSS. The following diagram is an illustration of how each div will fit together on the page and also which way we need to tell the content to float.

Looking back at the HTML you’ll notice that each div has an ID that pertains to the boxes on the illustration. These IDs are essential to the identification of each div with our CSS. What we’ll do next is create our style sheet and write a style rule for each of the IDs, floating the content right and left, assigning widths and even background color.

First lets create the style sheet. Open a plain text editor and save the file as “style_sheet.css”. Looking at the code you’ll notice that this is the name of the file you linked to in your HTML. Now, lets create our first rule.

body {
       font: .8em verdana, arial, sans-serif;
        }

So far so good. What we’ve done here is set a default page font. It is made up of the “body” selector, and the font property/value pair. Next we’ll add styles for container.

#container {
	min-width: 660px;
	max-width: 880px;
         }

For this code, we set a min-width of 660px and a max width of 880px. Next we’ll want to style the header.

#header {
	background: #cff;
	}

Since I want you to be able to see the header and know where to put any additional property/value pairs I added a background color.

Next we’ll style the wrapper. If you look at the diagram above you’ll notice that it floats left, and to get it to fit in the appropriate space we’ll make it 70% of the total width. That will make some room for the third column. The code looks like this:

#wrapper {
	float: left;
	width:70%;
	}

Next we style the main content. We want it to float to the right, and have a width of 60% of the wrapper div. Remember, this div takes it’s width from the total available width of the wrapper container, which is 70% of the page container. So the code looks like this:

#content {
	float: right;
	width: 60%;
	}

Next let’s add code for the left and right side bars. We’ll go ahead and give them a background color as well.

#left-sidebar {
	float: left;
	width: 30%;
	background:#f90;
	}

#right-sidebar {
	float: right;
	width: 30%;
	background:#c00;
	}

You’ll notice that the left sidebar floats left and the right sidebar floats right. The last bit of code we need to add is for the footer.

#footer {
	clear:both;
	Background: #cff;
	} 

Notice that the footer has one additional property/vlaue pair. That is the “clear” property. What this does is ensure that the footer doesn’t bounce up and down above any of the divs before it in the HTML code.

Finally, when you put all the code together you get this:

#left-sidebar {
	float: left;
	width: 30%;
	background:#f90;
	}

#right-sidebar {
	float: right;
	width: 30%;
	background:#c00;
	}

You’ll notice that the left sidebar floats left and the right sidebar floats right. The last bit of code we need to add is for the footer.

body {
	font: .8em verdana, arial, sans-serif;
     }

#container {
	min-width: 660px;
	max-width: 880px;

         }

#header {
	Background: #cff;
	}

#wrapper {
	float: left;
	width:70%;
	}

#content {
	float: right;
	width: 60%;
	}

#left-sidebar {
	float: left;
	width: 30%;
	background:#f90;
	}

#right-sidebar {
	float: right;
	width: 30%;
	background:#c00;
	}

#footer {
	clear:both;
	Background: #cff;
	} 

Feel free to copy and paste the HTML and CSS for your own stuff.

Enjoy!

Cole