Building your website using DIVs and CSS

Like everyone else, I first started building all of my websites using tables. It was simple, fast and browsers would display my web pages the same across all platforms, but building with tables had its limitations. You couldn’t build an “outside the box” website design. You had to get creative using tables within tables within tables just to add a small element of design.

As the internet grew bigger and faster I started noticing websites doing things I couldn’t do using tables. I could figure out how to do some things, but only after hours of pain and frustration and thousands of tables, rows and columns.

Faster Load, Smaller Page Size, Flexible & SEO Friendly.

So I was on a mission to learn how to build my websites using DIVs and CSS and I haven’t looked back since. I haven’t ruled out tables completely because it is still easier, cleaner and faster to add a table inside your DIV for things like charts, price lists or to simply align a contact page in 3 neat columns.

One thing I’ve learned since building with DIVs vs Tables is that making changes to your website on the fly has become much quicker. No more calculators, table sizes and frustrating days trying to move an element 22 pixels. If something changes sizes you don’t have to change all of the tables around it. You just adjust the DIV that you want and nothing else is affected.

Advantages to building with DIVs and CSS

  1. Faster load times

  2. Smaller page size

  3. Flexible for future updates

  4. Search engine friendly

For those of you wanting to take that next step in building websites using DIVs and CSS Styles, I have written this tutorial showing you how to start building an .html template using DIVs. You will complete a CSS style sheet and index page to get you started with your build. Upcoming tutorials will explain working with a template and expanding on creating DIVs of all shapes and sizes.

   

I usually build my templates one of two ways: Image 1 shows the traditional two column layout with Main Content and a Sidebar for news, events, contact information etc. Image 2 shows a stacked version for additional information at the bottom usually linking to pages, blogs, social media etc.

Step 1: Folder Structure

Create a folder on your desktop for your website. Inside that folder create a blank styles.css file, a blank index.html file, and create a separate folder called images.

Step 2: Adding CSS Styles

I use h1 for the header, h2 for the sub header and h3 for the body copy. I save h4, h5 and h6 for additional styles I come across during the build of a website. (i.e. footer text, sidebar headers, or contact information.) You can also add classes to customize your styles even further. Check back for my next tutorial on working with a template and customizing styles.

Click here for CSS style sheet copy ( Copy and Paste all of the information in this style sheet to your blank styles.css file)

Step 3: Adding DIVs

Next open your blank index.html page and attach your styles.css file. For that go to [ Format / CSS Styles / Attach Style Sheet ]. Copy and paste the code from the link below into your index.html file.

Click here for HTML page copy ( Copy and Paste this code into the body of your blank index.html file)

Step 4: You’re Finished!

You now have an HTML page ready for content, images, etc… As I continue building my web page I just copy and paste this basic style (#name – below) each time I need to create a new div. Just change the #name of the style to match the div you have created on your page. (i.e. Content Goes Here ) * remove the { } in this example if you copy and paste this code.

#name{
width:0px;
height:0px;
top:0px;
left:0px;
position: absolute;
}

 

Leave a Reply

Your email address will not be published. Required fields are marked *

 
Top