ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

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!

Comments

    0 of 8192 characters used
    Post Comment

    • WannaB Writer profile image

      Barbara Radisavljevic 

      7 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 imageAUTHOR

      Nick Burchett 

      7 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 

      7 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.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)