CSS Layout

How about it? Are you confused by it sometimes? Do you wonder what it is that makes this potentially killer design not appear properly?

The culprit, my friends, is often the syntax. I was feeling your pain and decided to just quickly write it down for you. Memorize it, print it, clip it, and stuff it in your pocket… help has arrived.

Without going into too much detail (if you’d like me to, just write and let us know), I’ll let you know about the terms that you need to know, and how to put all of this into order.

In your .css document what you need to list are a series of rules (or statements). These statements will tell your browser how it should be interpreting the instructions. The syntax used to write these rules are made of three things: a selector, a property and a value in this order always - actually, order is something else that needs its own post. A property and a value together are called a declaration. Check out the figure below for a clear visual.

Remember that the declaration must enclosed by curly braces!

Now the best way to describe this is that your selector is the tag that you want your rule to affect, the property is basically the attribute of that tag and the value is really the how of that rule.

Remember to always close the value with a semicolon!

If you have more than one property, you can list them one after the other but they must be separated by a semicolon. If you have numerous values, they must be separated by a comma and a space:

body { font-family: arial, helvetica, sans-serif; background: #FFFFFF; color: black}

To make it easier to read, try to write your rule this way:

body {

font-family: arial, helvetica, sans-serif;

background: #FFFFFF;

color: black

}

If your value has more than one word, make sure to surround it with quotes:

body {

font-family: “century gothic”, helvetica, sans-serif;

background: #FFFFFF;

color: black

}

That’s it for today! Hope this helps.

I would like to recommend a great site today for downloading free CSS templates if you cannot find any suitable themes from the search engine listing. Known as StyleShout.com, this popular site is managed by Erwin Aligam, Calamba City, Philippines. This young web design hobbyist is a big fan of CSS, XHTML and open source web design

The free website templates section of this site features some of the greatest design that cannot found in other sites. Erwin has made an effort ensuring that all the templates are valid xthml(strict) and valid CSS so as better facilitate the usage of the Webmasters.

Besides the free CSS website templates, the site also lists down a great list of premium CSS templates and is especially useful if you cannot find a suitable template in the free listing. Most of the templates only costs less that $30

Lastly, you can find a list of CSS related resources that you will find it very useful. This CSS resources list contains links to CSS hacks, layouts, learning and techniques like positioning.

Feel free to visit StyleShout for some inspirations as well!

Bartelme Design, a design agency located in Graz, Austria, has recently released a smiley development kit for free use

I have downloaded the .PSD file and went ahead to play around with the possibilities and created the smiley on the right. This is really a cool kit that allows the designer to design their own smiley with different add ons. In addition, you can also play around with its eyes, body, mouth and background.

You may also want to drop by their showroom to view their high quality designs. You will definitely find a great deal of amazing designs that may help to trigger your creativity

You can go ahead and download the file here.

KC wrote a great post about lorem ipsum which you can find here in case you missed it.

Though lorem ipsum can be great, I would like to advise caution with using it too liberally. In the beginning stage, go ahead and use it all you want. But when you think that your design is almost completed, switch the text to something that’s going to look like what you intend to put there. Why? Because it helps to see natural breaks in the sentences or in the paragraph. In lorem ipsum the breaks come back way too regularly to even feel natural. Sometimes a header needs to have a real header so that you know the exact length that you need.

For example, when you have to design a site for an online web store, I think you should put in your project data that is somewhat similar to what will go there. It will help you pay attention. Is that name field long enough? Do I have enough room for description? Does the font and words look good with this design. Why have it say Lorem Ipsum Dolores when it should only say Layout for example? As a designer, you need to see beyond the page so that you have the foresight that your client might lack. Of course, it’s important to notice that the type of project you are designing will directly impact the use of lorem ipsum. If you are designing a blog, lorem ipsum will not matter much. Your mileage may vary but for me, I try to look at various types of text first and I like to settle on the more realistic-looking type for my particular project.

 For those afraid of generating their own text but who would like to know what else is out there, please check out a few generators that I like to use when I’m not all serious! These are cool web apps that allow you to create alternate dummy content. You can choose how many paragraphs, words or even add a header: 

For the diehards, may I suggest to get the Firefox extension!

This review is on another layout from the popular FreeCSSTemplates.org

Named as Artificial, this layout demonstrates a good use of spaces in the header with a good blend of dark background. The top navigation also stands out clearly to further improve the usability of the layout. I like the color that they choose for the links as it is very striking and makes you want to click on them

The designer of this layout has also made an effort to create comment in the CSS file to make sure that the Webmasters know where to find the elements when they need to customize the layout further. The HTML and CSS elements of this layout is properly named as well so that customization can be easily made.

In terms of the layout performance, this layout is simply amazing with its light weigh nature. You can be sure that any users in the world will be able to load this layout almost instantly (provided you do not include any large images or processing scripts). A very suitable layout for those who are very concerned about performance.

Highly recommended for a compact blog.

Overall Rating:

Try out the DEMO here.

Mike Cherim has recently blogged about the different types of CSS layouts that we have been using and their respective pros and cons. I think that this is a good article to share as it covers most of the benefits and areas that the Webmasters must consider when utilizing different types of layouts.

Besides the pros and cons, Mike also shares some advices on every type of layout for the designer to consider. For example, he advised that if you are going to design an Elastic layout, make sure it works on small monitors. Make sense

Fixed layout is the most common template used by the bloggers nowadays. A few advantages that I can think of is that fixed layout loads much faster as the browser does not need to calculate the sizes before showing to the users. Another advantage is that it seems to be much easier to design with less considerations

You can read Mike’s blog on the different CSS layouts over at his blog.

We have received an email from Shannon at CollegeScholarships.org that they are currently holding a contest to attract talented students to submit their fantastic design to them for this attractive prize!

The requirements of this contest is as follows:

1. U.S. citizen;
2. Currently attending full-time in post-secondary education; and
3. If you win, you must be willing to allow us to list your name, picture, and website on this page.

They have also invited several web design experts as the judges for this contest. As the contest is closing soon (midnight PST on Monday, August 13th, 2007), you can submit your design to them via this form.

Good luck to your submission!

NodeThirtyThree.com has been designing CSS templates and layouts for quite a while and I am constantly amazed by their work

The overall design of this layout, HyperGlass, is clean with the content well presented with the layout. The header image of this layout perfectly matches the overall structure and feel. Each blog post is also neatly separated from one another.

With total file size less than 100KB, the performance of this layout can still be further improved by optimizing the images used for this theme. Most users should not have problems loading this layout under 3 seconds.

From the coding point of view, the designer has also named the elements according to the naming convention. This has made customization of the layout much more easy.

A great layout to consider for your blog.

Overall Rating:

Try out the DEMO here.

If you have been downloading and buying web sites templates, you may most probably come across blocks of unreadable paragraphs starting ‘Lorem ipsum..’ Before you start wondering what these blocks of words mean, allow me to elaborate further.

It is very difficult to come up with dummy words for layouts or templates as totally random generated words will have irregular distribution of content and make the whole layout looks unnatural. Hence, CSS designers use Lorem ipsum.. to fill the layout.

The reason why these words are used is because they have a high words distribution ratio and looks like readable English. You can refer to lipsum.com for a brief history of Lorem ipsum. In addition, this useful site also allows you to generate some Lorem ipsum content

As I am browsing through the latest list of free CSS layouts for the last few days, I stumbled upon a simple yet eye catching layout by this passionate Web Designer, Roshan. The layout I am talking about is the ColorsOne.

This is a fixed width blog layout with a right sidebar that bears a nice sub header The content is well distributed and presented gracefully on the layout. The utilization of a generous header makes the whole design looks more elegant as well.

In terms of the coding, there is no comments in the CSS file and you may have difficulties in amending the this layout if you are dealing with CSS codes the first time. However, each of the classes and ids are proper named so most Webmasters should not have any problems tuning the layout.

As you may have expected, the real element that slows down the web page loading is the header image (70 KB) itself. If you are looking for optimal performance, you should try and optimize the header image.

In terms of Search Engine Optimization, the designer has made full use of headers so that every sub headers can contain the targeted keywords that the Webmasters desire. One area of improvement that the designer can do is probably position the sidebar after the content in HTML source

Overall Rating:

Try out the DEMO here.