CSS Simple Layouts.

Ok. Before we start.. what is CSS?

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language as for example HTML, HTML or even XML. The CSS specifications are maintained by the World Wide Web Consortium (W3C).

The aim of CSS is then to position the content of a web page. CSS is used by the author (and even the readers!) of websites to define colors, fonts, layout, and other aspects of the presentation of a document.

CSS layouts

It is designed to enable the separation of the presentation of the document (written in CSS) from the content of the document (written in XHTML or a similar markup language). This separation improves content accessibility, provides more flexibility and control, reduces complexity and repetition in the structure of the content. With CSS is also possible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (speech-based browser) or braille.

If you don’t know six ways to abuse a tool then you don’t know how to use it. Play with this stuff. That’s the only way we ever learn anything. Mess with the code.”

So what we have to do is to think about what’s data, what’s layout!

In code terms, data is what goes in the (X)HTML. We are talking about the text and necessary images. Layout is what goes in the CSS. Colours, fonts, how you divide the structure of the page in blocks.

One way to understand is usually to start from some simple examples! So let’s have a look at some CSS code. The simple CSS layouts that we will show could be useful in case you are designing a simple website layout.

Click on one of the following examples to view the source code.

1. Box absolute position

1. Box fluid position

1. Box centered position

1. Three column layout

1. Three column layout with Header

1. Three column layout with Header “fusion”

Enjoy it and build something of value! ;)

DiggFacebookMySpaceTwitterTechnorati FavoritesEvernoteDeliciousShare
Tagged with: CSSdownloadhtmllayouttutorialw3cWebxml
 

Leave a Reply