How To Design Your Web Site With CSS

Written by Herman Drost


Cascading Style Sheets (CSS) allows you to create fast loading pages, increase your search engine rankings, and modify your whole site with one style sheet. So why don’t more people use them? This is because they got so used to html design and are afraid or too lazy to upgrade their skills. Some will also use ready made templates that contain flashy graphics, bloated code and sometimes even contains hidden code embedded inrepparttar page.

In this series of articles I will show you how to create a simple web site using CSS, so you will have no excuse to begin incorporating them into your future designs.

What are Cascading Style Sheets?

Cascading Style Sheets isrepparttar 132336 name of a simple language that allows you to add any style (font, colors, graphics, links, layouts) to your web pages.

Benefits of Cascading Style Sheets

1. Separate content from presentation – you can separate your HTML markup, text, graphics and multimedia from presentation.

2. Consistent site wide look and feel consistency – you can apply one style for 100s of web pages all at once. So if you had to changerepparttar 132337 color of all pages on your site, you only have to edit one style sheet. This saves you a huge amount of time, especially if you had to edit each page separately.

3. Web site maintenance - apart from being able to make site wide changes easily through one CSS file,repparttar 132338 clean code it generates makes it easier to update. Properly marked up web pages permit them to be maintained by more than one person. It will also work in more browsers. Web site redesigns will take much less time.

How to Build a Basic CSS Layout

Written by Herman Drost


Designing without tables by using CSS layouts is fast becomingrepparttar new standard onrepparttar 132335 Web because ofrepparttar 132336 benefits mentioned in my previous article. Web browsers used these days are now able to render web pages proficiently. In this article I will endeavor to create a basic 2 column CSS layout which you can use for future design projects.

Here isrepparttar 132337 live web page ofrepparttar 132338 basic CSS layout: http://www.isitebuild.com/css/css-layout.html

1. Divide your page into sections -repparttar 132339

tags allows you to create distinct divisions on your web page. They are identified with a unique id. You can then add a style (css selector) that specifically applies torepparttar 132340 div of that id. Remember to includerepparttar 132341 DOCTYPE (to render your page accurately inrepparttar 132342 browsers) and meta tags (enables search engines to spider your pages).

wrapper: isrepparttar 132343 div that wraps around allrepparttar 132344 other divs like a container forrepparttar 132345 page elements. header: definesrepparttar 132346 top banner ofrepparttar 132347 page main: definesrepparttar 132348 main content ofrepparttar 132349 page nav: definesrepparttar 132350 navigation ofrepparttar 132351 page footer: definesrepparttar 132352 footer and sub-navigation ofrepparttar 132353 page

How to Build a Basic CSS Layout

Basic CSS Layout

Navigation

2. Createrepparttar 132354 CSS code - below isrepparttar 132355 CSS code that stylesrepparttar 132356 page as a centered 2 column CSS layout with a navigation bar and a footer. The div#wrapper style createsrepparttar 132357 centered box which acts as a container forrepparttar 132358 rest ofrepparttar 132359 page content. The width: 80% rule setsrepparttar 132360 width ofrepparttar 132361 div. The background-color:#FFFFFF rule creates a white background forrepparttar 132362 div. The margin-top: 50px and margin-bottom: 50px rules create a space of 50 pixels forrepparttar 132363 top and bottom margins forrepparttar 132364 div itself.

The proper way to center a block-level element with CSS is to set margin-left: auto and margin-right: auto. This instructsrepparttar 132365 browser to automatically calculate equal margins for both sides, thus centeringrepparttar 132366 div. The border: thin solid #000000 rule adds a border aroundrepparttar 132367 outer div. The rest ofrepparttar 132368 CSS code stylesrepparttar 132369 divs forrepparttar 132370 header, footer, nav, and main content.

The div#header and div#footer styles set margins and padding for those divs. In addition, div#header includesrepparttar 132371 text-align: center rule to centerrepparttar 132372 header text, and div#footer includesrepparttar 132373 border-top: thin solid #000000 rule to create a border alongrepparttar 132374 top edge ofrepparttar 132375 div to replacerepparttar 132376 horizontal rule aboverepparttar 132377 footer inrepparttar 132378 table-based layout.

The div#nav and div#main styles createrepparttar 132379 two columns inrepparttar 132380 middle ofrepparttar 132381 centered box. Inrepparttar 132382 div#nav style,repparttar 132383 float: left rule pushesrepparttar 132384 div torepparttar 132385 left side of its parent element (the wrapper div), andrepparttar 132386 width: 25% rule setsrepparttar 132387 div's width to 25 percent ofrepparttar 132388 parent element. Withrepparttar 132389 nav div floated torepparttar 132390 left and limited to a set width, it leaves room forrepparttar 132391 main div to move up torepparttar 132392 right ofrepparttar 132393 nav div, thus creatingrepparttar 132394 two-column effect. The div#main style includesrepparttar 132395 margin-left: 30% rule to keeprepparttar 132396 main text aligned in a neat column instead of spreading out belowrepparttar 132397 nav column. The main div's left margin is set to a value slightly larger thanrepparttar 132398 width ofrepparttar 132399 nav div.