This is a nice collection of the most rich layout banks out on the internet. If you are planning on learning and/or practicing more CSS this website might be a great help for you.
CssEasy
A nice looking website with free fixed and fluid layouts.
This article is a collection of CSS layout designs that offers flexibility and are easy to implement. Without further ado, here they are:
#page_margins {width: 980px; min-width: 980px; max-width:none }
#main { float:left; width: 100%; background-color: transparent; background-image: url(../../images/bg_pattern.png); background-repeat:repeat-y; background-position:left; }
#col1 { width: 480px; float:left; margin-left: 240px; }
#col2 { width: 240px; float:left; margin-left: -720px; }
#col3 { margin-left: -5px; margin-right: 0; width: 240px; float:right;}
Read more…
Learn CSS - Introduction, Create Simple Layouts
CSS stands for Cascading Style Sheets, according to wikipedia “Cascading Style Sheets is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.”
One of the greatest of using CSS when designing a website is the flexibility it offers for both web designer and readers. By combining CSS with the functionality of a Content Management System, a considerable amount of flexibility can be programmed into content submission forms. This allows a contributor, who may not be familiar or able to understand or edit CSS or HTML code to select the layout of an article or other page they are submitting on-the-fly, in the same form.
This is a great advantage for web designer as well, now we are able to change the entire layout of our site by only changing the stylesheet file. No more tables when making website, this is the freedom every web designer was waiting for. You can just give style to your HTML tags and your site will have the originality you where looking for.
This is a simple example of the CSS code:
h1 { color: white; background: orange !important; }
h2 { color: white; background: green !important; }
In this couple of sentences, what we have commanded is that every h1 and h2 tag will have a color white font and the background will be orange for h1 and green for h2.
Before getting started, want some inspiration?
Here are some site examples that show a clean and attractive use of CSS.
|
|
These is a collection of really good places where you can start learning CSS from the beginning.
I. INTRODUCTION
What is CSS?
II. BASIC CSS
Chapter 1 - Introduction to CSS
Chapter 2 - CSS Syntax
Chapter 3 - CSS Classes
Chapter 4 - CSS IDs
Chapter 5 - CSS Divisions
Chapter 6 - CSS Spans
Chapter 7 - CSS Margins
Chapter 8 - CSS Padding
Chapter 9 - CSS Text
Chapter 10 - CSS Fonts
Chapter 11 - CSS Anchors, links and pseudo classes
Chapter 12 - CSS Backgrounds
Chapter 13 - CSS Borders
Chapter 14 - CSS Lists
Chapter 15 - CSS Width and Height
Chapter 16 - CSS Classification
Chapter 17 - CSS Position
Chapter 18 - CSS Pseudo Elements
III. CREATE LAYOUTS WITH CSS
CssEasy
1. Layouts Fixed
2. Layouts Fluid
Hope this tutorial has been useful for you, stay alert for new CSS tutorials!
