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.

Alex Griffioen has recently written a neat tutorial illustrating how to design nice buttons using only CSS. The following is an image of how the button looks like upon completion.

In the tutorial, he talks about how to style the buttons respectively along with the required CSS codes. As you may expected, this button is created with the help of sliding door technique; where two complementing images creating the illusion of a single, stretching image.

In the end of the tutorial, Alex also points out a small workaround for Internet Explorer browser
Check out this tutorial

I have come across some great CSS tutorials and thought that it will be good to share it here as well

CSS Drop Shadows tutorial by Sergio Villarreal is a very good guide for anyone that wants to pick up CSS Drop Shadow technique. The tutorial is comprehensive and should not pose a problem for most Web Designers.

If you are having some problems understanding how float works, the Float Tutorial by MaxDesign is the perfect resource to refer to. It illustrates the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts.

Learning CSS positioning in ten steps is an essential guide for anyone who wants to grasp the concept of this powerful technique. This tutorial arranged in an easy-to-read format so as to facilitate learning.

Hope the above tutorials help a bit

by RedMatrix

When you create a separate style sheet for your look, you do that to reduce load times for your visitor. But if you have a large CSS file, that could slow down load times, however slightly.

There are many ways to reduce the byte count to your CSS file. The first way is to use shorthand. Instead of writing 4 lines of code, you can reduce them to one. Even greater, is the fact you can also omit certain bits by not using a unit for anything with a zero. Think about it. Zero pixels are the same as zero ems.

This is sample CSS code written in long hand. It’s very easy to understand.

DIV#header
{
background-color: #A7A6A5;
background-image: url(htp://path.to/image/file);
background-attachment: fixed;
background-repeat: repeat-x;
background-position: top center;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
padding-top: 6px;
padding-right: 6px;
padding-bottom: 6px;
padding-left: 6px;
color: Black;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}

But if you use level 1 of CSS shorthand, you can shorten the above code into this:

#header
{
background: #A7A6A5 url(htp://file) fixed top center repeat-x;
margin: 10px 0px 10px 0px;
padding: 6px 6px 6px 6px;
color: Black;
font: 12px bold Arial, Helvetica, sans-serif;
}

Then you can further reduce the code by remembering that “0″ doesn’t need a unit of measurement, and that the order of things are top-right-bottom-left.

Take a look at this optimal code:

#header
{
background: #A7A6A5 url(htp://file) fixed top center repeat-x;
margin: 10px 0;
padding: 6px;
color: Black;
font: 12px bold Arial, Helvetica, sans-serif;
}

This reduces the code-to-content ratio if you have a huge CSS file. It’s also easier to read, with much less commenting.

Welcome to the beginner’s guide to CSS. Let’s begin with what that means: Cascading Style Sheets. We won’t go into a boring history lesson here. Suffice it to say that the web has become better because publishers (web page makers) have separated style from content.

With HTML, you create content and format it a certain way. With Style Sheets, you add the look and feel to what you are viewing. Let’s get right into it!

Before, you would write

<h1><font size=”3″ color=”red” face=”courier”>Hello World!</font></h1>

which is boring. Worse, if you need to edit the color or font, you have to do it for every instance. Even with search and replace commands, it’s futile. Separate the style from the content.

After, you should write <h1 class=”bell”>Hello World!</h1> on your page, and in a separate spot write:

.bell {
color:red;
font-family:courier;
font-size:3pt;
}

This way, you could “call up” the same style on many elements on the page, just by putting a class=”bell” in the markup selector. Then all you have to do is change the Style commands, not each instance where you want a red 3 point courier text header.