CSS for dummies in 10 lines

gaucho1976 · 12-29-2008, 02:20 PM

So I see every day people is asking for CSS fixes in their layouts, most of the time I correct them for fun, and I've noticed the main reason people is getting complicated with CSS is because... they're complicating it for no reason.

So this is a mini tutorial that will help you (I hope) to achieve the dreaded CSS thingy in just... 10 lines of CSS. And to make it more fun, I'll use some techniques that will help you to achieve things that most people is afraid of: same height columns!

So, you can see the sample at http://mozlo.com/css_tutorial/

The sample has a header, a 3 columns body and a footer. If you want more or less columns, simply add/delete the column as you want it (and be sure to change the width for each column). In 99% of cases, you won't want anything more complicated like this.

Are you seeing it? Cool. The html code for the page (without all the lipsum stuff) is as simple as this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">

	<div id="header"><h1>This is the Header</h1></div>

<!--*************************************START LEFT COLUMN ***********************************************-->

		<div id="leftcol"><h2>The left column</h2><p>And the text for the left column</p></div>

<!--*************************************END LEFT COLUMN ***********************************************-->


<!--*************************************START CENTER COLUMN ***********************************************-->

			<div id="midcol"><h2>The middle column</h2><p>And some text for the center column</p>
			
			</div>

<!--*************************************END CENTER COLUMN ***********************************************-->


<!--*************************************START RIGHT COLUMN ***********************************************-->

		<div id="rightcol"><h2>The right column</h2><p>And then again, some text for the right column</p>

</div>

<!--*************************************END RIGHT COLUMN ***********************************************-->

<hr style="display:block; height:0.1em; clear:both; visibility:hidden;" />
<div id="footer">Footer</div>

</div>
<!--*************************************END MAIN CONTAINER ***********************************************-->
</body>
</html>

let's analyze this: first of all, there's something that jumps to the view at first sight: COMMENTS! . Yes, they jump to the view because I wanted that and because that's what comments are for: to help you visualize everything at first glimpse. USE COMMENTS, LOVE COMMENTS, EMBRACE COMMENTS. If you think the 2kb they may add to a page are a bandwidth problem, well... you're in the wrong business.
????: NamePros.com http://www.namepros.com/webmaster-tutorials/546457-css-for-dummies-in-10-lines.html

Then you have the header (with h1 tag) the cols (named in a way you'll recognize what they are at first sight) and a footer. You'll also see some "strange" code, and styled HR, but don't worry, I'll go to it later.

Once you have your html, you need to start define elements. I'll make it sweet and simple: using px instead of ems or percentage, this one uses a container with 960px width, side columns are half of what the main column width is. Here goes the CSS code:

Code:

* {margin:0px; padding:0px;}
body{background:#def5f9; font-family:verdana, helvetica, sans-serif; font-size:0.8em}


#container{position:relative; width:900px; background:#f9f9f9; border:1px solid #900; margin:auto auto; padding: 10px 5px; overflow:hidden; text-align:center; z-index:1;}

#header{width:890px; background:#333; margin:auto auto; padding:16px; margin:-16px; margin-bottom:10px;}
#header h1{color:#fff; text-align:left;}

#leftcol{width:240px; float:left; background:#f6d4d4; padding: 10px 5px; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px; }
#midcol{width:360px; float:left; background:#a3f9d8; padding: 10px 5px; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px; text-align:left;}
#midcol p{margin-bottom:10px;}
#rightcol{ width:240px; float:left; background:#fa0; padding: 10px 5px; overflow:hidden; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px;}


#footer{position:relative; width:890px; background:#333; margin:auto auto; padding:16px; margin:-16px; margin-bottom:10px; height:100px; clear:both; z-index:20; margin-bottom:-20px; margin-top:30px; color:#fff;}

let's go line by line (or 2 at most)

Code:

* {margin:0px; padding:0px;} 
body{background:#def5f9; font-family:verdana, helvetica, sans-serif; font-size:0.8em}

Nothing strange here, just defining the colors and font and reseting all margins and paddings

Code:

#container{position:relative; width:900px; background:#f9f9f9; border:1px solid #900; margin:auto auto; padding: 10px 5px; overflow:hidden; text-align:center; z-index:1;}

now, we add some flavor. Everything is quite straight, but we'll use position:relative, z-index:1 and overflow:hidden. You won't normally need them most of the times, but we need it for the 100% height columns and the footer.

Code:

#header{width:890px; background:#333; margin:auto auto; padding:16px; margin:-16px; margin-bottom:10px;} 
#header h1{color:#fff; text-align:left;}

The header uses another of my tricks: padding:16px; margin:-16px; This makes sure the width is 100% overriding any margin or padding I may add to the container box. Tricky but effective.

LET'S GO WITH THE COLUMNS!!!!

Code:

#leftcol{width:240px; float:left; background:#f6d4d4; padding: 10px 5px; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px; }
#midcol{width:360px; float:left; background:#a3f9d8; padding: 10px 5px; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px; text-align:left;}
#rightcol{ width:240px; float:left; background:#fa0; padding: 10px 5px; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px;}

The columns are extremely simple in their layout, but you'll see those 4000px values and will ask yourself WTF! . That's another of my tricks. By applying a huge padding value to the column and then a huge negative margin, the overflow:hidden we used in the container makes sure all columns are 100% height. Neat, huh?

Everything else is just styling (width, bg, color, whatever)

and finally, the footer:

Code:

#footer{position:relative; width:890px; background:#333; margin:auto auto; padding:16px; margin:-16px; margin-bottom:10px; height:100px; clear:both; z-index:20; margin-bottom:-20px; margin-top:30px; color:#fff;}

Here, the overflow:hidden I used in the container box, makes its work again and avoids anything goes "out of the box". The only special thing I had to keep in mind is to add a z-index higher than the container, or it would be below the columns.

Finally, the misterious HR thing: I use that to add a little space when going wild with positive/negative values and clearing all floats. Dirty, but lovely.
????: NamePros.com http://www.namepros.com/showthread.php?t=546457

And that's it! The "impossible to make" in just 10 lines of CSS code. Now you can add divs inside the existing divs or whatever, try new things, experiment and learn!

Hope this helps, if any mod feels like correcting my Engrish, I'd appreciate it

canmark2006 · 02-26-2009, 11:06 PM

Cool CSS tutorial. thanx gaucho1976.

DesignsCincinnati · 03-15-2009, 09:34 PM

That is a fairly good summary of css. Good for beginners and they could obviously do some small research and broaden their horizon.

**-Nick-** · 03-16-2009, 08:56 AM

Thanks very much. Keep posting good tutorials

We surely need them very much

bamaboy · 05-02-2009, 03:29 AM

wow, good summary.

I have been trying css since days now, looks cool
Thanks for the article.

IMEZI · 05-16-2009, 09:56 AM

thanks for the guidelines

interestedenough · 05-16-2009, 09:59 AM

Thanks for the tutorial on CSS.

snowberry · 05-18-2009, 12:22 PM

painless css who knew
props

Ross · 05-18-2009, 12:26 PM

Honestly this IS about as hard as CSS gets. Like the OP said most people complicate it more than they need to.

SeanPreston · 05-19-2009, 01:48 AM

Its quite a good tut actually, ye, good work man!

thedreamer09 · 08-28-2009, 03:59 AM

thanks for the help friend , i was struggling with one template , hope that this will help me out

bodil4o · 08-28-2009, 04:51 AM

Awstsome tut!
Thanks!

kmamaji · 08-30-2009, 03:17 AM

It is a quite interesting tutorial I guess, I got interest on reading as well as much easier to understand. Thanks for giving your time and helping as with an awesome tutorial on css.

somebody_rb · 08-30-2009, 04:07 AM

thanks for the info

Trens · 09-05-2009, 12:30 AM

Thats really easy and also so simple to understand man. Kewl work do some more like this for other fields too so that many may get befitted because of this work you have done.

12-29-2008, 02:20 PM	THREAD STARTER #1 (permalink)
gaucho1976 NamePros Member Join Date: Mar 2008 Posts: 118	CSS for dummies in 10 lines So I see every day people is asking for CSS fixes in their layouts, most of the time I correct them for fun, and I've noticed the main reason people is getting complicated with CSS is because... they're complicating it for no reason. So this is a mini tutorial that will help you (I hope) to achieve the dreaded CSS thingy in just... 10 lines of CSS. And to make it more fun, I'll use some techniques that will help you to achieve things that most people is afraid of: same height columns! So, you can see the sample at http://mozlo.com/css_tutorial/ The sample has a header, a 3 columns body and a footer. If you want more or less columns, simply add/delete the column as you want it (and be sure to change the width for each column). In 99% of cases, you won't want anything more complicated like this. Are you seeing it? Cool. The html code for the page (without all the lipsum stuff) is as simple as this: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head> <title>Page Title</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="container"> <div id="header"><h1>This is the Header</h1></div> <!--***********************************START LEFT COLUMN *******************************************--> <div id="leftcol"><h2>The left column</h2><p>And the text for the left column</p></div> <!--*********************************END LEFT COLUMN *******************************************--> <!--*********************************START CENTER COLUMN *******************************************--> <div id="midcol"><h2>The middle column</h2><p>And some text for the center column</p> </div> <!--*********************************END CENTER COLUMN *******************************************--> <!--*********************************START RIGHT COLUMN *******************************************--> <div id="rightcol"><h2>The right column</h2><p>And then again, some text for the right column</p> </div> <!--*********************************END RIGHT COLUMN *******************************************--> <hr style="display:block; height:0.1em; clear:both; visibility:hidden;" /> <div id="footer">Footer</div> </div> <!--*********************************END MAIN CONTAINER *******************************************--> </body> </html> let's analyze this: first of all, there's something that jumps to the view at first sight: COMMENTS!** . Yes, they jump to the view because I wanted that and because that's what comments are for: to help you visualize everything at first glimpse. USE COMMENTS, LOVE COMMENTS, EMBRACE COMMENTS. If you think the 2kb they may add to a page are a bandwidth problem, well... you're in the wrong business. ????: NamePros.com http://www.namepros.com/webmaster-tutorials/546457-css-for-dummies-in-10-lines.html Then you have the header (with h1 tag) the cols (named in a way you'll recognize what they are at first sight) and a footer. You'll also see some "strange" code, and styled HR, but don't worry, I'll go to it later. Once you have your html, you need to start define elements. I'll make it sweet and simple: using px instead of ems or percentage, this one uses a container with 960px width, side columns are half of what the main column width is. Here goes the CSS code: Code: * {margin:0px; padding:0px;} body{background:#def5f9; font-family:verdana, helvetica, sans-serif; font-size:0.8em} #container{position:relative; width:900px; background:#f9f9f9; border:1px solid #900; margin:auto auto; padding: 10px 5px; overflow:hidden; text-align:center; z-index:1;} #header{width:890px; background:#333; margin:auto auto; padding:16px; margin:-16px; margin-bottom:10px;} #header h1{color:#fff; text-align:left;} #leftcol{width:240px; float:left; background:#f6d4d4; padding: 10px 5px; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px; } #midcol{width:360px; float:left; background:#a3f9d8; padding: 10px 5px; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px; text-align:left;} #midcol p{margin-bottom:10px;} #rightcol{ width:240px; float:left; background:#fa0; padding: 10px 5px; overflow:hidden; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px;} #footer{position:relative; width:890px; background:#333; margin:auto auto; padding:16px; margin:-16px; margin-bottom:10px; height:100px; clear:both; z-index:20; margin-bottom:-20px; margin-top:30px; color:#fff;} let's go line by line (or 2 at most) Code: * {margin:0px; padding:0px;} body{background:#def5f9; font-family:verdana, helvetica, sans-serif; font-size:0.8em} Nothing strange here, just defining the colors and font and reseting all margins and paddings Code: #container{position:relative; width:900px; background:#f9f9f9; border:1px solid #900; margin:auto auto; padding: 10px 5px; overflow:hidden; text-align:center; z-index:1;} now, we add some flavor. Everything is quite straight, but we'll use position:relative, z-index:1 and overflow:hidden. You won't normally need them most of the times, but we need it for the 100% height columns and the footer. Code: #header{width:890px; background:#333; margin:auto auto; padding:16px; margin:-16px; margin-bottom:10px;} #header h1{color:#fff; text-align:left;} The header uses another of my tricks: padding:16px; margin:-16px; This makes sure the width is 100% overriding any margin or padding I may add to the container box. Tricky but effective. LET'S GO WITH THE COLUMNS!!!! Code: #leftcol{width:240px; float:left; background:#f6d4d4; padding: 10px 5px; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px; } #midcol{width:360px; float:left; background:#a3f9d8; padding: 10px 5px; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px; text-align:left;} #rightcol{ width:240px; float:left; background:#fa0; padding: 10px 5px; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px;} The columns are extremely simple in their layout, but you'll see those 4000px values and will ask yourself WTF! . That's another of my tricks. By applying a huge padding value to the column and then a huge negative margin, the overflow:hidden we used in the container makes sure all columns are 100% height. Neat, huh? Everything else is just styling (width, bg, color, whatever) and finally, the footer: Code: #footer{position:relative; width:890px; background:#333; margin:auto auto; padding:16px; margin:-16px; margin-bottom:10px; height:100px; clear:both; z-index:20; margin-bottom:-20px; margin-top:30px; color:#fff;} Here, the overflow:hidden I used in the container box, makes its work again and avoids anything goes "out of the box". The only special thing I had to keep in mind is to add a z-index higher than the container, or it would be below the columns. Finally, the misterious HR thing: I use that to add a little space when going wild with positive/negative values and clearing all floats. Dirty, but lovely. ????: NamePros.com http://www.namepros.com/showthread.php?t=546457 And that's it! The "impossible to make" in just 10 lines of CSS code. Now you can add divs inside the existing divs or whatever, try new things, experiment and learn! Hope this helps, if any mod feels like correcting my Engrish, I'd appreciate it __________________ Mozlo - Keyword Research for Pros at newbie price

02-26-2009, 11:06 PM	#2 (permalink)
canmark2006 New Member Join Date: Jan 2008 Posts: 24	Cool CSS tutorial. thanx gaucho1976. __________________ http://www.bidourlinks.com

03-16-2009, 08:56 AM	#4 (permalink)
-Nick- I'll do it Join Date: Dec 2005 Location: India Posts: 6,927 Follow @keralpatel	Thanks very much. Keep posting good tutorials We surely need them very much __________________ Delq\|Fhur\|Kegh\|Vhir\|Juhy\|Ruuz\|Jyos\|Jupt\|Vhek Webmaster Blog \| Software Downloads Makeup & Beauty Tips \| Sponsor Ads

05-02-2009, 03:29 AM	#5 (permalink)
bamaboy NamePros Regular Join Date: Apr 2009 Posts: 283	wow, good summary. I have been trying css since days now, looks cool Thanks for the article. __________________ Selling: Japps.net wootmovies.com

05-16-2009, 09:56 AM	#6 (permalink)
IMEZI Senior Member Join Date: Sep 2008 Location: IMEZI.COM Posts: 1,597	thanks for the guidelines __________________ WTS Amazon Minisite : Whois & IP check - Best Choice Printer - Cooking Recipe - Weight Loss Programme

03-15-2009, 09:34 PM	#3 (permalink)
DesignsCincinnati NamePros Member Join Date: Mar 2009 Location: ohio Posts: 67	That is a fairly good summary of css. Good for beginners and they could obviously do some small research and broaden their horizon.

05-16-2009, 09:59 AM	#7 (permalink)
interestedenough NamePros Regular Join Date: Nov 2007 Posts: 390	Thanks for the tutorial on CSS.

05-18-2009, 12:22 PM	#8 (permalink)
snowberry Account Closed Join Date: Jan 2009 Posts: 399	painless css who knew props

05-18-2009, 12:26 PM	#9 (permalink)
Ross Senior Member Join Date: Nov 2007 Posts: 2,132	Honestly this IS about as hard as CSS gets. Like the OP said most people complicate it more than they need to.

05-19-2009, 01:48 AM	#10 (permalink)
SeanPreston Senior Member Join Date: Nov 2005 Location: UK Posts: 1,278	Its quite a good tut actually, ye, good work man!

08-28-2009, 03:59 AM	#11 (permalink)
thedreamer09 New Member Join Date: Aug 2009 Posts: 9	thanks for the help friend , i was struggling with one template , hope that this will help me out

08-28-2009, 04:51 AM	#12 (permalink)
bodil4o Account Closed Join Date: Aug 2009 Posts: 164	Awstsome tut! Thanks!

08-30-2009, 03:17 AM	#13 (permalink)
kmamaji NamePros Member Join Date: Aug 2009 Location: famouspoem.blogspot.com Posts: 29 Follow @irfansiddiqui9	It is a quite interesting tutorial I guess, I got interest on reading as well as much easier to understand. Thanks for giving your time and helping as with an awesome tutorial on css.

08-30-2009, 04:07 AM	#14 (permalink)
somebody_rb Account Suspended Join Date: Aug 2009 Posts: 76	thanks for the info

09-05-2009, 12:30 AM	#15 (permalink)
Trens Account Closed Join Date: Aug 2009 Posts: 58	Thats really easy and also so simple to understand man. Kewl work do some more like this for other fields too so that many may get befitted because of this work you have done.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)