What it's all about...

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.

The above quote, taken from the W3C website, is one of the reasons for this site. Whilst I agree that it is a mechanism for adding style to web documents, I do not agree that it is a SIMPLE mechanism. It can be very complicated, as I found out when I took my first steps down this path.

CSSplay, by the way, is now listed on the w3c.org website.

So I have created this site in the hope that it will help newcomers to CSS and show old hands that it is more than just a mechanism for styling your documents. It is oh so much more.

Because CSSplay 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.

Use the correct DocType Definition (DTD)

Please , please, please note that for most of my demonstrations to work, especially in Internet Explorer, you MUST use a standards compliant !DOCTYPE, and for Internet Explorer this MUST be the first line of your (x)html.
Using will switch IE into quirks mode.

A list of the recommended DTDs can be found at the following link:
Recommended DTDs to use in your Web document.

WHAT IS CSS3

Cascading Style Sheets (CSS) are the modern standard for website presentation. When combined with structural markup language like HTML, XHTML, or XML (though not limited to these), CSS provide Internet browsers with the information that enables them to present all the visual aspects and elements of a web document. CSS apply things like borders, spacing between paragraphs, margins, headings on images, control of font faces or colors, background colors and images, textual effects like underlined or strike-through text, layering, positioning, and a number of other presentational effects. CSS controls the presentational aspects of a web page’s design, whereas HTML, XHTML, or XML control the
structure of a webpage, which means more than determining that certain text is a heading, other text is a paragraph, other text os a list of hyperlinks, and so on.

By using modern standards like CSS and XHTML, you can dramatically reduce the cost of building and maintaining a website when compared to legacy HTML-only pages. You can also greatly reduce the amount of physical bandwidth and hard disk space required, resulting in immediate long-term benefits for any webmasters and web visitor

CSS TUTORIAL

Cascading Style Sheets, commonly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable. Put simply, CSS handles the look and feel part of a web page or a whole website. With CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variery of other effects and styles explained here.

The term cascading in Cascading Style Sheets refers to a specific way in which browsers determine which styles to apply to a specific part of the page. This method is called “the cascade”, and it’s from the cascade that CSS takes its name.

CSS TUTORIAL

Cascading Style Sheets, commonly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable. Put simply, CSS handles the look and feel part of a web page or a whole website. With CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variery of other effects and styles explained here.
The term cascading in Cascading Style Sheets refers to a specific way in which browsers determine which styles to apply to a specific part of the page. This method is called “the cascade”, and it’s from the cascade that CSS takes its name.

Benefits of CSS

Much more flexible
Styles can be written in one place (separate style sheets) and assigned to HTML elements through class or ID properties. It's way easier and quicker to change styles across a whole site when they're defined in one place.
Lighter weight
Using CSS (like class="main-nav") creates far smaller HTML files than writing style into every HTML tags (like border="1" cellpadding="3" cellspacing="1" backgroundcolor="#ffc").

How CSS styles apply to HTML elements

There are a few basic rules that govern which (separately-defined) styles apply to what elements. Fortunately, these are relatively simple and logical, once explained. I'll go through them one at a time. 1. Applying to HTML elements themselves In CSS, if you want some styles to apply to HTML elements of a certain type, you write the HTML element type, followed by style definitions all contained between curly braces and separated with semicolons.

p { font-weight:bold; line-height:1.3em; } The styles above will apply to me because I am a paragraph. But they won't apply to me.

The code above will apply bold text and slightly increased line-height to the contents of any element of type (i.e. paragraphs).

2. Applying to elements with class names You can give any HTML element one or more class names. In CSS, these are defined with a preceding period (full-stop). Styles derived from classnames (normally) override any of the same styles defined for the HTML element type (more on this later).

Applies to me. But does not apply to me.

This is extremely useful, because you can definte style characteristics under a single class, and then apply those characteristics to multiple elements by giving them that class (even if they're different types of elements).

3. Elements can have multiple classes

HTML elements can have more than one class. Class names must be separated in the class property with spaces.

Both styles will apply to me.

4. Applying styles by id property HTML elements can have id properties as well as class names. While there can be multiple elements that share any class name, there should only be one element with a particular id property. This isn't important in CSS, but it is important in DHTML, so good practice to follow. Styles are associated with particular ids in CSS by prefixing the name with a hash/pound sign (#). Another thing to remember is that properties inherited from an id will overwrite properties an element gets from its class (or from its HTML element type).

This text would come out green, because the ID trumps the class and the element type.

Note that, in the example above, the font-weight:bold; and background-color:#ff9; styles still apply to the text, because it's only the color: property that is overwritten by the superior style definition.

5. CSS styles apply to elements within elements, unless overwritten Taking the above example...

This text is only inside the div... This text is inside the div and inside the paragraph... This text is inside the div, paragraph with classname and span with id.

The first bit of text gets its green colour because it's inside the div. The second bit of text becomes red because it's inside something with class="special", which overrides the previous color property. It also gets the additional background-color. The third bit of text is inside all three elements, but the properties it gets from its id overrule any other conflicting style properties it gets from the other elements. Note that it has also inherited the background-color from the special paragraph, because the id's styles don't specify a background.

Advantages of separate stylesheets

There are lots of advantages of working this way, including:

Reduced filesize - each CSS definition is written only once Reduced bandwidth - web browsers will remember (cache) the contents of CSS file, so don't need to download the file again with each new page that uses it Easier updating - you only have to change styles in one place for them to change site-wide Separates the work of styling and creating content - you can create all your HTML pages first, applying sensible semantic markup, class names and IDs, and then do all your design work later on your style sheets.

How CSS3 works

CSS is a new smarter way to apply style properties to HTML elements.
You can set all kinds of style properties, like border, font, background, spacing etc. (We'll go into these in detail later.)

There are 3 main ways CSS styles can be applied:

• Inline with HTML
• On-page style definitions
• Separate style sheets

1) CSS Inline with HTML (use with caution)

1. CSS Inline with HTML (use with caution) You can write CSS directly into an HTML tag. In the example below, don't worry about the specific styles for now. (The element is simply a box, as you'll see in the code) Code I am a styled div! Looks like I am a styled div! This approach is very similar to the old-style inline HTML styling, and suffers from all the same problems. It is only appropriate where the styling really is one-off. If there's a possibility that you'll use the same styling elsewhere, you really should use one of the below, because it will save time and effort if you have to change your styling later. 2. On-page CSS definitions A better way to write CSS is to define your styles once in the document (preferably in the document section). Code I am affected by the definition above.. So am I, but the styles are only defined once. Looks like DIV.spesh { PADDING-RIGHT: 15px; PADDING-LEFT: 15px; MARGIN-BOTTOM: 15px; PADDING-BOTTOM: 15px; COLOR: #fff; PADDING-TOP: 15px; BORDER-BOTTOM: red 5px solid; BACKGROUND-COLOR: #339 } I am affected by the definition above.. So am I, but the styles are only defined once. The benefit of this over the previous approach is that the style definitions are only written once. In this case, they'd apply to any elements on the page. Use this method when you want to apply similar styles to multiple elements on a page, but not on any other pages. To apply the same styles to things on multiple pages, you need to use method 3 below. 3. Separate style sheets The ideal way to define styles for your HTML elements is to put the definitions in a separate stylesheet document. Then, any page that includes the CSS file will inherit the same styles. (Another benefit of this method is that it enables you to use different style sheets for different user agents - which we'll address in a later article.) HTML pages can include as many CSS files as you need, and the styles will be combined together (according to inheritance & cascading rules we'll get onto later). Code (2 different files): my-styles.css body { background-color:#ccf; letter-spacing:.1em; } p { font-style:italic; font-family:times,serif; } my-html.html Here is some content in a paragraph. Here is another paragraph. How it looks .spesh2 { LETTER-SPACING: 0.1em } .spesh2 P { FONT-STYLE: italic; FONT-FAMILY: times,serif } Here is some content in a paragraph. Here is another paragraph. Note that, again, the styles I defined once have been applied to more than one qualifying element. The difference between this method and the one above is that, because I've defined the styles in a separate stylesheet, all I need to do to apply those styles to another HTML page is include the same stylesheet reference.

WHAT IS CSS3

Cascading Style Sheets (CSS) are the modern standard for website presentation. When combined with structural markup language like HTML, XHTML, or XML (though not limited to these), CSS provide Internet browsers with the information that enables them to present all the visual aspects and elements of a web document. CSS apply things like borders, spacing between paragraphs, margins, headings on images, control of font faces or colors, background colors and images, textual effects like underlined or strike-through text, layering, positioning, and a number of other presentational effects. CSS controls the presentational aspects of a web page’s design, whereas HTML, XHTML, or XML control the structure of a webpage, which means more than determining that certain text is a heading, other text is a paragraph, other text os a list of hyperlinks, and so on.
By using modern standards like CSS and XHTML, you can dramatically reduce the cost of building and maintaining a website when compared to legacy HTML-only pages. You can also greatly reduce the amount of physical bandwidth and hard disk space required, resulting in immediate long-term benefits for any webmasters and web visitor