DEVFYI - Developer Resource - FYI

Software Developer Resources - CSS Toturials

by FYICenter.com

Introduction

CSS stands for Cascading Style Sheets. It was introduced as a simple mechanism for adding style (fonts, colors, spacing, etc.) to HTML documents when viewed by Web browsers. Today, it becomes a major technology in designing and developing Web pages and Web based applications. CSS technology allows you to separate Web page design into two different areas: page contents and page layouts.

A well designed Web page should have its content described HTML tags, and its layout described separately in CSS statements. See CSS Zen Garden: The Beauty in CSS Design for a beautiful demonstration of the design freedom gained by separating page layout from page content.

CSS statements are easy to code. The example below shows you how the Web page <body> tag should be styled with a specific background color, a font family and size, and a margin size:

body {
	background-color: #707070;
	font-family: 'arial';
	font-size: 8pt; 
	margin: 4px
}

This page gives a list of most popular CSS tutorials of different styles. You can use them as learning guides or use them as references. If you find a good CSS tutorial that is not listed here, please follow this link to add it to share with others.

Resource Links of CSS Tutorials

  1. /* Position Is Everything */ — Modern browser bugs explained in Explains CSS bugs in modern browsers, provides demo examples of CSS behaviors, and shows how to 'make it work' without using tables for layout purposes....
  2. A List Apart: Articles: CSS Design: Creating Custom Corners and We’ve all heard the rap: “Sites designed with CSS tend to be boxy and hard-edged. Where are the rounded corners?” - Answer: the rounded corners are right here. In this article, we’ll show how customized borders and corners can be applied to fully...
  3. Advanced CSS Layouts: Step by Step - WebReference.com The Challenge: Replicate WebRef's front page using CSS. The Solution: CSS and lots of iterations. Rogelio Lizaolo improves on Kwon Ekstrom's CSS version of WebRef's tabled home page. Months in the making, the final design successfully duplicates WebRef'...
  4. Cascading Style Sheets Home Page Features a guide and tutorials on using cascading style sheets....
  5. Cascading Style Sheets Tutorial A brief introduction to CSS that will allow you to find out what style sheet are, and what they can do for your pages. A quick reference table for the css properties! Use the style attribute inside an HTML tag to define styles....
  6. Code Style: Media monitor for media dependent Cascading Style Sh Projecting your style is a guide to the use of projection media stylesheets, as supported by the Opera Web browser. This article looks at the main methods for attaching projection media stylesheets, how to work around browser compatibility issues and comp...
  7. Complete CSS Guide - Cascading style sheets reference - Contents Welcome to the Complete CSS Guide, a reference to every aspect of cascading style sheets. If you need help learning CSS or if you're looking for info about selectors, properties and all the other aspects of cascading style sheets, this is the place....
  8. Comprehensive CSS Guide- Introduction This tutorial will guide you, from the ground up, how to code CSS (Cascading Style Sheets). A subsidiary of HTML, the technology has quickly become a must-learn for amateur and professional webmasters alike....
  9. CSS 2 reference with examples CSS 2 reference with examples. This reference can be searched and compared with other references....
  10. CSS Design Ideas Cascading Style Sheets and Page Design. This page, when it's grown up a little bit, will host a number of my ideas and thoughts on using CSS as a 'design' tool. I think we have come to the stage where CSS is 'fairly' well supported, and flexible enough th...
  11. CSS From the Ground Up - 1 If you are frightened by the prospects of using Cascading Style Sheets, there's no need to be. Using a computer can be daunting for someone coming to it afresh but after a while, you think nothing of it. It all comes down to taking small steps to begin wi...
  12. CSS Panic Guide This is not a complete resource, this is a fast resource. These are the sites that I refer to first, and that I tell people to read. When you want more, just about all of them have their own links to good sites....
  13. CSS resources and tutorials for web designers and web developers CSS tutorials on lists, nested lists, floating images, selectors, etc....
  14. CSS Tutorial Save a lot of work with CSS! In our CSS tutorial you will learn how to use CSS to control the style and layout of multiple Web pages all at once....
  15. CSS Tutorial - Introduction It is time to take your web designing skills to the next level. Cascading Style Sheets (CSS) are a way to control the look and feel of your HTML documents in an organized and efficient manner. With CSS you will be able to:...
  16. CSS Tutorials The CSS Anthology: 101 Essential Tips, Tricks and Hacks; Build A Simple Style Switcher in CSS; CSS and Round Corners: Build Accessible Menu Tabs; The Unruly Ruler; Position with Style: Fixing the Maori Land Court; Tables Vs. CSS - A Fight to the Death; Ra...
  17. CSS Tutorials and CSS Tips from ELATED.com Welcome to Elated's CSS Tutorials. In this section we cover Cascading Style Sheets, the powerful supplement to HTML that allows you complete control over the look of your websites. We'll show you how to create Cascading Style Sheets, and some of the cool...
  18. CSS Tutorials, Articles, Resources, CSS Books, Cascading Style S The CSS - Cascading Style Sheets section includes links to CSS tutorials and articles, CSS browser bugs and solutions, CSS editors, reference charts, CSS layout templates, books on CSS, W3C Recommendations, Web sites devoted to CSS, and more....
  19. css Zen Garden: The Beauty in CSS Design A demonstration of what can be accomplished visually through CSS-based design. Select any style sheet from the list to load it into this page....
  20. CSS-guide These pages give general info about the CSS-guide, how topic groups relate with each others, last updates of pages, functionality of pages. Used colors, special markups and links in the CSS-guide have an own page....
  21. css/edge Welcome to the edge - What is this? It's a challenge, an experiment, an exploration, a rough map of where we haven't been. It's a search for new ways to approach Web-based design. It's a cry for creativity, and a stab at innovation. It's a playground and...
  22. CSS/Exp : CSS Experiments This page catalogues some of my (more successful) CSS experiments — CSS/Exp stands for CSS/Experiments. The name CSS/Exp is modelled after Eric Meyers great CSS resource CSS/edge which has proven an important resource for many, with some advanced CSS de...
  23. Dave Raggett's Introduction to CSS This is a short guide to styling your Web pages. It will show you how to use W3C's Cascading Style Sheets language (CSS) as well as alternatives using HTML itself. The route will steer you clear of most of the problems caused by differences between differ...
  24. Experimental Css design This site is intended to demonstrate what you can do with CSS design. This means that it is best viewed with a compliant browser (Netscape 4.x unfortunately, is not one of these). So if you are using a non compliant browser but still want to get the best...
  25. glish.com : CSS layout techniques If you are looking for help making the transition to CSS layout (that's Cascading Style Sheets), you've come to the right place. I am cataloging here as many useful cross-browser CSS layout techniques as I can find, and some that I made up when I was bore...
  26. Guide to Cascading Style Sheets The Web Design Group's guide to Cascading Style Sheets. ... Quick Tutorial. A basic introduction to Cascading Style Sheets. CSS Structure and Rules ... classes, pseudo-elements, and cascading order. CSS Properties. Descriptions of the various ......
  27. HTML and CSS Dog Guides - HTML Dog There are six guides covering the length and breadth of HTML and CSS. The Beginner's Guides are step-by-step tutorials, whereas the Intermediate and Advanced Guides contain stand-alone tips, tricks and best-practice techniques....
  28. learn web standards :: hands on css tutorial This tutorial teaches CSS using both hand-coding and Style Master for Windows. You can also follow it using instructions for Style Master for Mac OS X. By working through the exercises you will learn all about CSS for text styling and page appearance incl...
  29. Listutorial: Step by step CSS list tutorial Listutorial takes you through the basics of building background image lists, rollover lists, nested lists and horizontal lists....
  30. NYPL: Style Guide This Style Guide for the Branch Libraries of the New York Public Library explains the markup and design requirements for all Branch Libraries web projects, along with various standards and best practices....
  31. Picment.com » Articles » CSS » Fun with forms – customized input Ever wanted to match the look of your HTML forms with the rest of your website? This article demonstrates how to apply customized backgrounds to HTML forms, while preserving stucturally clean markup and accesibility....
  32. RichInStyle.com CSS2 tutorial This is one of very few CSS2 tutorials on the net. Not only does it have that advantage, but also has the following advantages: 1. It is easy to understand; 2. It covers every aspect of the specification, including those that are frequently not touched up...
  33. Rounded Corners - css-discuss The basic order of techniques on this page: At the top, you find examples with lots of markup, but will always work well accross different browsers. As you go down, the markup gets shorter, but the browser support goes down. The last two techniques degrad...
  34. Rounded corners using CSS To achieve such effect, I'm using 4 nested DIV boxes. Each one displays a corner picture in the background. This method fits any box size. Obviously better than using tables, this method is still semantically weak....
  35. So You Want A Style Sheet, Huh? This is the basic tutorial. Start here. Wouldn't it be great if you could set all the font size and face commands at once? This is how you do it. All your pages read off of one template. That's the style sheet....
  36. Starting with HTML + CSS This short tutorial is meant for people who want to start using CSS and have never written a CSS style sheet before. It does not explain much of CSS. It just explains how to create an HTML file, a CSS file and how to make them work together. After that, y...
  37. Stylesheets | CSS: cascading style sheets tutorials and style gu A collection of lessons on CSS, from an introduction to style sheet code to text formatting, backgrounds, layout and positioning....
  38. Tableless layout HOWTO It has been advocated many times that tables shouldn't be use in HTML for layout purposes. This page shows one way to create a 3 columns layout using CSS only...
  39. The Complete CSS tutorial CSS is an excellent addition to plain HTML. With plain HTML you define the colors and sizes of text and tables throughout your pages. If you want to change a certain element you will therefore have to work your way through the document and change it....
  40. Web Design References: Cascading Style Sheets A comprehensive list of CSS Tutorials: General, Alternate Style Sheets, Best Practices, Bullets, Buttons, Cascade, Inheritance and Specificity, Constants, Corners and Curves, Debugging, Drop Shadows, Efficiency, Organization and Maintenance, Forms, Fonts,...



Related Resource

Software Developer Resources - CSS Toturials