How To Build A Pure Css Using Online Tools Tutorial (part 1) Part 1-Core Design

[Saint_Michael 3]

The use of Online tools to design a complete website Tutorial By Saint-Michael AKA Mike A.
On a side note will provide all the files for the complete site from each of the parts just in case you have problems

With this tutorial I will show you how to use specific online tools to create a fully functioning website in pure css with little to no JavaScript to be used. Also their will be some moderate editing to make everything fit and of course to make sure everything is working like it should. The links that you will need to either book mark or save to a file, will be in bold and blue. Also we will be using the Firefox web browser to design this website as it more web complaint then IE, Opera and any other browser. Also make sure your computer is in 1024x768 as this is the standard resolution for all computers and most users.

Step #1. First step is that we need a core layout meaning how big we are going to make the website in terms of height and width and also what we will be using to make our website complete. So the first online tool we will be is the cssCreator Page layout generator. Also for some reason they change this to a members only thing (sign up is free) so you will be making account with them in order to use this tool.
Now you have to remember you don't have to make it ridiculous wide or long, usually you want to be at about 750-900 pixels wide to be able to fit with in the 800x600 resolution users. But you have to remember once you go past the 800 pixel make your users will have to scroll from left to right. Of course by now most computer users have monitors that are 1024x768 would be roughly in the time line of 99-now when 1024x768 was introduced as the standard computer resolution. Of course that how a fluid design works it will stretch or shrink itself depending on the resolution of the users computer. although length is not important depending on what kind of site you have like tutorial sites or say like documentation, but anything 4000 pixels and beyond is just annoyance. However if you can keep it below 1500 pixels and break it down to several sites then you will still be good. Due to the fact that one your giving the users a break to adjust their eyes or stretch their hands. Anyways since you will be the one designing the website it will be up to you where you want to set you website at.

So at This point we know that are website will be at least 1024 pixels wide and 768 pixels long, although since we are using percentages, best way to determine the width of your site as long as you don't see the scroll bar at the bottom then your good. However that will change when you go to a 800x600 resolution then you will see it.

So click on the link above and we will begin the process.

First option is doctype.

Per HTML and XHTML standards, a DOCTYPE (short for âdocument type declarationâ) informs the validator which version of (X)HTML youâre using, and must appear at the very top of every web page. DOCTYPEs are a key component of compliant web pages: your markup and CSS wonât validate without them.

A list Apart

Since we will be using the standard doc type we will be picking either

XHTML Transitional
XHTML Strict
XHTML Frameset

NOTE: Unless you plan on using frames for a fun site don't bother using it for anything else. Due to the fact that search engine bots will not pick it up and thus you won't get properly index into search engines.

The success of the World Wide Web is based in part on the simplicity of the underlying concepts. One URL refers to one and only one page. With frames, this correspondence is lost. A frames-based page has its own URL, but the page itself rarely contains any content. Rather it contains links to other Web pages that contain the actual content; it is these pages that are displayed in the frames. Suddenly the situation changes--a URL no longer points to a page of content but rather points to a frames page which then points to the actual content. The fundamental structure of the Web is broken.

This alone is enough reason to avoid frames, but there is more. Browser support for frames varies, both between browser brands and between versions within a brand. The overwhelming use of Microsoft Internet Explorer has lessened this problem but not made it go away.

The final problem with frames that I'll mention is search engines such as Yahoo! and Google. The break in the URL-content link, mentioned above, can be fatal to a search engine trying to index your page. While some search engines have been programmed to "drill down" through a frames page to the underlying content, you cannot count on it. Given the importance of the search engines in locating Web content and drawing visitors to your site, this is a serious shortcoming.

Now we will be using XHTML Transitional due to the fact it will except most html tag formats without error on us when we validate it. This of course will cause less of a head too, because if you strict and you plan to have this site validated you will have to pay very close attention to which ones you use. Best place to find out the standard tags are here W3.org and W3Schools.com, these two sites keep users up to date on the current standards of web design and also teach you the basics as well.

Now your next option is how do you want the core layout to look meaning, do you want the website to fill out the whole page have it centered within you browser or move to the left? For this tutorial we will be centering this. So go ahead and select the center option. Now as you can see the page the with is set at 100% leave as such, because once you start filling in the website the 100% page with will accommodate and adjust accordingly to what ever you put in.

Next we want to set the minimum and maximum width of the website. With these settings we will able to have the site adjust to the 600x800 resolution and be usable beyond the standard 1024x768 resolution on your computer.

NOTE: This will be adjusted to fit any changes you might make in the future so make sure to remember that.

Now we want a header, footer, left column, right column, so click all of them and then for the header and footer select 200px (which will be adjusted later) and for the columns we want to select 50% so as both columns will equal 100% (also they will be adjusted as we make edits to the site).now to make sure we know what we will be editing choose different colors for each part so you will be able to recognize them until you start setting your own colors.

So with that set click on the generate layout then save the html file and the css into a folder. Now we will be rename the html and css and use these names for future reference. Name the html file index and the css file main.

NOTE: Make sure to edit the html and replace the css link to main as well like this

 

/* generated by csscreator.com */ html, body{  margin:0;  padding:0;  text-align:center; }  #pagewidth{  width:100%;  text-align:left;  margin-left:auto;  margin-right:auto;  }  #header{ position:relative;  height:150px;   background-color:#3C20F3;  width:100%;}  #leftcol{ width:50%;  float:left;  position:relative;  background-color:#565959;  } #twocols{ width:50%;  float:right;  position:relative;   } #rightcol{ width:100%;  float:right;  position:relative;  background-color:#565959; } #maincol{background-color: #FFFFFF;   float: left;  display:inline;  position: relative;  width:0%;  } #footer{ height:150px;   background-color:#9F8C99;  clear:both; }    /* *** Float containers fix: [url="http://www.csscreator.com/attributes/containedfloat.php"]csscreator.com/attributes/containedfloat.php; *** */ .clearfix:after { content: ".";  display: block; height: 0;  clear: both;  visibility: hidden; } .clearfix{display: inline-block;}/* Hides from IE-mac \*/* html .clearfix{height: 1%;}.clearfix{display: block;}/* End hide from IE-mac */    /*printer styles*/  @media print{ /*hide the left column when printing*/ #leftcol{display:none;} /*hide the right column when printing*/ #rightcol{display:none;} #twocols, #maincol{width:100%; float:none;}}

 
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; ><html xmlns="http://www.w3.org/1999/xhtml/; xml:lang="en" lang="en" ><head><title>CssCreator-->XTML 1.0 Transitional Template</title><meta http-equiv="content-type" content="text/html;charset=utf-8" /><link rel="stylesheet" href="main.css" type="text/css" /></head><body><div id="pagewidth" >	<div id="header" > Head </div>			<div id="wrapper" class="clearfix" > 		<div id="twocols" class="clearfix"> 			<div id="maincol" > Main Content Column </div>			<div id="rightcol" > right Column </div>		</div> 			<div id="leftcol" > Left Column </div></div>	<div id="footer" > Footer 	</div>	</div></body></html>

 
Now the final process we will be using is the Lorem ipsum text block in which this will use to adjust height and width for everything. So copy this and paste it 2-3 times in each portion of the html and then save it.
 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 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. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

As you can see it is pretty messed up so we will make the following adjustments.
 

/* generated by csscreator.com */ html, body{  margin:0;  padding:0;  text-align:center; }  #pagewidth{  width:100%;  text-align:left;  margin-left:auto;  margin-right:auto;  }  #header{ position:relative;  height:150px;   background-color:#3C20F3;  width:100%;}  #leftcol{ width:170px;  float:left;  position:relative; left: 0px; background-color:#33729d; } #twocols{ width:81%;  float:right;  position:relative;   } #rightcol{ width:170px;  float:right;  position:relative; left: 0px; background-color:#33729d;} #maincol{background-color: #33729d;   float: left;  display:inline;  position: relative;  width:77%;  border:solid 0px; } #footer{ height:150px;   background-color:#9F8C99;  clear:both; }    /* *** Float containers fix: [url="http://www.csscreator.com/attributes/containedfloat.php"]csscreator.com/attributes/containedfloat.php; *** */ .clearfix:after { content: ".";  display: block; height: 0;  clear: both;  visibility: hidden; } .clearfix{display: inline-block;}/* Hides from IE-mac \*/* html .clearfix{height: 1%;}.clearfix{display: block;}/* End hide from IE-mac */    /*printer styles*/  @media print{ /*hide the left column when printing*/ #leftcol{display:none;} /*hide the right column when printing*/ #rightcol{display:none;} #twocols, #maincol{width:100%; float:none;}}

 
As you can see with this we got everything to fit without the need to use scroll bars going left to right to see our website. Save any changes you made and your core set up is basically done at this point. Also I highly suggest that once you start the major coding that you have a back up copy just in case your html editor crashes after a save or your computer crashes after a save, which of course should rarely happen but you know how computer like to mess with us when we least expect it. Of course you could click the exit/close button by accident, I must admit I done it myself and had to figure out what I did wrong and then delete it.

By now you may want to choose your primary color for your website usually for a background you would want to stay with one for now and then adjust later. So the color I will pick will be #33729d. Also you will need to add borders to everything at least for now until you can clearly separate everything so you add the following to your css:
 

/* generated by csscreator.com */ html, body{  margin:0;  padding:0;  text-align:center; }  #pagewidth{  width:100%;  text-align:left;  margin-left:auto;  margin-right:auto; border:solid 1px;}  #header{ position:relative;  height:150px;   background-color:#33729d;  width:100%; border:solid 1px;}  #leftcol{ width:170px;  float:left;  position:relative; left: 0px; background-color:#33729d; border:solid 1px; } #twocols{ width:81%;  float:right;  position:relative;   } #rightcol{ width:170px;  float:right;  position:relative; left: 0px; background-color:#33729d; border:solid 1px;} #maincol{background-color: #33729d;   float: left;  display:inline;  position: relative;  width:77%;  border:solid 0px; border:solid 1px; } #footer{ height:150px;   background-color:#33729d;  clear:both; border:solid 1px; }    /* *** Float containers fix: [url="http://www.csscreator.com/attributes/containedfloat.php"]csscreator.com/attributes/containedfloat.php; *** */ .clearfix:after { content: ".";  display: block; height: 0;  clear: both;  visibility: hidden; } .clearfix{display: inline-block;}/* Hides from IE-mac \*/* html .clearfix{height: 1%;}.clearfix{display: block;}/* End hide from IE-mac */    /*printer styles*/  @media print{ /*hide the left column when printing*/ #leftcol{display:none;} /*hide the right column when printing*/ #rightcol{display:none;} #twocols, #maincol{width:100%; float:none;}}

 
Although this optional but it does give a little spice to the website the use of corners and a drop shadow effect. Although they are considered eye candy it usually helps to make it look better. But again it is optional, so for this tutorial I will be using just the corners.

I will start with the corners, in which I bring you to this site

CSS Corner Generator

Now are corners have to match the inside and outside colors of the website so we will need to use the following:

Square Color=#33729d
Background C0lor=#FFFFFF

Click on the generate button and it will produce the images you will need along with the code so first download the images to your folder and if you want to create a images folder you can make sure to adjust the location of the images to images/.

So now we copy and paste the code at the bottom of our css file like so.
 

/* generated by csscreator.com */ html, body{  margin:0;  padding:0;  text-align:center; }  #pagewidth{  width:95%;  text-align:left;  margin-left:auto;  margin-right:auto;}  #header{ position:relative;  height:150px;   background-color:#33729d;  width:100%; border-bottom:solid 1px;}  #leftcol{ width:140px;  float:left;  position:relative; left: 0px; background-color:#33729d; border:solid 1px; } #twocols{ width:81.5%;  float:right;  position:relative;   } #rightcol{ width:140px;  float:right;  position:relative; left: 0px; background-color:#33729d; border:solid 1px;} #maincol{background-color: #33729d;   float: left;  display:inline;  position: relative;  width:77%;  border:solid 1px; } #footer{ height:150px;   background-color:#33729d;  clear:both; border-top:solid 1px; }    /* *** Float containers fix: [url="http://www.csscreator.com/attributes/containedfloat.php"]csscreator.com/attributes/containedfloat.php; *** */ .clearfix:after { content: ".";  display: block; height: 0;  clear: both;  visibility: hidden; } .clearfix{display: inline-block;}/* Hides from IE-mac \*/* html .clearfix{height: 1%;}.clearfix{display: block;}/* End hide from IE-mac */    /*printer styles*/  @media print{ /*hide the left column when printing*/ #leftcol{display:none;} /*hide the right column when printing*/ #rightcol{display:none;} #twocols, #maincol{width:100%; float:none;}}/* set millions of background images */.rbroundbox { background: url(nt.gif) repeat; }.rbtop div { background: url(tl.gif) no-repeat top left; }.rbtop { background: url(tr.gif) no-repeat top right; }.rbbot div { background: url(bl.gif) no-repeat bottom left; }.rbbot { background: url(br.gif) no-repeat bottom right; }/* height and width stuff, width not really necessary. */.rbtop div, .rbtop, .rbbot div, .rbbot {width: 100%;height: 7px;font-size: 1px;}.rbcontent { margin: 0 0px; }.rbroundbox { width: 100%; margin: 1em auto; }

 
As you can see we change the styles of the border for the header and footer, this is done so we can keep them separate but yet keep the corners we just added look cleaner. Also I made some adjustments to my columns to fit the 800x600 resolution some may still have and also changed the overall size of the lay to 95% so to be able to see everything.

Now we have to make edits to our html file and adjust it so:
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; ><html xmlns="http://www.w3.org/1999/xhtml/; xml:lang="en" lang="en" ><head><title>CssCreator-->XTML 1.0 Transitional Template</title><meta http-equiv="content-type" content="text/html;charset=utf-8" /><link rel="stylesheet" href="main1.css" type="text/css" /></head><body><div id="pagewidth"><div class="rbroundbox">	<div class="rbtop"><div></div></div>		<div class="rbcontent">	<div id="header" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div>			<div id="wrapper" class="clearfix" > 		<div id="twocols" class="clearfix"> 			<div id="maincol" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam </div>			<div id="rightcol" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam </div>		</div> 			<div id="leftcol" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam </div></div>	<div id="footer" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 	</div><!-- /rbcontent -->	<div class="rbbot"><div></div></div></div><!-- /rbroundbox -->	</div>	</div></body></html>

 
Well that is it for the Core Design of the layout it maybe boring now and completely messed up, but after many many adjustments and hours of hard work it will look awesome. It could also look like a website to with loads of fun for all users.

Edited December 17, 2016 by OpaQue (see edit history)

[Sharn 0]

Hmmm. Skimmed it, looks VERY nice. Really thorough, which is nice for us CSS newbies. Also not needing any HTML editors and stuff is very nice, so anyone anywhere can do it. Doesn't matter about OS, just gotta have a browser. I've worked with a (premade) CSS layout, and it's so easy to make dynamic and edit, it blows other websites away.I've been wanting to get into pure CSS for a while. I'll definitely give it a try soon.

[sportytalk 0]

A nice tutorial. CSS is one of my weak areas when working on websites, so I really need to re-learn how to do this. It will certainly enable me to produce websites that are more professional and use more of a template.Thanks to this topic, I am now able to re-learn CSS by reading and following through this page on this website's forums. It is very easy to read and simple to understand.I'm sure other users on this website will find this CSS tutorial and agree that it's a very nice post. Thanks for posting.

Edited December 19, 2006 by sportytalk (see edit history)

[makhfi 0]

This is a excellent tutorial for CSS. thank you

[blogmaster 0]

Great tutorial Saint Michael. You really are a saint I like that zombie kicking signature too Great work man!

[robcozzens 0]

Excellent!I've been looking for something like CSS Creator for a long time. It doesn't require you to register any more either.It would be nice if it was more interactive... you know, if you could just drag the edges around and stuff.

[leoncreations 0]

nice tutorial there with a css creator! just what I need to get started with CSS and to modify my website

[html 0]

Dear Saint_Michael,Its a superb tutorial for css lover your way of educating on this forum is superb and loveable, we will be waiting forthe next tutorial from you.Thanks.

Edited October 10, 2007 by html (see edit history)