How to Use CSS to Create a Website Layout

Once you have mastered HTML, the next step is to learn CSS. CSS, or cascading style sheet, is a scripting language that removes the burden of style and layout from HTML. When you use CSS, you can change your design without modifying the content. This is a distinct advantage over HTML-only designs, allowing for more flexible web development. In CSS 2, new layout options are included, allowing designers to move away from HTML design. CSS uses terminology that is similar to HTML and has standards in accordance with the World Wide Web Consortium (W3C).

Things You'll Need

• Text editor
• Color picker
• Web hosting
• HTML file

Instructions

1. Link to your CSS file. On your basic file, insert the following code after the title tags, but before the /head tag.
   <link rel="stylesheet" href="stylesheet.css" type="text/css" />

   This tells the browser where to find the CSS file.

2. Create sections in your HTML file. In order for CSS to apply to your HTML file, you need to link the files together and add the appropriate sections, and IDs. In your HTML file you will use the DIV tags. These tags create the sections in your document. A browser won't recognize them individually but when coupled with CSS tags such as ID, the browser will connect them with your CSS file and apply the layout.

   On your basic file again, insert div tags around each section. This file will have three obvious sections: a header, a menu and the main content. Give each of the DIV tags an ID using the following syntax: <div id="header"></div>.

3. Create a new file in your text editor. Name it stylesheet.css and save it in the same folder as your HTML file. This is where you will put the CSS code. Each element follows the same syntax:

   Selector (if any) Name {style:type;}

   The HTML file contains two types of elements we can select to style: tags, which have no selector, and IDs, which use the # to denote themselves in a CSS file.

   Style a tag by typing:
   body {style:type;}

   Style an ID type by typing:
   #header {style:type;}

4. Write out the CSS code to create your layout. A simple layout for a web page would be a background color, a header, with its own color, and two columns, one for the menu and one for the content.

   Open your color picker. Choose the color you want to use for the background and note its hex code. A hex code is a # symbol with a six-digit number. Black would be #000000 because it has no color. White would be #FFFFFF because it is all colors. Other colors will be a combination of numbers and letters A-F.

   body {background:#000000;}

   The background style allows you choose a color for the background. Add a few more styles to apply to everything in the body tag.

   body {background:#000000; color:#ff0000; margin:0; padding:0; font-size:12px;}

   Color denotes the color of the text, in this case red, in the body tags. By zeroing margin and padding, we ensure that the page will stretch to fit the browser window. The font-size will make all non-heading text 12 pixels in height.

5. Style the IDs in the html file. First layout each ID so you have clear picture of what you need.

   #header {}
   #menu {}
   #main {}

   It does not matter what order you put the elements in the file. We want the header to stretch across the page and have a white background with blue text.

   #header {width:100%; background:#ffffff; color:#006699; text-align:center;}

   The width style gives the div width and by using a percentage, we will allow the page to shrink and grow with the size of the browser. The text-align style allows you to choose the alignment of the text in the div, in this case center. Now we want the menu on the right and the main on the left.

   #menu {position:relative; float:right; width: 160px;}
   #main {position:relative; float:left; width:400px;}

   The position style gives browser instructions to allow the div to flow in a certain way. By making it relative, the position will take into account the DIVs above and below it in the HTML file. This will keep the floating elements from covering the header. Float allows the element to move in the direction you specify.

6. Save your file. You can view your HTML file in a browser and it will call to your CSS file and show you the layout.

Tips & Warnings

• You can use CSS for every tag in your HTML file. There are many more styles available for CSS.

• CSS does not work the same in all browsers. You may need to edit your CSS file to work in different browsers.

References

• W3C
• Web Standards