Devin R. Olsen Web Developer » CSS Tutorials

Pure CSS Menu With Infinite Sub Menus Tutorial

Devin R. Olsen — Sat, 26 Jun 2010 23:14:39 +0000

Today we are going to cover how to build a pure CSS menu with infinite sub menus; an area of CSS that is seldom talked about, poorly written or misconceived. This pure CSS menu with infinite sub menus technique makes use of CSS2 selectors so it will not work in IE6 and below without help from JavaScript. With that said, this pure CSS menu with infinite sub menus technique will work in:

IE7, IE8,
FireFox,
Safari
Opera

This pure CSS menu with infinite sub menus technique only uses 10 CSS rules making it EXTREMELY light weight. This technique also overcomes some funky IE bugs such as Ghost Hovers and Z-Indexing issues via pure CSS.

[CLICK HERE TO SEE DEMO OF TUTORIAL]

Lets Begin shall we? Start by creating a new html document and use the following code to make this lesson go smoother for everyone.

xmlns="http://www.w3.org/1999/xhtml">


Devin R. Olsen - Pure CSS Menu &amp;amp;amp;amp;amp;amp;amp; Infinite Sub Menus

In the body of our newly created document lets setup an unordered list with some list items like so.


Menu 1
Menu 2
Menu 3
Menu 4

We start by giving our top-level un-ordered element an id of “nav” so we have some sort of unique identifier to reference to with our CSS. Next lets copy the whole thing and nest a second list into any of our first level list items and change its ID to a CLASS like so:


Menu 1

Menu 1
Menu 2
Menu 3
Menu 4


Menu 2
Menu 3
Menu 4

That’s it for the HTML portion, just note that top-level list menu gets an id called “nav” while all nested sub menus get a class called “nav”. You can continue to nest as many menus you like in the same manner from here on out to meet your css menu desires.

Lets move onto the CSS portion. In the header of our document lets create some style tags that will house all our menus CSS like so:

We will start with our most important reset and structure styles for our menu. First lets point to our #nav, .nav and #nav .nav li elements and reset their margin’s and padding’s to zero like so:

#nav, .nav, #nav .nav li { margin:0px; padding:0px; }

This is done to remove any default browser margin’s and padding’s automatically applied to these element types. Next lets point directly to our first level list items and give them some structure / style like so:

#nav, .nav, #nav .nav li { margin:0px; padding:0px; }
#nav li {float:left; display:inline; cursor:pointer; list-style:none; padding:10px ">0px 10px 0px 10px; border:1px #000 solid; position:relative; }

Our menu will be of horizontal so we set the first level list items to a float of left and a display of inline. We also give the list items a list-style of none to remove browser default bullet points next to each list item. Last we give our list items a position of relative in order to prevent any child elements who may be positioned absolute from breaking out of the flow of design. The rest of the styles are of visual preference and up to the developer to change however they desire.

Next we must have some way to identify our top-level sub menus to from all the rest. We do this to give visual guidance on how our first level sub menu is displayed against our top-level menu. To do this we must include a new class to our first level sub menus ONLY, called “first” like so:


Menu 1

Menu 1
Menu 2
Menu 3
Menu 4


Menu 2
Menu 3
Menu 4

Again this is only for our “FIRST LEVEL SUB MENUS” that we apply this new “first” class to and not any of the rest of our further nested menus. Next lets point to these first level sub menus and set some structure rules via CSS like so:

#nav, .nav, #nav .nav li { margin:0px; padding:0px; }
#nav li {float:left; display:inline; cursor:pointer; list-style:none; padding:10px ">0px 10px 0px 10px; border:1px #000 solid; position:relative; }
#nav li ul.first {left:-1px; top:100%;}

We give our first level sub menu’s a top percentage of 100 to make it fall directly below our top-level menu. Because our list items have a 1px border we give our first level menu items a left style that is negative 1 to assure our first sub menu’s fall completely to the left when being displayed.

Next lets start giving our elements some style rules. First we will point to all our list items and anchor links that any list item may carry like so:

li, li a {color:#000;}

Here we have set our list items and anchor tags any list item may carry to have a text color of black or rather #000. Next we will point to all our sub menu list items ONLY and give some structure and styles like so:

li, li a {color:#000;}
#nav .nav li { width:100%; text-indent:10px; line-height:30px; margin-right:10px; border-top:1px #000 solid; border-bottom:1px #000 solid; border-left:none; border-right:none; background:#fff;}

Note how we first pass through the #nav element before calling .nav li vs. just stating .nav li? This is important as its a fix to helps us over come some spacing issues due to our list item borders. The first style we give here is a width of 100% to insure our list items will completely span across its parents set width. The rest of the styles are up to the developer to change to however they like.

Next lets give some structure to our list item’s anchor elements like so:

li, li a {color:#000;}
#nav .nav li { width:100%; text-indent:10px; line-height:30px; margin-right:10px; border-top:1px #000 solid; border-bottom:1px #000 solid; border-left:none; border-right:none; background:#fff;}
#nav li a {display:block; width:inherit; height:inherit;}

We first point to all our list items and then search for all anchor tags, then we give each anchor tag a display of block and an inherited width and height from its own parent element.

Next lets begin adding our menus behavior styles such has hover and when to display a sub menu and when not to display a sub menu. This part is really where the magic happens and our ability to have a pure CSS menu with infinite sub menus come into play.

First we need to give our sub menus a rule to hide them self’s from view until told otherwise like so:

ul.nav { display:none; }

We add an extra measure of security here when dealing with the display none style by stating “ONLY un-ordered list elements who have a class of “nav” must by default be a display of none”.

Next we will set our behavior color styles for list items and list item anchor tags like so:

ul.nav { display:none; }
#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }

We first point to all our list items that are under a hover state, as well as all list item’s anchor tags while the list item is under a hover state. Then we set a text color of white or rather #fff and a background of black or rather #000. These styles are for the developer to change to their desired look and feel.

Next we must create a rule to display our sub menus when its parent list item is under a hovered state like so:

ul.nav { display:none; }
#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }
li:hover > .nav { display:block; }

Here we are stating that all list items that are under a state of hovered who have a child element with the class of .nav (our sub menu) must be displayed. By using the CSS child selector (>) we are also stating that only the first proceeding child sub menu must be displayed while all the rest remain hidden.

Next lets talk about how we fix yet another IE bug. This one is called the “IE:Hover Ghost Bug” and in its basics it leaves deeply nested sub menus in a state of constant display after being hovered. To fix this bug we simply look at our last style as a igniting point. By giving style and structure to our sub menus when told to be displayed, vs. having a constant rule that is always giving style and structure to our element at all times, we squash the IE bug. So we add the following styles to our last rule like so:

ul.nav { display:none; }
#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }
li:hover > .nav { display:block; position:absolute; width:200px; top:-2px; left:50%; z-index:1000; border:1px #000 solid;}

The position absolute is crucial to allowing our sub menus to be positioned relatively to its parents location on the page. We also set a pre-defined width to our sub menus of 200px as well as offset the menu by top -2px (due to borders width) and by left 50% of its parent element. Last and most important style we give to our sub menus is a z-index of 1000 to make sure everything layers or rather sorts correctly.

Last thing we need to do is squash yet another IE bug that deals width z-index and properly sorting elements or rather layers. To do this we simple state that all sub menu’s parent elements (list items) must have a higher z-index value than the sub menu elements like so:

ul.nav { display:none; }
#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }
li:hover > .nav { display:block; position:absolute; width:200px; top:-2px; left:50%; z-index:1000; border:1px #000 solid;}
li:hover { position:relative; z-index:2000; }

Pssst.. That’s it folks, that’s all the CSS you need to have a fully compleated Pure CSS Menu with infinite amounts of sub menus, enjoy!

Completed CSS Code:

#nav, .nav, #nav .nav li { margin:0px; padding:0px; }
#nav li {float:left; display:inline; cursor:pointer; list-style:none; padding:0px 10px 0px 10px; border:1px #000 solid; position:relative;}
#nav li ul.first {left:-1px; top:100%;}
li, li a {color:#000; text-decoration:none;}
#nav .nav li { width:100%; text-indent:10px; line-height:30px; margin-right:10px; border-top:1px #000 solid; border-bottom:1px #000 solid;
border-left:none; border-right:none; background:#fff;}
#nav li a {display:block; width:inherit; height:inherit;}
ul.nav { display:none; }
#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }
li:hover > .nav { display:block; position:absolute; width:200px; top:-2px; left:50%; z-index:1000; border:1px #000 solid; }
li:hover { position:relative; z-index:2000; }

Thanks Everyone.
Devin R. Olsen

How to Build jQuery Lava Lamp Menu Tabs

Devin R. Olsen — Fri, 25 Dec 2009 09:05:00 +0000

Click Here to See This Tutorial’s Example Demo

How to Build jQuery Lava Lamp Menu Tabs from Devin R. Olsen on Vimeo.

This effect is called “animated rounded menu tabs”. It’s a neat little effect that will work in all browsers including IE6+. somethings to note is that this technique uses a single image for its four corners and is stretchy in both width and height!

We are also using the jQuery JS lib to ensure our JS works across all browsers but also to cut down on the amount of JS we uses to make this great effect. Here is the link I use in the video tutorial to use the jQuery lib from Google’s online repository.

http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js

Here is the full source if you want to just get down to studying the code.





Devin R. Olsen - Lava Lamp Menu Tabs





	
    	
        	Short
            Longer
            Kinda Long
            Kinda Longer
            Really Longer
            A Really Lot Longer

IE6 Z-Index Sort Order Issue Fix

Devin R. Olsen — Sat, 12 Dec 2009 03:15:33 +0000

Today I wanted to share a little tip on how to avoid yet another IE bug. The z-index style helps developers use elements as layers. With the z-index style you are able to dictate the elements or layers stack, sort order, z order what ever you wanna call it.

IE6 has an issue with the z-index and being able to properly sort these layers correctly. As stated from www.quirksmode.org:

“In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly”

So whats a person to do when they run into this z-index issue and IE6? Simple really its about identifying root elements to your document, here let me explain with some HTML and CSS.
[sourcecode language='css']#boxWrap {width:200px; height:200px; border:1px #000 dashed; position:relative;}
#layer1,#layer2{ width:150px; height:150px; }

#layer1 {
left:375px;
top:80px;
background:#000;
z-index:2;
position:absolute;
}

#layer2 {
left:285px;
top:-50px;
border:1px #fff solid;
background:#666;
z-index:1;
position:relative;
}[/sourcecode]
And the HTML:
[sourcecode language='html']

[/sourcecode]
In the above HTML you will see that we have two elements at root level of the documents body. We have the “boxWrap1″ and the “layer2″ div elements. Both elements are positioned relative, however “boxWrap1″ has a nested elements called “layer1″.

The div elements “layer1″ is positioned absolute and has a z-index of 2. Both “layer1″ and “layer2″ make use of their left and top style rules to position themselves over each other. The “layer2″ elements also has a z-index rule that is of 1. If “layer1″ has a z-index of 2 and “layer2″ has a z-index of 1, then in all browsers this is what you should see.

However in IE6 this is what you get!

This is the classic IE6 Z-Index bug right here for you at its most basic. So how do we fix this little issue? Simple really first look to the element who is positioned absolute and has the highest z-index, in our case its “layer1″.

Next you must locate the absolute ROOT parent of the element that is positioned absolute and has the highest z-index in our case its “boxWrap”.

Last but not least give your root parent element or rather “boxWrap” a z-index that is higher than your positioned absolute element “layer1″.

The objective was to make our z-index:2; element be sorted over our z-index:1; element so by going to our root element of the highest z-index element and giving it an even higher z-index:3; fixes this issue.

Note: You don’t have to give your root element and position styles just a simply higher z-index will fix the issue. Also note that the lower z-index element does not have to be root with documents body for this bug killer to work.

Enjoy,

Devin R. Olsen

CSS RUB Compressing and Organizing

Devin R. Olsen — Mon, 14 Sep 2009 05:54:03 +0000

Hi everyone today I wanted to take some time and introduce to you a new technique I have come up with that helps me out in both CSS file size but also organization. This technique of mine has been dubbed RUB which stands for (Repeating Unique Behaviors). CSS RUB is taking a style sheet and breaking it down into logical categories that reveals common or rather repeated styles much faster while also helping organize. It’s also debated if its give a proper hierarchy over your styles to cut down on style rule conflicts.

So to begin lets take a look at a sample demo site:





RUB Demonstration Site




    
    	This is our site
        
        	Home
            About
            Contact
            	
                	Contact 1
                    Contact 2
                    Contact 3
                
            
            Help
        
    
    
        
        	Left Column
            
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero.
			
        	Left Column
            
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero.
			
        
        
        	Right Column
            
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            
        	Right Column
            
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            
        
    
    
    	This is our footer

Now lets take a look at our demo site:

We have a header, middle content area and footer. Our header has a navigation menu with sub menu and some behaviors. Our middle content areas have a left and right column with header tags and paragraph tags.

So lets take a look at the CSS that makes this simple layout.

body {margin:0px; padding:0px; text-align:center;}
#wrapper {width:750px; margin-left:auto; margin-right:auto; text-align:left;}
#header {float:left; width:100%; border-bottom:1px #000 solid;}
#header h1 {margin:0px; padding:0px;}
#nav {margin:0px; padding:0px; float:left; display:block; width:100%; height:30px; font-size:12px;}
#nav li {float:left; display:block; height:30px; position:relative; list-style:none; list-style-type:none;  padding:0px 10px 0px 10px;}
#nav li a {display:block; float:left; height:30px; color:#000; text-align:center; padding:0px 10px 0px 10px; line-height:30px; text-decoration:none;}
#nav li a:hover {background:#000; color:#fff; text-decoration:underline;}
#nav li ul {display:none;}
#nav li:hover ul {display:block; left:0px; margin:0px; padding:0px; border:1px #000 solid; top:28px; position:absolute; width:130px;}
#nav li li { margin:0px; padding:0px;  background:#000; width:100%; float:left;}
#nav li li a {margin:0px; padding:0px; color:#fff; text-align:left; text-indent:15px; display:block; height:30px; width:100%;}
#nav li li a:hover {background:#fff; color:#000;}
#middle {float:left; width:100%;}
#leftCol {width:250px; float:left; padding-top:10px;}
#leftCol h2 {margin:0px; padding:0px; text-indent:10px;}
#leftCol p {margin:0px; padding:30px; display:block;}
#rightCol {width:499px; float:left;  padding-top:10px; border-left:1px #000 solid;}
#rightCol h2 {margin:0px; padding:0px; text-indent:10px;}
#rightCol p {margin:0px; padding:30px; display:block;}
#footer {float:left; width:100%;}
#footer h3 {display:block; border-top:1px #000 solid; width:90%; margin-left:5%;}

Lots of times when developing a web site or at least a layout you first and only concerns are to basically get the structure and look and feel in place and making sure everything is cross browser friendly. But lots of times this hasty CSS coding leaves us with repeated style that could be summed up into shorter rules.

So a lot of our time is spent cleaning up our design even though we should be been doing it right in the first place. So whats a person to do to even being to tackle a CSS clean up? Simple this is where the RUB methos works its magic. Lets create three area in our style sheet:

/*Repeating*/
/*Unique*/
/*Behavior*/

With these three areas defined we can begin to think taking our CSS mess and categorizing our styles into one of the three areas. Lets talk about what would calcify a style to belong to any one of these three areas.

Repeating

Repeating is for styles that are made to cascade over more than one element, but is not limited to just classes. h3{style}, #rightCol h3 {} or even .cols would all be repeating styles and would be listed here.

Unique

Unique is for rules that are for specific elements only and wont be cascading over any other elements and are limited to only id style rules.
#nav, #header, #content, are all examples of a unique style rule.

Behavior

Behavior is for rules that utilize such pseudo CSS as :hover, :active, :link.

Remember this, keep it close… it is your weapon in the first steps to sorting out all this CSS mess.
After sifting through this our example CSS I have come up with the following.

/*Repeatin*/
#nav li {float:left; display:block; height:30px; position:relative; list-style:none; list-style-type:none;  padding:0px 10px 0px 10px;}
#nav li a {display:block; float:left; height:30px; color:#000; text-align:center; padding:0px 10px 0px 10px; line-height:30px; text-decoration:none;}
#nav li ul {display:none;}
#nav li li { margin:0px; padding:0px;  background:#000; width:100%; float:left;}
#nav li li a {margin:0px; padding:0px; color:#fff; text-align:left; text-indent:15px; display:block; height:30px; width:100%;}
#leftCol h2 {margin:0px; padding:0px; text-indent:10px;}
#leftCol p {margin:0px; padding:30px; display:block;}
#rightCol h2 {margin:0px; padding:0px; text-indent:10px;}
#rightCol p {margin:0px; padding:30px; display:block;}
/*Uniqure*/
body {margin:0px; padding:0px; text-align:center;}
#wrapper {width:750px; margin-left:auto; margin-right:auto; text-align:left;}
#header {float:left; width:100%; border-bottom:1px #000 solid;}
#header h1 {margin:0px; padding:0px;}
#nav {margin:0px; padding:0px; float:left; display:block; width:100%; height:30px; font-size:12px;}
#middle {float:left; width:100%;}
#leftCol {width:250px; float:left; padding-top:10px;}
#rightCol {width:499px; float:left;  padding-top:10px; border-left:1px #000 solid;}
#footer {float:left; width:100%;}
#footer h3 {display:block; border-top:1px #000 solid; width:90%; margin-left:5%;}
/*Behaviour*/
#nav li a:hover {background:#000; color:#fff; text-decoration:underline;}
#nav li:hover ul {display:block; left:0px; margin:0px; padding:0px; border:1px #000 solid; top:28px; position:absolute; width:130px;}
#nav li li a:hover {background:#fff; color:#000;}

Sometimes when you are sorting your styles you will be faced with a rule like #header h1, and you have to decide, will I ever have another h1 tag in my header.. most likely not so its safe to call it a unique rule you see.

Now that we have broken our style sheet up into these three areas we are really setup up to start trimming down the code of repeated styles with classes and grouped CSS rules. Let start to optimize this code one group at a time.

Repeating

Your first step here would to be to sum up the repeated rules and styles of the leftCol header and paragraph tags as well as the rightCol and its header and paragraphs like so:

#leftCol h2,#rightCol h2 { text-indent:10px;}
.cols,.cols p,.cols h2 {margin:0px;}
.cols p {padding:30px; display:block;}
.cols h2 {padding:0px;}

Now lets try to clean up the navigation portion to the layout, here:

#nav li { position:relative; list-style:none; list-style-type:none;}
#nav li a {color:#000; text-align:center; line-height:30px; text-decoration:none;}
#nav li ul {display:none;}
#nav li li { background:#000; width:100%; border:1px #000 solid;}
#nav li li a {color:#fff; text-align:left; text-indent:15px; width:100%;}
.floatBlock, .floatBlock li, .floatBlock li a, .floatBlock li li, .floatBlock li li a {float:left; display:block; height:30px;}
#nav li li a, #nav li li {margin:0px; padding:0px;}
#nav li, #nav li a { padding:0px 10px 0px 10px;}

Unique

Moving onto the next portion the Unique category of our RUB method here is what I came up with:

body {text-align:center;}
#nav {float:left; height:30px; font-size:12px;}
body, #header h1, #nav {margin:0px; padding:0px; display:block;  width:100%;}
#wrapper {width:750px; margin-left:auto; margin-right:auto; text-align:left;}
#header {border-bottom:1px #000 solid;}
#leftCol {width:250px;}
#rightCol {width:499px; border-left:1px #000 solid;}
#header,#middle,#footer{float:left; width:100%;}
#leftCol,#rightCol { float:left; padding-top:10px; padding-top:10px;}
#footer h3 {display:block; border-top:1px #000 solid; width:90%; margin-left:5%;}

Behavior

Our last group is for behavior is in most cases if a direct behavior call to a direct element so this is the least cleaned up portions of most style sheets.

Let compare our style sheets file size before and after now, here is our final result.

/*Repeating*/
#nav li { position:relative; list-style:none; list-style-type:none;}
#nav li a {color:#000; text-align:center; line-height:30px; text-decoration:none;}
#nav li ul {display:none;}
#nav li li { background:#000; width:100%; border:1px #000 solid;}
#nav li li a {color:#fff; text-align:left; text-indent:15px; width:100%;}
.floatBlock, .floatBlock li, .floatBlock li a, .floatBlock li li, .floatBlock li li a {float:left; display:block; height:30px;}
#nav li li a, #nav li li {margin:0px; padding:0px;}
#nav li, #nav li a { padding:0px 10px 0px 10px;}
#leftCol h2,#rightCol h2 { text-indent:10px;}
.cols,.cols p,.cols h2 {margin:0px;}
.cols p {padding:30px; display:block;}
.cols h2 {padding:0px;}
/*Uniqure*/
body {text-align:center;}
#nav {float:left; height:30px; font-size:12px;}
body, #header h1, #nav {margin:0px; padding:0px; display:block;  width:100%;}
#wrapper {width:750px; margin-left:auto; margin-right:auto; text-align:left;}
#header {border-bottom:1px #000 solid;}
#leftCol {width:250px;}
#rightCol {width:499px; border-left:1px #000 solid;}
#header,#middle,#footer{float:left; width:100%;}
#leftCol,#rightCol { float:left; padding-top:10px; padding-top:10px;}
#footer h3 {display:block; border-top:1px #000 solid; width:90%; margin-left:5%;}
/*Behaviour*/
#nav li a:hover {background:#000; color:#fff; text-decoration:underline;}
#nav li:hover ul {display:block; left:0px; margin:0px; padding:0px; top:28px; position:absolute; width:130px;}
#nav li li a:hover {background:#fff; color:#000;}

Our new cleaned up styles is almost 15b smaller but more importantly our browser will now spend less time over repeated style when downloading the style sheet and keeping it in the computers cache.

So to sum up the CSS RUB method. CSS RUB is a mechetti if you will to organize your style rules before any serious cleaning process takes place. It’s goal is to give us a better plan for attack when tryin to debug a werid layout issue by breaking our style into these three areas as well as cut down on the amount of time to trim down repeated styles.

CSS RUB = Quick way to RUB out repeated styles and organize your style rules accordingly, simple as that!

Thanks everyone!
Devin R. Olsen

Here is an example of the page before optimizing

Here is an example of the CSS RUB method at work on our demo site

Layout vs Content Placement

Devin R. Olsen — Sun, 13 Sep 2009 11:50:09 +0000

If content is king, then indeed placement of content on a page is must also be important. Here is a little trick to make sure your content is always first and foremost for crawlers yet not to disturb your layout and design.

This tutorial will cover very little about the pre-made layout but rather how to alter it in a way that will push our sites content to the top in order for search engines to crawl your content faster.

So to begin here is our pre-made standard two column layout.





Layout vs. Content Placement with CSS



    
		
        Header
        
        
            
            	Left Column
                Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
                Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
                Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
            
            
                Content
                Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Content
                Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Content
                Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            
        
        
        Footer

Lets see what we have.

Perfect, now lets study this traditional layout idealism if you will.

In the above HTML and image you see that the header comes first then our two column content blocks and finally out footer. In most cases our header will contain a navigation menu with many links and sometimes account information links. In the eyes of a crawler the header and all its links and menus almost seems like a mini site map that in a lot of cases, contains links that are very minimally relevant to the topic or page at hand.

So I ask you, wouldn’t it be nice to be able to flip the positions of the header and the content blocks in the eyes of a search engine crawlers so that our content comes first, then our header and links, and finally our footer? How would we do such a thing without disturbing our layout?

Simple my friends we will use the magic of CSS positions to trick our browsers into placing our header above our content block.

First lets move the html content block above our header like so:


    
        
            Content
            Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            Content
            Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            Content
            Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        
        
            Left Column
            Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis....
        
    
    
    Header
    
    
    Footer

Now lets see what we have here:

Just as suspected now our header is below our content block and this is just not going to work for us. So lets move back up to our CSS and give some positioning rules to a few elements.

First things first, we are going to give our “#wrapper” style rule a position of relative:

#wrapper {width:750px; text-align:left; margin-left:auto; margin-right:auto; position:relative;}

Next lets give our “#header” style rule a position of absolute and a top left of zero pixels:

#header { height:100px; position:absolute; top:0px; left:0px;}

Great so what we have done is gave both our header element a position of absolute to break it out of the flow of our design so we can place it where ever we like. We also gave the parent a position of relative to stop the header element from breaking out of the flow of our design any further than this point.

Great lets take a look-see at what we have done now shall we:

OOPS, it seems to be that our header and content block are now overlapping each other! Ok to be honest I knew this was going to happen but I wanted to show you what happens when you use a position of absolute to break an element out of the flow of design. Now that the header is no long part of this “block like structure” of its sibling elements, they can overlap each other.

How do we fix this? Simple, lets move back over to our “#wrapper” element and give it a padding top style that equals the same height as our “#header” element.

#wrapper {width:750px; text-align:left; margin-left:auto; margin-right:auto; position:relative; padding-top:100px;}

What we have done here is told our “#wrapper” element to push down all elements who follow our layouts flow down from the top by 100 pixels or again the same desired height as our header.

look and see what our results are:

Great so now with CSS we have made it appear as if our layouts structure is header, content then footer but in reality we have our content before all other elements. Here is what this would look like to a crawlers entering the page looking for content relative to the pages topic.

Wow this is perfect, but hmm something still bugs me. The left and right columns could be flipped as well beings that in most scenarios the right column will contain the meat or rather more relative type of content to a pages topic. So how would we go about flipping these two?

Instead of using position rules, we can look at the float side of this technique if you will. Its kinda a rule of thumb here tha when we are trying to move elements or rows up or down over or under each other we want to use positions, but for columns that site next to each other it much better to use floats.

To begin simple change the “#rightCol” rule’s float and margin-left to right like so:

#rightCol {float:right; width:475px; display:inline; margin-right:10px;}

Now that we have gave specific rules to both the left and right columns to either float left or right, belive it or not we can flip then in any order we want now. So go back to these two elements flip them so the right column comes for the left column like so:

Content
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Content
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Content
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Left Column
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

Let see our results:

Everything looks great from the layout or rather visual side of things, lets see how we did on the structure side of things:

PERFECT! Both structurally and visually sound right? …

IE Fix

Now IE rears its ugly head yet again with a common bug that I need to point out. First this is a technique not a method set in stone, each layout will have its differences and challenges, but all should be able to work their way into this solution.

Most layouts will make use of floats and widths of a 100% in their row elements. IE however when having sibling elements who use floats and widths such as this while also trying to also utilize a position of absolute will make this positioned element disappear from the layout. Good news is that its only in version IE5 and IE6, the even better news is there is a CSS solution to this bug.

Again because the header element is trying to use a position of absolute while its sibling elements use floats and widths, IE5 and IE6 will hide the header from view. The solution is to isolate these two browsers from using floats on our sibling elements by going to the “.row” class in our css and give “!importance” to all other browsers to use floats and for IE5 and IE6 to now use floats like so:

.row {border:1px #000 dotted; float:left !important; float:none; width:100%;}

I only wanted to point this bug out to you because as I stated each layout will have its own unique challenges, and this seems to be the most common bug you will run into first so it’s always help full to know why if not when this occurs to you.

And that’s Layout vs Content Placement everyone!

Devin R. Olsen

Here is a working example of what this tutorial covers.

Pure CSS Vertical Menu

Devin R. Olsen — Thu, 10 Sep 2009 02:32:13 +0000

Today we are going to build the second most common menu navigation, the vertical navigation menu. Here we are going to be using only pure CSS and un-ordered lists to create our vertical navigation menu with three levels of pop outs. This version of the vertical navigation menu will work in IE5, IE6, IE7 and IE8 as well as FF and Safari.
Let’s begin shall we. To start lets create our menus container block and give it an id of “navigation”.

Next we will add our first level menu items.

After this we are going to give our list items some names.


    
        Home
        About
        Contact
        FAQ
        News

Great let’s see what we have so far.

Obviously it’s not going to work for us, but I think it’s important to point out that the vertical fashion that is given to us by default in the ordered list is here to help us. The vertical menu and un-ordered list almost seems to be a match made in CSS heaven vs. its sister menu the horizontal navigation menu.
So let begin to add some style to our first level un-ordered list and its parent container “navigation” shall we.

In our header we create some style tags that will contain all our CSS. Our first CSS rule we want to add would be for our container.

Here we are going to give our main container some structure by setting its width to 150 pixels; we also set our menus font size to that of 12 pixels that will cascade down our entire menu.
Great next we are going to create a rule for our first level un-ordered list.

Ok here we are pointing to our “navigation” container first, then our first un-ordered list and assigning styles accordingly. We have removed the default margin and padding that comes with a un-ordered list by setting both to 0 pixels. For style sakes we set our first un-ordered list’s background color to # 666.

Ok let’s see what we have so far.

Again not looking to hot right now, but we will get there. Our next step is to assign some styles to our un-ordered list items. We do this by again pointing to our “navigation” container; its first un-ordered list, and then our list items.

#navigation {width:150px; font-size:12px;}
#navigation ul {margin:0px; padding:0px; background-color:#666;}
#navigation ul li {
height:25px;
line-height:25px;
list-style:none;
padding-left:10px;
color:#FFF;
border-top:#fff solid;
border-bottom:#fff solid;
border-width:1px;
cursor:pointer;
}

Ok here we have a lot of styling to give to these list items that will cascade down our entire menus look and feel for the rest of the menus list items. So to begin we remove our default un-ordered list item styles, or rather bullets next to each list item. Next we set a height of 25 pixels to space our list items out vertically a little, but at the same time make up for text placement by using the line-height and left padding.

For the line-height, we set it exactly the desired height of the list item in order to center our text vertical within the list item. Our padding-left style is to move each list items text off the left site by 15 pixels. Our last CSS styles are purely for preference and deal with border colors and thickness, font color and cursor types. These last styles may also change according to your design.

Let’s take a look shall we.

Ok not too bad.

Before we move onto creating our second level sub menu, lets add some behavior to our menu shall we. Let’s give a color difference to our list items background color if we are hovering over them.

To do this we again reference to our “navigation” container first, then our first un-ordered list and then our list items them self. Once we are pointing to our menus list items we add a pseudo hover to begin the statement for our behavior.

#navigation {width:150px; font-size:12px;}
#navigation ul {margin:0px; padding:0px; background-color:#666;}
#navigation ul li {
height:25px;
line-height:25px;
list-style:none;
padding-left:10px;
color:#FFF;
border-top:#fff solid;
border-bottom:#fff solid;
border-width:1px;
cursor:pointer;
}
#navigation ul li:hover {background-color:#F90; position:relative;}

Here we are giving our list items a background-color of #F90 and set its position to be that of “relative”. We use relative because it turns our list items into stopping points for any immediate children that have a position of absolute vs. having the absolute element break out of our menu all together. We also get the position of relative to our list items here at the hover state in order to fix IE related issues.

Ok so here is what our menu behavior looks like.

Ok now we must move into our second level un-ordered list. We always nest our sub menus deeper within the list item we want it to be displayed under.

So make your HTML look like the following:


    
        Home
            
                Sub Menu Item 1
                Sub Menu Item 2
                Sub Menu Item 3
                Sub Menu Item 3
            
        
        About
        Contact
        FAQ
            
                Sub Menu Item 1
                Sub Menu Item 3
            
        
        News
            
                Sub Menu Item 1
                Sub Menu Item 2
                Sub Menu Item 3

Ok notice how we have added entirely new un-ordered lists to our first level list items we want a sub menu to appear. Great let’s move back up to our CSS and begin to set some visual rules to these second level un-ordered lists.
To give ruling to these second level un-ordered lists we again must traverse past our “navigation” container to our first level un-ordered list and then to our second un-ordered list like so.

#navigation ul ul {
display:none;
position:absolute;
left:75px;
top:5px;
border:#fff solid;
border-width:1px;
background-color:#999;
}

Here we are giving our second un-ordered list a display of none. We do this so that by default, our second level un-ordered lists are hidden until told so. Next we set our second un-ordered list to be a position of absolute so we may position it according to the location of its parent relative element. To position our absolute second level un-ordered lists we use the top and left styles. Our last styles are of preference and are for borders, border widths and background colors and may change in your design.

Ok so we have written our second level un-ordered list’s off behavior state so we now have to write our display behavior state. To do this we point to the first level un-ordered list and instate a pseudo hover. Next we point to our second level un-ordered list and give a display of block to display it out upon its parent being hovered, like so.

#navigation ul ul {
display:none;
position:absolute;
left:75px;
top:5px;
border:#fff solid;
border-width:1px;
background-color:#999;
}
#navigation ul li:hover ul {display:block;}

Great just a few more rules and styles are we are complete.

Ok the last two CSS rules for our second level un-orderd list are primarily for structure purposes only. The first rule points to all our second level un-orderd list items and real estates the overall width of 150 pixels to reassure that our sub menu and its items will carry the same width as our overall menu. Next we set a float of left and a display of inline to fix any IE related issues. Finally for personal likes I removed our previously stated border from the second un-orderd list items.

#navigation ul ul {
display:none;
position:absolute;
left:75px;
top:5px;
border:#fff solid;
border-width:1px;
background-color:#999;
}
#navigation ul li:hover ul {display:block;}
#navigation ul ul li {border:none; width:150px; float:left; display:inline;}

The next, and last rule for the second level un-orderd list is for visual purposes only and adds a pseudo hover behaviour to all our second level un-orderd list items. Here we are giving our list items a text decoration of underline and removing any border from list items.

#navigation ul ul {
display:none;
position:absolute;
left:75px;
top:5px;
border:#fff solid;
border-width:1px;
background-color:#999;
}
#navigation ul li:hover ul {display:block;}
#navigation ul ul li {border:none; width:150px; float:left; display:inline;}
#navigation ul ul li:hover {text-decoration:underline; border:none;}

Let’s look at what we have so far.

Now let’s create our last level un-ordered list. Like before we are going to insert a new un-ordered list and items with in the level and list item we want to trigger or rather pop out this third level un-ordered list.

Here is what our final HTML would look like.


    
        Home
            
                Sub Menu Item 1
                Sub Menu Item 2
                    
                        Sub Sub Menu Item 1
                        Sub Sub Menu Item 2
                        Sub Sub Menu Item 3
                        Sub Sub Menu Item 4
                    
                
                Sub Menu Item 3
                Sub Menu Item 3
            
        
        About
        Contact
        FAQ
            
                Sub Menu Item 1
                Sub Menu Item 3
                    
                        Sub Sub Menu Item 1
                        Sub Sub Menu Item 2
                        Sub Sub Menu Item 3
                        Sub Sub Menu Item 4
                    
                
            
        
        News
            
                Sub Menu Item 1
                    
                        Sub Sub Menu Item 1
                        Sub Sub Menu Item 2
                        Sub Sub Menu Item 3
                        Sub Sub Menu Item 4
                    
                
                Sub Menu Item 2
                Sub Menu Item 3

Great, because we have already stated most visual styles we want our menu to carry, these last few rules and styles are for structure only. To start we add a reset rule if you will, that will basically prevent our third level un-ordered list from being displayed until its proper parent and un-ordered list level has been hovered over. In other words, we don’t want our third level un-ordered list to be displayed when our first level un-ordered list is being hovered over but rather display it’s self only when our second level un-ordered list is hovered.

Here is what this reset would look like.

#navigation li:hover ul li ul {display:none;}

Great let’s move onto the last few rules. Our first one is to offset our third level un-ordered list to the left further than its parent un-ordered list level. So again point to our third level un-ordered list and give it a left style of 110 pixels. I also added a different color background color here for kicks and to demonstrate you can define styles even further if you wish.

#navigation li:hover ul li ul {display:none;}
#navigation ul > ul > ul > ul ul li ul {left:110px; background-color:#0099CC;}

Ok now we already created a reset rule that would keep our third level un-ordered list from being displayed, let’s crate our last rule that will finally display our third level un-ordered list out.

#navigation li:hover ul li ul {display:none;}
#navigation ul > ul > ul ul li ul {left:110px; background-color:#0099CC;}
#navigation ul > ul ul li:hover ul {display:block;}

Great so here we point all the way down to our second level un-ordered list and assign a pseudo hover behavior to it. We then move onto pointing at the third level un-ordered list and set a display of block.
Let have a look-see at what our vertical menu now looks like shall we?

Thats it everyone, you have just created a pure CSS vertical menu with sub level pop outs that is completely cross browser friendly.

Here is a working example of the pure CSS vertical menu

PLEASE NOTE: The above example works in IE5 and IE6 because of the pseudo-hover fix that can be found here. Please read this pseudo-hover fix tutorial if you are trying to get this or even the Pure CSS Horizontal Menu to work in older versions of IE.

[IF YOU WANT AN INFINITE AMOUNT OF SUB MENUS PLEASE REFER TO THIS TUTORIAL.]

Thanks everyone.

Devin R. Olsen

Three Column Layout in Less Than Ten Lines of CSS

Devin R. Olsen — Thu, 10 Sep 2009 02:30:57 +0000

Many developers have dedicated their time and efforts such as me to try to move developers over to the proper standards of web code and away from older or non w3c approaches to site designs. One of these long used but improper approaches to site designs is the dreaded table use for your sites layout.

Tables were never meant to be a websites layout backbone as IE and Microsoft FrontPage have been advocating for years. Today however most developers know to stay away from tables unless to display data in an actual table format and now stick to XHTML and block elements such as division boxes (

The problem that arises is that even though the use of CSS and block elements actually gives us the developers a more dynamic and cleaner way for working with complex layout structures it lacks some of the essentials in creating what we consider to be a standard layout in the ideals of web design. One of these paradoxes is the three column layout and our understanding of how this layout should act according to how we all have grown with the web. If you think about what you would consider a three column layout to be and how it should function you might come up with the following:

Any column height determines the overall height of the layout.
Fluid layout and wont break under browser font size changes.
Column colors and center cell color can differ.
Column colors and center cell color can extend to the full height of the layout.

Seems simple enough, but in fact many great minds have been trying to accomplish the best approach to meet these four simple requirements or more with use of XHTML and CSS for years were a table three column layout can already achieve this. I myself have been spending a great amount of time trying to come up with the most compliant and cross browser friendly method that achieves the above requirements for a three column layout. My first attempts were to try to study what is already out there and see what ground has been broken in this three column layout battle and I found lots of creative yet very similar method out there that even got me distracted from what might be accomplished is you simply would think outside of the box.

Everything I had found tackled the three column layout and above requirements by doing what we have been taught for years now about proper block element design and that is something call the box model method that says we must nest elements to properly apply padding, margin and height styles. So it was no wonder that I too got sucked into this approach to accomplish the perfect three column layout. What I found that if you simple stop and rethink maybe even give and take a little you can accomplish this three column layout but do so while making it completely cross browser friendly and less than 10 lines of CSS.

Yes you read right I did say that I have accomplished this most sought after layout with less than 10 lines of CSS code. So with the little history lesson out-of-the-way and our full understanding as to why were are even sitting here talking about this layout we can begin to get started with this tutorial.

In this tutorial I am going to show you how to create the perfect three column layout. This three column layout is designed under the common screen resolution of (1024×768) and meets all of our above requirements while again under 10 lines of CSS code! Let’s get started by first creating our html structure for our three column layout.

Ok so far this is a great structure to create a three column layout. We have our header and our footer boxes not always a must but give our layout that desired look we are after. Next we have our two left and right columns and in the center of the two we have our center column. Each column has a nested div box in order for us to add padding to our columns and the content they will hold.

Ok now let’s move on to our CSS portion of this tutorial.

body{}
#main{}
#wrapper{}
#header{}
#footer{}
.column{}
.center{}
.caps{}
.column div, .center div {}

Let us break down the first five CSS rules.

body {text-align:center; background-color:#ccc;}
#main{margin-left:auto; margin-right:auto; width:980px;}
#wrapper{float:left;}
#header{height:90px; border-bottom:#ccc solid; border-width:1px;}
#footer{height:30px; border-top:#ccc solid; border-width:1px;}

Our first rule is pointing directly to our documents body tag and has a text align of center and a background color of light gray. I set our body’s tag to have a text align of center for IE5 browser to center our proceeding child elements to the pages over all width and I gave our body a background color to contrast our three column layout once it’s finished.

Our next rule is named #main that has two margin rules (margin-left and margin-right) both of which are set to auto. We also give a set width of 980px to our #main rule. We set its margins to auto in order to align it to the center of our pages over all width and give it a width of 980px for a safe real state under a 1024×768 standard screen resolutions.

Next is our rule named #wrapper and it has a float rule of left to properly float any child elements nested within it that also carry a float rule.

Our last two rules (#header & #footer) are for our header and footer elements that are self-explanatory and of user preference.

Moving on lets look at our next two CSS class rules.

.column{width:165px; float:left;}
.center{width:650px; float:left;}

Our first class rule is .column and is a rule for both our left and right columns and has a width of 165px and another float set to a left in order to properly float all our columns next to each other rather than over each other.

Our next class rule is .center and is for our center column. This class rule also has a width and float rule but this time I use the remaining width of our 980px to fill up with our center column. (980 -165 -165 = 650)

And last but not least our last two CSS class rules.

.caps{width:980px; float:left; background-color:#FFF;}
.column div, .center div {padding:15px}

Ok so our first class rule here is .caps and is used in our header and footer elements. I call it caps but because visually it’s like a soda can, our header and footer elements cap both the top and bottom of our three column layout. This rule “.caps” has a width of 980px to span our fully allowed width and again a float left rule to properly stack header and footer over and under their sibling elements.

Now our last CSS class rule points to our left and right columns child div element .column div as well as our center columns child div element .center div. This rule gives all column children div elements a padding style of 15px around all sides to space out content within each column.

Great now we have a complete understanding of our HTML structure and our CSS rules it’s time to point out what makes this approach so different from the others. Remember our requirements?

Any column height determines the overall height of the layout.
Fluid layout and wont break under browser font size changes.
Column colors and center cell color can differ.
Column colors and center cell color can extend to the full height of the layout.

Ok right now as this tutorial stands we have successfully completed 3 out of the 4 requirements for our three column layout. The only one that is not yet fulfilled is the last requirement.

“Column colors and center cell color can extend to the full height of the layout.”

If I was to go in to our column classes and play around with our columns background colors we indeed are in control of each of our columns color. The problem is however once you begin to add content to anyone of the columns you soon realize that the colors of each column do not extend to the full height of the layout when extending the layouts height manually with content in any one of the columns.

The solution to our last requirement is not one of pure CSS, CSS hacks, box model padding and margin tricks. What I suggest is a background image to define all three columns and colors that can span the full height of our #wrapper CSS rule. In Photoshop I have created an image that has a width of 980px (our respected real state for a standard screen resolution) and a height of 500px. I then divide up the image in to our three column sizes (left=165px center=650px right=165px) and added a drop shadow to my left and right sides that points in over my center column like so.

Next change the canvas size of this image to be that of only 1px so our browser only has to load a tiny strip of our background image and with the use of CSS we will tell our browsers to repeat the image vertically for us. By making our image only 1px tall it makes our background load nearly at 1 second down all the way to a 14.4 dial up modem so no poor loading times should result from this method.

Now in Photoshop save the image for web and make it a gif image and name it whatever you like. My background image has drop shadows that consume up to 9 shades of gray so I tell my save for web dialog to only utilize up to 9 colors for my background gif. The color utilization for you and your own background color will vary so please take note of this.

Our last step is to go back to our #wrapper CSS rule and add our new background image and repeat it vertically.

#wrapper{float:left; background:url(images/standard.gif) top left repeat-y;}

See how we have added a background rule (not a background-image rule) this rule supports images, alignment and repeat styles. URL is the location of the image relative to our document and top left is how I want to position the image in my elements background while repeat-y repeats the image in a y-axis (vertically).

That’s it folks, we have successfully created a fully cross browser friendly three column layout in under 10 lines of CSS code.

CONCLUSION
Some may say that this is not the best way to accomplish this three column layout with our above requirements while at the same time will point to far more complex and long-winded CSS rules to accomplish the same three column layout. Some of these complex methods to the three column layout consist of hacks to make them cross browser friendly or simply do not support all browsers. This is simply a method I like to use for the convenience of it and light weight / simplicity of the structure and CSS.

VIEW WORKING EXAMPLE NOW

Thanks I hope this helps a few other there.
Devin R. Olsen

The !important Use In CSS

Devin R. Olsen — Thu, 10 Sep 2009 02:29:45 +0000

Sometimes we must isolate out specific versions of IE that give us grief as developers. There have been many discovered avenues in isolating certain versions of IE out of our style scheme to give specific instructions to, but none are as subtle as the !important. That’s right the !important use is for IE related issues ONLY! Aside from the ridicules fact that we have a procedure to make this one browser obey our code, let’s look at how the !important procedure works and can help us.

!important is basically giving importance to a style over all other browsers except IE6 and below. IE6 and below can’t recognize it, therefore skips over our style and hunts for another of its kind. Again because we are giving our style importance, all other browser will do the opposite and only read our important style and skip over any others.

So let’s say we want all browsers except IE6 and below to give an element a width of 500 pixels, but in IE6 and below we want this same element to have a width of say 502 pixels. We would simply use the !important helper as follows:

#element {width:500px !important; width:502px;}

Simple as that folks, now everyone in browsers who are IE6 and above equivalence will see this element at a width of 500 pixels while IE6 and below will receive our 502 pixels.

That was painless right?

Devin R. Olsen

Rounded Corners with CSS and One Image

Devin R. Olsen — Thu, 10 Sep 2009 02:28:40 +0000

Today I want to talk about how to create that rounded corner look you see popping up all over the internet.

Why rounded corners ?

Well like most web design fads it’s a more dynamic and appealing way to server your site’s content up to the user.

Are rounded corners necessary?

Absolutely not, but hey back in the beginning of web development neither was a lot of things such as background colors HAHA.

Is this the only way to make rounded corners?

No and I doubt its even the best way it’s just my technique I like to use you can find hundreds of other rounded corner tutorials out on the net.

(Note: In time this technique will be obsolete due to CSS3 and the ability to create rounded corners with purely CSS. You can use CSS3 techniques today but unfortunately a few well used but not so much liked browsers do not support CSS3 yet and most likely won’t for quite some time to come.)

Let’s start off with our blank document.




Rounded Corners Tutorial

Now let’s create our html structure of our content box and its four corners. I am going to use a combination of a div box and an un-ordered list because its easier to maintain in an actual html document that may have hundreds of lines of code.

Place the following inside your body tags.

Now let’s create a few CSS classes for our content cell and its four corners. We use classes because the potential of us using multiple boxes with rounded corners is high. With strict XHTML standards you are only allowed to use CSS id’s for elements that occur once on a page but classes can be used with multiple elements on the same page.

In our documents header tags add the following.

We now have three classes in our styles. (.cell, .cell ul and .cell li) Let’s break down each one so we can get a good idea of what is going to happen with these classes down the line.

.cell {} is the class for our main div box container that will hold not only our content but also our four corners.

.cell ul {} is using our first class to point to any un-ordered lists we have inside our content div box.

.cell li {} is like the (.cell ul) in the manor that it too uses (.cell) to point to any un-ordered lists we have in our content div box but it’s specifically pointing to all list items within an un-ordered list that resides in our content div box.

Let’s now start adding properties to our classes. Make your CSS look like the following.

.cell{
position:relative;
padding:21px;
background-color:#f8c771;
float:left;
display:inline;
}
.cell ul{
margin:0px;
padding:0px;
}
.cell li{
list-style:none;
}

In our .cell class you can see that we have created a background-color and a padding of 21px, I use a padding of 25px because in this tutorial we are going to create some fat rounded corners that are 20px in radius so we use 21px to give us extra 5px padding from our boxes edges and corners. We also use the odd number 21 instead of 20 because some versions of IE mess up upon to great of a font size change resulting in a 1px border on some corners.

We have a background-color property here that is set to my desired color. You may change this background color to whatever you like but note that if you do you will have to change our corner image that we will cover here in second to your new background color.

I have also placed a position:relative; property in our .cell class because we are going to be using a position of absolute for our four corners. If I didn’t have the position:relative; in our .cell then when we set our four corners to be absolute they would be positioned absolute to our document and not absolute to our div box container.

Finlay we have a float of left and display of inline. For IE users that don’t set a desired width this is important because with our floating our .cell things get messed up in versions of IE5 and IE6. As a good practice always include display of inline when floating an element.

.cell ul has set its properties of margin and padding to 0px in order to make sure our four corners will be fit snug to our content div boxes four corners and have no un-needed spacing that’s automatically created from un-ordered lists.

Last we have a list-style:none; property in our .cell li. We use don’t want any list styles such as dots appearing next to each

we use in our content box so we take them out with this property.

Next we are going to create classes for our four corners. Add the following to your CSS.

.tl{}
.tr{}
.bl{}
.br{}

These classes stand for top left(.tl), top right(.tr), bottom left(.bl) and bottom right(.br). Because we are going to be positioning each of these as relatively absolute to our content div box we need to specify their positions.

Add the following property’s to each of these classes.

.tl
{top:0px; left:0px; background:url(images/corners.jpg) top left no-repeat;}
.tr
{top:0px; right:0px; background:url(images/corners.jpg) top right no-repeat;}
.bl
{bottom:0px; left:0px; background:url(images/corners.jpg) bottom left no-repeat;}
.br
{bottom:0px; right:0px; background:url(images/corners.jpg) bottom right no-repeat;}

Ok here you can see we have a top and either left or right property for the top corners. For the bottom corners we use a bottom and either a left or right property and again all these are doing is positioning our corners inside our content box.

Now you might have noticed we are also using a background property for each of these corners. The background property is calling an image I created in Photoshop and we are positioning the image inside of our corners and telling the background not to repeat.

Because this is not a Photoshop tutorial I will just show you the image we are using so you may get a clear idea as to why I have positioned the image and set a no-repeat in each corner.

Here is the image that makes our rounded corners.

HEY THAT’S NOT A CORNER!

Indeed it’s not but to save time and memory it’s wise to make a single image that is a circle and is twice, let me repeat that “TWICE” the size of our desired corners.

In this tutorial our corner radius is 20px so we therefore make our circle image 40px wide and 40px tall.

Ok remember how I told you we are going to position our corners to be absolute within our container div box? Well we need to make one more CSS class that will make each of our corners position absolute.

Add the following rule and property’s to your CSS.

.corner
{width:20px; height:20px; position:absolute; z-index:1;}

With this class we are setting each of our corners to have both a width and height of 20px, position to be absolute and have a z-index of 1. Z-index is a way to tell the browser to make our corners priority number one when it comes to a rendering hierarchy. So with z-index:1; our rendering hierarchy will go corners->content->container box.

Let’s take a look at our results.

Hmm looks like a long tube of some sorts.Let’s add some dummy content to it in order to see if our box is stretchy and won’t break if we increase our browsers font size.

Make your HTML look like the following.

Nihil eligendi intellegebat et sit, et sit assum aperiam utroque. Augue debitis in sit,
duo an eros saepe saepe ">timeam. Reque erant efficiendi ad vix, nobis saepe mucius no mel. Cu pro diam
probo ne ">convenire, duo ad senserit scripserit philosophia. Admodum commune convenire vix ne, sed
eu tota omnis inani. Odio impetus laoreet usu an, cu tamquam lucilius urbanitas duo, an postea
platonem dissentiet mel.
Qui porro aliquip placerat ei, te eum dicam habemus senserit. Usu an esse saepe efficiantur,
sea at debitis platonem adversarium, in salutatus consequat vix. Altera blandit suscipiantur
ius eu, autem iriure scripserit vix ut, eam ex apeirian postulant. Vis atqui aperiri fuisset ad,
eam te adolescens interesset. Erat iusto propriae pri id, ea sed veri scripta imperdiet.
In quo dicit invidunt intellegam, his vidisse moderatius instructior at, mel dolores consetetur
complectitur eu. Enim utinam voluptatum ad est, no eam iusto integre suscipiantur. Sea cu noster
expetendis suscipiantur, ea mea kasd vidisse patrioque. Tantas feugait suscipit per ad, an quas
soluta latine mei. Iudico discere comprehensam an vix, magna scripserit cu usu, quo eu lucilius
patrioque. Offendit lobortis mea cu, no has essent dolorum molestiae.
His autem verear dolores ex, dolor veniam temporibus eu eos, in amet kasd magna qui.
Mazim equidem adipisci mel an, ea quidam omnium deseruisse est, usu debet facilis abhorreant ex.
Est ea ubique qualisque definitionem, ex ignota commune molestie his, ei est civibus accusam.
An usu dicta praesent partiendo, usu autem persius no, adolescens efficiendi appellantur qui ex.
com cu unum putent ornatus, vel dico nusquam et.

All content needs to go in between our top corners and our bottom corners and be wrapped in its own list item tag (

) in order for it to work correctly with Microsoft IE.

Here is our final results.

Awesome couldn’t ask for more!!

I would like to point out just one more thing that I always thank the CSS gods for and that’s the fact that this whole technique wouldn’t be possible if we couldn’t use multiple classes in a single element. Remember our html code I told you to put into your body tags of the document? I would like to point out that all

corners are not only using their unique class for top bottom and left right positioning but also our .corner to set all corners dimensions and position:absolute; with one fell swoop to same time and memory again.

That’s it everyone I hope this clears some things up and or inspires people to create some awesome looking designs.

Here is a demo of the whole thing if you want to play with it.

Thanks.

Devin R. Olsen

Pure CSS Light Box

Devin R. Olsen — Thu, 10 Sep 2009 02:27:48 +0000

VIEW WORKING EXAMPLE OF OUR PURE CSS LIGHT BOX NOW

A light box is web slang for a way to divide and present such things to your viewers as pictures in a gallery or special site notices. Today I wanted to quickly show you how to create a pure CSS light box. Lets start with our light box structure.
Create a new document and add the following:


    On
        Off

Here we have a few nested div boxes that make up the structure of our light box. Each division box (div) has a specific class.

We have four elements with the following classes.

onLight
offLight
lightBox
content

[onLight] Any text directly within the onLight class is displayed as the element that turns on the actual light box so this could be anything from pictures to text or whatever.

[offLight]Anything in the offLight class is what displays as our button to turn off our light box so even this could be images or content.

[lightBox]Light Box class is purely for structure and style, so always add your light box content within the class “content”.

Ok I hope I didn’t lose any of you out there I just really wanted to break down the structure so we may get a clear understanding of our CSS that performs all the function behind our pure CSS light box.
With that done let’s move onto our light box’s CSS.

First add the following to the head of your document.

.onLight {}
.offLight {}
.lightBox {}
.content {}

Ok let’s break down each rule and their functions before we move onto the style properties that they encompass. We have the following important css rules:

.onLight {}
This is the rule that makes up our light box trigger structure.
.offLight{}
This is the rule that makes up our light box kill structure.
.lightBox{}
This is the rule that makes up our light box background and canvas area.
.content{}

This is the rule that makes up our light box’s content area.
Ok now that we have our basic CSS rules let start to populate them with the important style properties and make this light box work.

Make these onLight and offLight classes look like the following:

.onLight {padding:2px; width:20px; background:#999; border:#333 solid; border-width:1px;}
.offLight {
    padding:2px;
    z-index:200;
    width:20px;
    background:#999;
    border:#333 solid;
    border-width:1px;
    position:absolute;
    top:535px;
    right:310px;
    display:none;
}

Our onLight class has styles that help for the purposes of this tutorial make our onLight look like a button. So every style property in this class can be completely customizable to your needs.

Next we have our offLight and it too has a majority of styles that meant to make it look like a button. The only very important styles here that we must focus on are the z-index, display and position styles. we use a position of absolute to position our offLite element anywhere we would like around the actual light box its self.
We also use a z-index of 200 to make sure its order of rendering hierarchy is high enough to be visible when our light box is active. our last is the display style and its set to none in order to make sure our offLight is not visible until told so.

Ok lets move onto the last two class and their css styles.

.lightBox {
    width:100%;
    height:100%;
    float:left;
    position:absolute;
    z-index:100;
    background-color:#999999;
    top:0px; left:0px; right:0px; display:none;
    opacity: .80; /*FOR ALL OTHER BROWSERS AND DEVICES*/
    filter: alpha(opacity=80); /*FOR IE7*/
}
.content {
    width: 600px;
    height: 440px;
    border: solid 2px #fff;
    background: #ccc;
    margin-top: 20px auto;
    position:absolute;
    z-index:200;
    top: 30px;
    display:none;
    padding:20px;
}

Ok there is a lot to break down here so I am only going to cover the important styles and leave the rest up to you the developer to decide.

.lightBox is set to a width of a 100% and a height of a 100% to take up the whole pages dimensions to create our light box’s background or rather canvas. we in conjunction of width and height also use a position of absolute to break our light box out of our structured flow to help not destroy our overall structure when the light box is active. We also have a z-index of 100 to again give set the order of our rendering hierarchy to be high enough that its layered over our document.

Ok the lightBox rule also has two important rules that are for an opacity CSS feature that makes our light box canvas or rather background transparent. We have to declare our opacity twice, one for IE and another for all other browser. I have my settings set to 80% opaque. There are also additional top and left styles that position our lightBox to start in the upper left hand corner of our document and then proceed onto height and width of a 100%;

.content again most of these are set to my preference here for this tutorial so I will only cover the most vital styles. We set a position of absolute and z-index to our content rule to again position and layered the content box above all other layers. Display is set to none to hide the content element from viewers until told otherwise.

Ok we have just a few more rules that involve some in dept talking in order to give our light box proper functionality. So add these rules to our CSS now.

.onLight:hover div, .offLight {display:block;}
.offLight:hover + .lightBox {display:none;}

Our first new rule uses a CSS2 hover pseudo class to control the visibility of our light box upon user interaction with our .onLight and .offLight elements.
Basically we point to our .onLight element and state if its being hovered to locate our .offLight element and turn it’s display none to display block.

Next we are not only using a pseudo hover class but an adjacent sibling selector. We are first pointing to our
.onLight element and state that if we hover over it to locate its previous or next sibling element “.offLight” and turn its display to none.

So think of these last two rules as the on and off functions for our pure CSS light box.

We have one final css rule we must add to help with some browser issues and our height of a 100% in our .lightBox.

Add this last rule to our style.

html,body{height:100%;}

With this last rule we set both our html document and its body tag to be a height of a 100%. Once you do this any immediately nested element will to be able to use a height of 100%.

NOTE: THIS PURE CSS LIGHT BOX IS ONLY CSS2 COMPATIBLE THEREFOR WORKS ONLY ON IE7+ FF1.0 – 3.0 AND SAFARI. THIS MEANS THIS METHOD OF LIGHT BOX WILL NOT WORK WITH IE5.5 OR EVEN IE6 WITHOUT THE USE OF JAVASCRIPT.

BECAUSE WE RELY ON THE CSS2 SELECTOR, NOT EVEN A PSEUDO HOVER FIX FOR IE5 AND IE6 WILL FIX THIS METHOD.

VIEW WORKING EXAMPLE OF OUR PURE CSS LIGHT BOX NOW

Thanks I hope this helps a few other there.
Devin R. Olsen

Three Column Layout in less than 15 lines of CSS

Devin R. Olsen — Thu, 10 Sep 2009 02:24:57 +0000

This is a follow-up to my Three Column Layout in less than 10 lines of CSS tutorial but in this one we are going to be using, no background images no JavaScript and 100% pure CSS. This method only uses 14 CSS rules making it very light weight, easy to maintain, SEO and cross browser friendly. If for what ever reason you feel you might want to use this method but don’t want to follow the tutorial I have here you can view / build a working demo by going to my:

Thee Column Layout Builder Tool / Live Preview

The Three Column Layout Builder Tool is a tool that belongs to a set of tools titled project Mariah I develop to make you the reader’s life much easier to practice W3C and best practices in web design. Ok let’s get onto the tutorial for the rest of the readers.

Lets start off with a blank document.





Untitled Document

Now in your body tags add the follow html structure. We will start off by breaking down how this structure is layout out and why its important to us before jumping into the CSS.

Take a look at our first main containing div that we have given an id of “wrap” and a class of “main“. We use a main container or “wrapper” block around our entire layout to align the whole layout to our documents center. Next we have another containing div box with our first that has and id of “float” and class of “float“. We use this second container or “wrapper” block around our layout as well to allow a layout align of center but also support div block floating ability’s.

Next we have a div block with an id of “header” and this is the location of our layouts header information. There is also a div block with an id of “footer” down below and this is the location of our footer information. Between the “header” and “footer” blocks is a third block that has an id of “center”. The “center” block acts as another container or “wrapper” for our three columns (content, left and right).

The first div block listed in our “center” block is a block with a class of “content“. Next is the div block with the id of “left” and last we have our last div block with the id of “right“. The “content” div block is indeed our location for where we want our center columns information to be stored so don’t let the names throw you off.

Ok lets take a look at our CSS structure. Add the following to your header tags.

In between these tags add the following css class rules.

body          {text-align:center;}
.main         {width:980px !important; width:982px;}
.columns      {width:145px; float:left; padding:10px; position:relative; z-index:100; overflow:auto;}
.float        {float:left; display:inline;}
.topBottomBdr {border:#000 solid; border-width:0px ">1px ">0px ">1px 0px 1px 0px;}
.leftRightBdr {border:#000 solid; border-width:0px ">1px ">0px 1px 0px 1px;}
.content      {margin:15px;}

Our first rule here is our body tag and its declaring a text-align of center. We set our body to be a text-align of center to fix IE5 and IE6 issues with the use of margin floats to center our layout to our document.

Our second rule is .main and has a width of 980px and we again set this width to make our layout compatible with the standard screen resolution of 1024×768. You will notice that we have used something called !important here. If you don’t know what !important is I suggest you read this quick break down on how it helps us the developers. Just note that we use two widths here and the !important to isolate IE6 and below who have problems with extra width totals because of borders.

Our Third rule is called .columns. Here we have set our width to be 145px (the amount of our desired left and right column width minus the 10px padding in both columns). We have set the float to be that of left and a padding of 10px, position of relative, z-index of 100 and an overflow of auto. We set our float to be left to abide by the rest of our layouts flow and our desired results. A padding of 10px is added to give cushion between our content and our div column walls. The position is set to relative to give allow use to work with our z-index style.The z-index style is a way to order our browsers rendering hierarchy and there for our columns are always on top. Our last style is the overflow rule and we set it to auto and this leave it up to our browser to decide if a hidden or scroll action should be taken place. With overflow auto if our left and right columns are shorter than the content will allow the browser will take action.

Our fourth rule is named .float and this rule give a float of left to the rest of our columns but also has a display of inline to make our float compatible with IE6.

The fifth and sixth rule are of preference and are our borders to divide up our columns footer and header div blocks from one another. topBottomBdr =Top Bottom Border while leftRightBdr = Left Right Border.

Our last CSS rule is named .content and it has a margin of 15px in order to give our center column a padding between its content and div blocks walls. We also use a position of absolute and top 0px to override our content block from pushing our left and right column below its desired content amount.

Wow that was a lot… are you ready to move on? Ok add these last CSS id rule to our CSS style tags in your documents header.

#wrap   {margin-left:auto; margin-right:auto; text-align:left;}
#float  {background-color:#CCC;}
#center {margin-left:165px; margin-right:165px; width:650px!important; width:; background-color:#FFF; position:relative;}
#left   {margin-left:-164px;}
#right  {margin-right:-164px; float:right;}
#header {width:100%; height:100px; background-color:#FFF;}
#footer {width:100%; height:20px; background-color:#FFF;}

Ok here we have our last seven css rules so let break down these last few.

Our first CSS rule is named #wrap and is the id for our main div block. Its margin-left and margin-right is set to auto to align our layout to the center of our document but also used over (margin:auto;) to fix IE6 centering issues. We also set its text-align to be left in order to override our body text-align center fix.

Our next CSS rule is for our next container div block called #float. Here we set its background color to be what ever we prefer resulting in changing our left and right columns color.

Next is the #center CSS rule that also has a margin-left and margin-right but these are set to the desired width of our columns with are compensating for our left and right columns padding of 10px. The width is set to be that of 650px because our over all layout width (980px) minus our desired column width (165px) x 2 columns = 650px. (Notice that we again use the !important procedure to fix IE6 issues.) Finally we set its background-color to be that of #fff(white) in order to differ our center columns background color from our columns background color. Because #center is our parent container for our .content div block that uses a position of absolute we must then give our #center a position of relative in order to make sure our .content block doesnt break our of our layouts flow and structured order.

Next we have the #left rule and #right rule. Our #left rule has a margin-left of -164px and we do this to offset the left column by the desired column widths from our center div block plus the 1px for our left and right borders. For our right column we again offset our right column by its desired width but this time we use a margin-right style. In our #right rule we have also broken our right column out of our layouts flow by using the float right style.

Next is our #header and #footer rules and these are up to you the developer as the only state widths, heights and background colors.

Guess what folks, you have just created thee perfect 100% pure light weight cross browser friendly CSS three column layout. If you would like to see the results of our labor click the link below to see a working example / layout builder tool.

I hope this help many of my readers and also inspires people to create some awesome designs.

Thee Column Layout Builder Tool / Live Preview

Devin R. Olsen

Learning Intermediate CSS Faster Than Ever.

Devin R. Olsen — Thu, 10 Sep 2009 02:20:17 +0000

Today we will be expanding on our previous tutorial “Learning the basics of CSS faster than ever” into what areas we are permitted to write our CSS. There are three areas we are permitted to write CSS and these are.

Combining Rules -
Selectors -
Pseudo Class -

Inline

We talked about how to write inline styles in our last tutorial. We even discussed how even though it’s possible and sometime necessary, it’s not always wise to clutter you document elements with inline styles. Writing inline CSS styles or rather writing styles directly into the elements is not only going against what we are trying to accomplish with CSS, but the styles are only downloaded on a per-page basis.

This means that if you write all your document element styles inline then they are never truly being cached in a visitor’s browser. Each page will only load that much slower depending on how many styles you have in your documents elements.

More inline styles = more page loading time on a per-page basis

More inline styles = a step backwards in the CSS mind frame

You may be asking yourself “Well why then do we have the ability to write styles inline?” The answer to this is simple, sometimes you have to override a decelerated CSS rule from one of the two other areas we are going to be talking about.

You may be asking yourself “Why would I want to override a decelerated CSS rule?” Sometimes you run into a situation where you have a style rule that cascades down over ever page for a particular element or two. Then lets say on one particular page you might need to have these two elements be slightly different from the rest of the pages. You would then write these styles inline in order to take control of these two elements on this particular page. Because inline styles is that last reading point for our browsers all inline styles override any previous decelerated CSS rule. Hence inline styles per-page basis idealism.

So there is a need for inline styling, but for only special situations. Only use inline styling for special situations such as this and never abuse them.

Ok everyone clear why we have CSS inline styling and how not to abuse it? Perfect let’s move onto our header area.

Header

Every html document has a header () but did you know you can write CSS styles in your documents header? All you need is to open up a space where you would want to write your CSS with “style tags”.

These are style tags and it’s a way to tell the browsers that this area contains CSS. Like I said your style tags belong in your header tags like so:

There are two questions you should now be asking yourself about these style tags.

Are style tags just like inline styles in that they too are a per-page basis method?

Will the number of styles you have in your style tags also affect your pages loading time?

Answer to these two questions is yes. You may be wondering “What’s the difference between inline styling and writing your styles in the header?” At first it might be confusing about what the difference between inline style and style tags but actually there is one huge difference. In style tags you have the ability to use classes and id’s, where as inline styling you don’t.

Imagine with me if you will that again we have 50 images on a page and each image looks like this:

If we simply take these style out of all 50 images and replace them with:

We could then sum up all them styles into one class rule thats named “.myImages” in our style tags like so:

See the big difference between writing inline style and writing in your documents header? With style tags you can begin to sum up all the inline styles into rules that can then be cascaded down this single document.

Again if you have a style that is being cascaded down your entire site but then have a few pages that you need to slightly look different from the rest. You could then write your style rules in your headers style tags and apply them to your elements accordingly instead of having to write so many inline styles.

Awesome… right?

Everyone clear that we use inline styles to overwrite existing declared style rules. Everyone understand that we use header style tags to help cut down inline style and to help our inline styles mission of overriding existing style rules? superb, let’s move onto our last permitted location of CSS.

External

I just used the words “Permitted location” and the keyword here is location. Our last area of permitted CSS is the external CSS file. Ah yes the external CSS file the one and true way to cascade rules over your entire site. Up till now you might have heard me mention how inline styling and style tags are for overriding an already declared CSS rule. These pre-existing rules I was talking about only come from the external CSS file. So the chain of command for who overrides what goes as follows.

External CSS file get downloaded first therefor gets overridden by both inline and style tags.

Style Tags rules get downloaded second and only get overridden by inline styles.

Inline Styles don’t get overridden by any of the above.

Perfect let’s take a look at what’s required to bring an external CSS file to our document. In each of our documents header that we wish to link our external CSS file too we must include a
link tag. Here is a link tag for linking CSS files into a document.

This element has three important attributes. The first is “href” and this is the location of our CSS file on our web server. You can have a relative path to your CSS file like this:

href="../../css/styles.css"

Or an absolute path to your CSS file like this:

href="http://www.mywebsite.com/css/styles.css"

Ok the second attribute is the rel=”stylesheet” and this lets our browser know that it needs to download this style sheet first before the rest of our style.
Our last attribute tells the browser that this external file is of made up of text and CSS.
All three of these attributes are required to perform as correct external style sheet link.

Ok so let recap here.

Inline styles are to perform an override of external file css rules for a special situation.
Style tags are to help assist inline styles by allow us to sum up a great number of would be inline styles.
External CSS files is the one and only true way to cascade your site’s style over every page.

Well everyone I think that just about wraps it up for this lesson. I hope this helps everyone to grasp a little bit more on how to use CSS effectively.

Next we will be finishing up our series and discussing advance css.

Thanks everyone.

Devin R. Olsen