How to Build a Website Using CSS

By Henri Bauholz

  • Overview

    CSS stands for cascading style sheets. Learning how to use CSS is not the easiest of tasks, but once understood, use of the cascading style sheets can save you the expense of having to resort to expensive software to create your own website. Even the layout of a basic web page can be done through CSS code, thus creating a lively and entertaining presentation to online viewers.
    • Step 1

      Decide on how many pages you need for your website and give each one a title. Don't forget to include your index page, which will be the place that the viewer will come to first (the web does this automatically). Each page should have the following HTML code and should be created in Wordpad. <html> <head> <title>Name Of Your Page Goes Here</title> </head> <body> </body> </html>
    • Step 2

      Add basic information to the body of each page. HTML code can be quite complex, yet the most basic of pages can be set up with the knowledge of only a few attributes. This would include background color, heading and text in paragraphs. After these attributes have been added your page might look something like this: <body bgcolor="FFF"> <h1>My Website</h1> <p1>text</p1> <p2>more text</p2> </body> </html> This code will give you a background color of white, a page heading and two paragraphs . You can set up each page in this way. Even without any breaks this page should display.


    • Step 3

      Install breaks between paragraphs and the heading. Here's how the code will look after breaks are added. The break symbol looks like this: <br /> <body bgcolor="FFF"> <h1>My Website</h1> <br /> <p1>text</p1> <br /> <p2>more text</p2> <br /> </body> </html>
    • Step 4

      Link your pages. Use this anchor symbol to link one page to another. <a> href="title page.htm"> Go To Title Page</a> Place this code in the body of any page and it will display the words "Go To Title Page." When a viewer clicks on the words, they will be automatically directed to the actual title page (or any other page that you select). When added to the code in step 2, the result will look like that below: <body bgcolor="FFF"> <h1>My Website</h1> <br /> <p1>text</p1> <br /> <p2>more text</p2> <br /> <a> href="title page.htm"> Go To Title Page</a> <br /> </body> </html>
    • Step 5

      Add a CSS style sheet and link each page to the style sheet. To link to a style sheet, place this code in the heading. <link rel="stylesheet" type="text/css" href="mystylesheet.css" /> Once added to our page, it will look like this: <html> <head> <title>Name Of Your Page Goes Here</title> <link rel="stylesheet" type="text/css" href="mystylesheet.css" /> </head> <body bgcolor="FFF"> <h1>My Website</h1> <br /> <p1>text</p1> <br /> <p2>more text</p2> <br /> <a> href="title page.htm"> Go To Title Page</a> <br /> </body> </html> Since everything is located in the head, this transfer is done automatically by the computer.
    • Step 6

      Add attributes to the style sheet. The purpose of the style sheet is to control the features of your web pages. You can link many pages to one style sheet and each feature listed on the style sheet will be automatically displayed on each of the web pages that is linked to that particular style sheet. No html code is needed for laying out a style sheet, so you can just open a word document in wordpad and start adding attributes. Here is the CSS attribute for fonts. It includes choice of standard fonts and the color for all linked text, which is black: body {font-family:"arial black", "helvetica bold", sans-serif; color:#000000; } This text specifies the font type (Arial ) and color (black) for all text within the body of each page. All pages that link to this style sheet with have black Arial letters. Size has not been specified, so the default size for the computer will be selected. The advantage of this method is that you can change the font style and color for as many pages just by going to this one style sheet. The only requirement is that they have to be linked to one another as explained in step 5.
    • Skill: Moderately Challenging
    • Ingredients:
    • Computer
    • Tip: This is only the tip of the iceberg. CSS is a fascinating and complicated field that is constantly evolving.
    • Tip: Lots of information is available online, at the bookstore and through educational institutions of higher learning.
    • Warning:
    • CSS takes a lot of trial and error to get just right.
    • Different browsers act in different ways to the same CSS code.

    Trending Now

    © High Speed Ventures 2011