CSS CODE

100 CSS Examples and Tutorials

Category: CSS, CSS Expert Ideas | 1,362 views | 3 Comments |

Top Exerpimental CSS Examples and Demo’s. here you can find samples and Examples. That’s a real power of CSS.

Navigation

Perfect pagination style using CSS- This tutorial explains how to design a pagination for search results or more in general to split a long list of records in more pages.

Styling Lists

The Amazing <li>- With a little CSS, the <li> becomes one of the most powerful and versatile tags in a web designer’s arsenal. This article is a tutorial and a tribute to the amazing <li>.

So let’s get started and don’t forget to subscribe to our RSS-Feed to keep track on our next post in this series.

Better Ordered Lists (Using Simple PHP and CSS)- Here is an example where you ditch the traditional ordered list and create your own!

Style Your Ordered List- Here is a quick CSS tutorial on how you can use the ordered list <ol> and paragraph <p> element to design a stylish numbered list.

Live DemoView it Here
Download zip file

List Based Calendar- A simple way to add multiple views to a calendar, so you can view your events in a simple list, or in a month based calendar format.

Live DemoView it Here

Forms and Form Elements

Datasheet-style form using HTML and CSS- Make a datasheet-style web form using HTML, CSS and JavaScript with multiple similar records,

Styling File Inputs with CSS and the Dom - File inputs (<input type=”file” />) are the bane of beautiful form design. No rendering engine provides the granular control over their presentation designers desire. This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation. Read more…

CSS tricks

Category: CSS, CSS Examples | 978 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…

One thing to do before starting a new project

Category: CSS Expert Ideas | 160 views | Add a Comment |

Invest time in getting organized.
Clean up your desk.Getting rid of the visual clutter around you will establish an environment where creativity can flourish.
Estimate your capabilities and capacities.
always ensure that you have enough time and resources to do the job justice, otherwise you’ll end up cutting corners, pushing back deadlines, and deliver a sub standard experience to the client and the user base.

CSS Online Tutorials Guideline

Category: CSS Tutorials | 328 views | Add a Comment |

Advanced CSS Layouts: Step by Step
By Rogelio Vizcaino Lizaola and Andy King
CSS Basics.com
Making Cascading Style Sheets Easy to Understand
CSS Beginner’s Guide
CSS, or ‘Cascading Styles Sheets’ are a way to style HTML. Whereas the HTML is the content, the style sheet is the presentation of that document.
CSS Intermediate Guide
Like the HTML Intermediate Guide, this CSS Intermediate Guide should not be that difficult, but rather build on the basics of the CSS Beginner’s Guide.

What is CSS Specificity?

Category: CSS, CSS Tutorials | 270 views | Add a Comment |

Specificity determines, which CSS rule is applied by browsers. “Specificity is a type of weighting that has a bearing on how your cascading style sheet (CSS) rules are displayed.” [Understanding Specificity]
Selector specificity is a process used to determine which rules take precedence in CSS when several rules could be applied to the same element in markup. [Selector Specificity]
Every selector has its specificity. “All rules in your CSS carry a specificity rating regardless of selector type, although the weighting that is given to each selector type varies and will ultimately affect the styling of your web documents.” [Understanding Specificity]
If two selectors apply to the same element, the one with higher specificity wins.

CSS Principles For Keeping Your Code Clean

Category: CSS Examples, CSS Tutorials | 200 views | Add a Comment |

1. Strict DOCTYPE

If we are going to do this, let’s just do it right. No need for a discussion about whether to use HTML 4.01 or XHTML 1.0: both of them offer a strict version that will keep us nice and honest as we write our code.

Our code doesn’t use any tables for layout anyway (nice!), so there really is no need for a transitional DOCTYPE.

Resources:

2. Character set & encoding characters

In our <head> section, the very first thing should be the declaration of our character set. We’re using UTF-8 here, which is swell, but it’s listed after our <title>. Let’s go ahead and move it up so that the browser knows what character set it’s dealing with before it starts reading any content at all.

While we’re talking about characters, let’s go ahead and make sure any funny characters we are using are properly encoded. We have an ampersand in our title. To avoid any possible misinterpretation of that, we’ll convert it to & instead.

Resources:

Categories

Popular Tags

Comments

Friends

Sponsored Links

Latest CSS Examples

Links

CSS Experiments

Free Resources