How to Use CSS Style Sheet As Web Page Layout

Using CSS Style Sheet as web page layout is easy to learn. Discover how to create a CSS layout or CSS box for your own web page.(Continue reading below...)

CSS Style Sheet is required by web standard, W3C.org to be used as web page layout and styling the web page due to the issue of accessibility. That is alright because CSS loads faster than table as a layout. But there is an implementation issue of CSS between Internet Explorer and other web browsers like Firefox, Netscape and Opera. There are cases that you have to use hacking codes for compatibility purposes.

How to Create CSS Layout For Your Web Page

To use CSS Style Sheet as web page layout instead of a HTML table, you need to learn how to create a CSS Layout. A CSS Layout is also popularly called as CSS box. a Sample of a CSS Layout with header, 2-column body and footer:

CSS Layout sample

It is done with the following CSS style sheet and HTML codes. In the sample CSS box, the CSS style sheet is included in the header instead of separate .css file. View the CSS Style Sheet and HTML codes of the sample CSS Layout.

Now, copy the codes in you practice notepad, save it and browse it. Look at the results. Try to modify the attributes. You may also use this Create Your Own Web Page Practice Page. Copy the CSS Style Sheet and HTML codes and click View.

Description of CSS Style Codes of CSS Layout

Here are the description of the CSS style sheet codes that are used in creation of the sample CSS Layout or CSS Box:

body - Style of body or web page content.

background-color: #fff - Background of the body. #fff is short for #ffffff as you may use only one letter or number if it is a pair. If you want complete list of web-safe colors, click here.
font-family: arial, verdana, helvetica - type face of font. If arial is not available, it will use verdana. If verdana is not available, it will use helvetica.
font-size: 20px - Size of the text in body.
margin: 0px - Margin of all sides. You may also use margin: 0px 0px 0px 0px for top, right, left, bottom margins. In other web browser, margin is padding.
padding: 0px - Padding of all sides. You may also use padding: 0px 0px 0px 0px for top, right, left, bottom padding. In other web browser padding is margin.

#headerbox - Style of headerbox. # is id, means you can use this style in the body only once. headerbox is selector.

float: left - Positioning of the box, lean on the left of the holding container. Other positions are float: right to lean on the right of the container; position: absolute to specific location, you need to specify the top and left distance from the main container.
width: 100% - Width of the box. Use percent if you want it fit on the size of the holding container. You may use other measurements like pixel, centimeter, inch, etc.
height: 20% - Height of the box. 20% is based on the size of the holding container. You may use other measurements.
text-align: center - Horizontal alignment of the text. You may use left, center and right.
background-color: red - Background color of the box.
border: 1px solid #000 - Border line of the box. 1px is the width of the border, you may use other size. Solid is type of border, you may use other type like dashed and dotted. #000 is the color of the border. If you do not want a border, do not include this style property.

#leftbox - Style of the leftbox.
#centerbox - Style of the centerbox.
#footerbox - Style of the footerbox.

Here's the complete list of CSS Style Properties.

The problem in using the CSS layout is the incompatibilities between Internet Explorer and other web browsers like Firefox and Opera like in margin and padding definition. It is said that Internet Explorer deviates from the CSS standard.

As you see, CSS layout or CSS box looks nice and clean. If you want to learn more about CSS layout and standards, visit W3C. If you want more samples of CSS Layout, go to Glish or A List Apart. They have a good lessons in CSS Layout and they also have a several sample CSS boxes.

One thing, if you plan to save the CSS style sheet in a separate file, do not enclose it with and save it using extension .css with any file name you desire. But, do not forget to place the link to CSS file in the header of your web page.

Using the CSS Layout or CSS box will really improve the loading time of your web page. You will notice that is cleaner than the table. Keep practicing and exploring the CSS Style Sheet codes for CSS layout. Design your own CSS boxes.

More on Start Your Own Web Site

Make Content Rich Web Site To Make Money Online

Know how to make content rich web site that make money online. With content-rich web site, you can surely make money with adsense and other affiliate products.

Create Your Own Web Page With Practice Page

Learn to create your own web page. Practice it with Create Your Own Web Page Practice Page.

Basic HTML Codes With Practice Page

Learn the Basic HTML Codes to create your own web page. Practice the HTML table, list, links and inserting image with the Basic HTML Codes Practice Page.

Other Basic HTML Codes With Practice Page

Learning other basic HTML codes will enhance your web page. Practice these HTML codes for heading, bold text, underline, hidden text, italic, emphasis, form, etc.

CSS Style Sheet For Styling A Web Page

Using CSS Style Sheet is vital for styling a web page. CSS style sheet will beautify your own web site.

Return from How to Use CSS Style Sheet As Web Page Layout to Start Your Own Web Site

Return from How to Use CSS Style Sheet As Web Page Layout to Make Money Online|Easy Money Making Ideas (HOME)

Recent Make Money Online in Blog Posts

Looking for more?

Are you satisfied with this "CSS Style Sheet For Web Page Layout in Start Your Own Web Site"? If you're looking for more information within or outside this site, you Google it. Google is the fastest and the most reliable search engine on the net today. Type in the Google search box below, the key phrases of the information you want like "money making ideas" or "start your own web site". Add a keyword like "easy" or "free" and other specific keywords to get a more relevant search engine results for the information, resources or ideas you are looking for.

Money Making Thoughts
“Every evening, write down the six most important things that you must do the next day. Then while you sleep your subconscious will work on the best ways for you to accomplish them. Your next day will go much more smoothly.”

-- Tom Hopkins