ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Internet & the Web

Basic initial webpage layout with CSS - Part 1

Updated on July 6, 2015
Nick Burchett profile image

Nick is a US Army veteran, husband and father of three, and has a BA in History. He is a Civil War aficionado and also enjoys genealogy.

A graphical depiction of a very simple css document
A graphical depiction of a very simple css document | Source

Let me start by stating that this tutorial is by no means an exhaustive tutorial on how to design a webpage with a Cascading Style Sheet (CSS) and Extensible Hypertext Markup Language (XHTML) page. It is, as the title states, a basic, one page initial layout structure. You will have a barebones layout when you are finished, but one that is quite functional and common throughout the web. It will also be a foundation that adheres to the W3C (World Wide Web Consortium) standards.

It is assumed that you have at least a general knowledge of setting up a web page, how to transfer your files to your host via FTP, and are using either notepad or some other basic text editor.

What you will be designing here will be a site which is comprised of:

* a wrapper (this will enclose all the items below)
* a header (can be text, a logo, or whatever you choose for the top of your page)
* a left area (content that is vertical aligned on the left)
* a right area (content that is veritcal aligned to the right)
* a footer (this will contain your copyright, additional links, etc.)

This site will be structured with two files, an index.php file which will contain all your XHTML code, and a default.css file which will contain all of your style sheet information. I will explain the .php portion a little later in this hub. You will also be utilizing a folder called "images" for all your images. This is to keep them separate from your design files and just makes for better clarity and overall design. Anything that is an image, icon, etc. will go in this folder.

We will tackle the CSS portion in this hub and the XHTML in a future hub.

Now, lets first start with laying out our default.css file's basic structure.

Open your file editor and create a new file called "default.css" and paste in the following:

body { } #wrapper { } #header { } #leftarea { } #rightarea { } #footer { } .clear { } Each area designated with a "#" is a CSS ID tag. The areas designated with a "." is a CSS class tag. There are MANY options that can be inserted into each of these tags that, due to limitations of this article we wont go into. But know this: this is where your site design becomes unique. This is where 95% of your layout work is done. In the past designers would use "tables" in their HTML pages. This was not only incorrect usage, but bloated their pages and slowed their load-time down considerably. We will be using the very basic settings for the sake of this hub.

What we will do is make the page "fit" all web browser resolutions. This is critical. If a page is hard to navigate a read people will not stay on your website. The standard resolution these days is "really" 1280x1024, but quite honestly, 1024x768 is the de facto standard. HOWEVER, we will be designing at a "safe" 800x600. This way NO ONE is left out when viewing your web page.

First thing we need to do is edit the body tag. You can add a background image if you wish by adding the "background-image: url(images/yourbackgroundimage.jpg); but we are just going to leave it a solid color. Next you can add the line margin: 0px; if you wish. What this does is set's the body margin to the top of the page so that your header will be flush to the top of the web browsers display area. Entirely up to your preference.

Next, lets tackle the wrapper ID. What the wrapper ID does is it takes all of you ID elements and ensure that they are constrained within a certain area. The benefit of this is that you can set the width of the area and nothing can go past that. This allows you to also center the entire webpage very easily (which is what we will be doing). So, edit your #wrapper ID to look like the following:

#wrapper { width: 800px; margin-right: auto; margin-left: auto; }

What this will do is set the width of the area to 800 pixels and automatically adjust the left and right margins for the size of your browser - basically it centers it.

I will continue in my next hub... stay tuned!


    0 of 8192 characters used
    Post Comment

    • WannaB Writer profile image

      Barbara Radisavljevic 6 years ago from Templeton, CA

      Thanks. I'll have to give it a try. The biggest problem is, I guess, having to plan ahead instead of making changes on the fly as I need them. I can't think of any template that would fit all my content.

    • Nick Burchett profile image

      Nick Burchett 6 years ago from IL, MO & KS

      It's actually not that difficult if you just really stop and spend a little time with it. The great thing about XHTML and CSS is that the structure is almost common-sense driven. You can read the code and pretty much get a base understand of what is trying to be done. A suggestion would be to find sites whose layout interest you and the view their source. THis will give you an idea of what the code looks like in code form and in the browser. If they are using CSS properly they should have a command in the head section that points to a stylesheet. just type that path in the address bar along with the regular site path and you can view their CSS. Good luck!

    • WannaB Writer profile image

      Barbara Radisavljevic 6 years ago from Templeton, CA

      Right now I'm completely overwhelmed by designing a web site that 's over 200 pages that was originally made with FrontPage and now I'm forced into using Expression Web to redo it. EW used CSS in addition to XHTML, and I barely know enough HTML to get by, since I've always has WYSIWYG. I bought the Dummies book, but haven't had the courage to start reading it. Was going to see what help I can find on HubPages first, to try to get the big picture.