back to HTML

CSS

Cascading Style Sheets

W3Schools Home: 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.
Start learning CSS now!

WHAT IS CSS?
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. These pages contain information on how to learn and use CSS and on available software. They also contain news from the CSS working group. continue …

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) 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 also be applied to any kind of XML document, including plain XML, SVG and XUL.
CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.[1] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified.
CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable. – Wikipedia

CSS Beginner Tutorial
Like the HTML Beginner Tutorial, the CSS Beginner Tutorial assumes that you know as much about CSS as you do about the cumulative effects of sea squirt discharge on the brain chemistry of Germanic ammonites. The purpose of this guide is to teach the bare essentials – just enough to get started. The CSS Intermediate Tutorial and CSS Advanced Tutorial go into more depth about CSS. CSS, or Cascading Styles Sheets, is a way to style HTML. Whereas the HTML is the content, the style sheet is the presentation of that document.

Guide to Cascading Style Sheets:
Style Sheets Now! Quick Tutorial, CSS Structure and Rules, CSS Properties, Linking Style Sheets to HTML, Style Sheet Dependence, CSSCheck, CSS References

W3C CSS
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. These pages contain information on how to learn and use CSS and on available software. They also contain news from the CSS working group.

Box model
The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.

 

CSS Positioning 101
If you’re a front end developer or a designer who likes to code, CSS-based layouts are at the very core of your work. In what might be a refresher for some, or even an “a-ha!” for others, let’s look at the CSS position property to see how we can use it to create standards-compliant, table-free CSS layouts.

 

Layout Gala
In November 2005 I presented on pro.html.it a three-part article on creating CSS layouts using techniques like negative margins, any order columns and in some case opposite floats. The main goal of the article was getting the maximum number of layouts based on the same markup, each with valid CSS and HTML, without hacks nor workaround and a good cross-browser compatibility. The result is a set of 40 layouts that we’ve thought worth sharing: on each of them you’ll find also a download link (if you want, you can download the entire collection, 40 HTML pages in a single zip file). Further details can be found below the gallery.

Must See: Famous Logos and Icons in Pure CSS
These awesome logos (along with tons of others. See: the post thumbnail) are being created in pure CSS over at ECSSpert.

CSS font size
When it comes to setting the size of type in CSS, you have lots of options. You can apply a “keyword”, like p { font-size: small; } or a numerical value. When using a value, you need to declare a unit of measure which itself has four options. Which is best? It depends of course …

Zen Garden
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.

Latest free css templates
Here you’ll find a number of free CSS templates I’ve created, all of which are:
- Released for FREE under the Creative Commons Attribution license
- Very lightweight (ie. minimal use of images) and fast loading
- Tables-free (ie. no tables used for layout purposes)
- W3C standards compliant and valid (XHTML Strict)
- Provided with public domain photos, generously provided by PDPhoto.org and Wikimedia Commons

CSS play | Experiments with cascading style sheets | Doing it with Style

Because CSS play deals with experimental CSS that is exactly what you get JUST CSS, no javascript or any other programming language has been used in any of the demonstrations. For javascript demonstrations please click the javascript link in the main navigation bar which will take you to my other site which is dedicated to demonstrations using CSS and minimal, unobtrusive, javascript.

Learn to work with CSS
Use the following resources to get started with cascading style sheets (CSS) in Dreamweaver and refine your CSS skills. To learn about the new features in CSS3, the latest version of CSS, refer to the Learn CSS3 page in the HTML5 Developer Center.

CSS Galleries – CSSMania
CSSMania is the most visited CSS Showcase. A CSS Showcase is a website that showcases web sites developed using XHTML/html5 & CSS (Tableless).

SitePoint CSS Reference
Sitepoint.com is currently the 755th most visited web site in the world! SitePoint is a fast growing online media company and information provider targeting the Web professional market, specifically Web Developers and Designers. The company has five major revenue streams: advertising and sponsorship, content-based products both online and in retail, software, and more recently streaming video subscriptions and classified listings.

Welcome to CSS Basics
You’ve heard the buzz about the seperation of style from content, but you are stuck in the world of nested tables and deprecated markup. If so, you have come to the right place! Using CSS to style your (X)HTML files, will benefit you and your visitors in many ways.

back to HTML