CSS Examples

150 CSS Examples

Category: CSS, CSS Expert Ideas | 3,858 views | 3 Comments |

CSS Pagination

Pagination is a mechanism which provides users with additional navigation options for browsing through single parts of the given article. Can be referred to by numbers, hints, arrows as well as “previous” and “next”-buttons.

CSS Pagination Links- Inspired by the pagination interface you see at the footer of Digg.com.
Pagination 101- Pagination 101, that will give you some clues as to what makes good pagination.
Some styles for your pagination- Styles for WP-Digg style pagination plugin, Digg Style pagination Class, the modular version, and the original programed bye strangerstudios.

Block Hover Effect Links

How to Create a Block Hover Effect for a List of Links- Learn how to create hover effect when you mouse over the list items to see the block hover effect in the demo here.
How To Make Clickable Areas Bigger - One basic principle of interaction design is that the larger the link you’re trying to click on, the easier it is to click it. With this in mind, if you are using text-based links (for example in a navigation bar), the actual ‘clickable’ area should be as large as possible.
Anchor tags for block elements- You can see a demo here.
CSS Examples and demos

How to design css sitemap Tree

Category: CSS, CSS3 Tutorial | 7,662 views | 6 Comments |

I will present a technique to display a multi-level unordered list in the form of a tree with lines connecting nodes.

Our intention is to avoid cluttering the HTML code with unnecessary tags. Ideally, the code would be as simple as this:

<ul class=”tree”> <li>Animals <ul> <li>Birds</li> <li>Mammals <ul> <li>Elephant</li> <li>Mouse</li> </ul> </li> . . . </ul>

So it’s just a regular multi-level unordered list, with no additional elements. The only thing that indicates it’s a tree is the tree class added to the first-level <ul> element. Without styling, the above code produces a familiar result:

Animals
- Birds
- Mammals
  - Elephant
  - Mouse
- Reptiles
Plants
- Flowers
  - Rose
  - Tulip
- Trees

Bullets Be Gone

The first thing that we need to do is get rid of the ugly bullets. We accomplish this by setting the list-style-type property to none. Read more…

CSS tricks

Category: CSS, CSS Examples | 1,199 views | 2 Comments |

1. Block vs. inline level elements

HTML elements are either block or inline elements. The characteristics of block elements include:

Always begin on a new line
Height, line-height and top and bottom margins can be manipulated
Width defaults to 100% of their containing element, unless a width is specified

Examples of block elements include <div>, <p>, <h1>, <form>, <ul> and <li>. Inline elements on the other hand have the opposite characteristics:

Begin on the same line
Height, line-height and top and bottom margins can’t be changed
Width is as long as the text/image and can’t be manipulated

Examples of inline elements include <span>, <a>, <label>, <input>, <img>, <strong>and <em>.

To change an element’s status you can use display: inline or display: block. But what’s the point of changing an element from being block to inline, or vice-versa? Well, at first it may seem like you might hardly ever use this, but in actual fact this is a very powerful technique, which you can use any time you want to: Read more…

Write a CSS Syntax

Category: CSS, CSS 2 Tutorial, CSS Examples, CSS Tutorials, CSS3 Tutorial | 452 views | Add a Comment |

The syntax for CSS is different than that of (X)HTML markup. Though it is not too confusing, once you take a look at it. It consists of only 3 parts.

selector { property: value }

The selector is the (X)HTML element that you want to style. The property is the actual property title, and the value is the style you apply to that property.

Each selector can have multiple properties, and each property within that selector can have independent values. The property and value are separated with a colon and contained within curly brackets. Multiple properties are separated by a semi colon. Multiple values within a property are sperated by commas, and if an individual value contains more than one word you surround it with quotation marks. As shown below.

body {
background: #eeeeee;
font-family: “Trebuchet MS”, Verdana, Arial, serif;
}

As you can see in the above code I have separated the color from the font-family with a semi-colon, separated the various fonts with commas and contained the “Trebuchet MS” within quotations marks. The final result sets the body color to light grey, and sets the font to ones that most users will have installed on there computer. Read more…

How CSS3 works

Category: CSS 2 Tutorial, CSS Expert Ideas, CSS Tips | 948 views | Add a Comment |

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)

Benefits of CSS

Category: CSS, CSS Examples, CSS Tips | 681 views | Add a Comment |

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=”#ccc”).

What it’s all about CSS3

Category: CSS, CSS3 Tutorial | 855 views | Add a Comment |

Cascading Style Sheets (CSS3) 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.

CSS QUOTES

Category: CSS 2 Tutorial, CSS Tutorials | 696 views | Add a Comment |

This property determines the type of quotation marks that will be used in a document. One or more quotation mark pairs are given, with the basic quotation characters being the left-most pair. Each subsequent pair represents the quotation characters used at progressively deeper element nesting contexts.
Values of the ‘content’ property are used to specify where the open/close quotation marks should or should not occur - the “open-quote”, “close-quote”, “no-open-quote”, and “no-close-quote” values. “Open-quote” refers to the left (first) of a given pair of specified quotes, while “close-quote” refers to the second (right) quote character in the pair. Quotes can be skipped at a particular location by using the “no-close-quote” and “no-open-quote” value. In the event that the quote character nesting depth is not covered in the ‘quotes’ property specification, the last valid quotation pair set should be used.

Example

blockquote[lang-=fr] { quotes: “\201C” “\201D” }blockquote[lang-=en] { quotes: “\00AB” “\00BB” }

blockquote:before { content: open-quote }

blockquote:after { content: close-quote }

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
none	The ‘open-quote’ and ‘close-quote’ values of the ‘content’ property produce no quotations marks.
([string] [string])	Values for the ‘open-quote’ and ‘close-quote’ values of the ‘content’ property are taken from this list of quote mark pairs. The first or possibly only) pair on the left represents the outermost level of quotation embedding, the pair to the right (if any) is the first level of quote embedding, etc.

CSS Universal (*) Selector

Category: CSS, CSS Examples, CSS3 Tutorial | 1,492 views | Add a Comment |

Universal (*) Selector

Matches any element type.

Syntax

HTML
* { sRules }

Scripting
N/A
Read more…

Categories

Popular Tags

Comments

Friends

Sponsored Links

Latest CSS Examples

Links

CSS Experiments

Free Resources

Top 15 CSS articles