Modern CSS Layouts: The Essential Characteristics

Now is an exciting time to be creating CSS layouts. After years of what felt like the same old techniques for the same old browsers, we’re finally seeing browsers implement CSS 3, HTML 5 and other technologies that give us cool new tools and tricks for our designs.

But all of this change can be stressful, too. How do you keep up with all of the new techniques and make sure your Web pages look great on the increasing number of browsers and devices out there? In part 1 of this article, you’ll learn the five essential characteristics of successful modern CSS websites. In part 2 of this article, you’ll learn about the techniques and tools that you need to achieve these characteristics. [Detail]

The Mystery Of The CSS Float Property

Years ago, when developers first started to make the transition to HTML layouts without tables, one CSS property that suddenly took on a very important role was the float property. The reason that the float property became so common was that, by default, block-level elements will not line up beside one another in a column-based format. Since columns are necessary in virtually every CSS layout, this property started to get used — and even overused — prolifically.

The CSS float property allows a developer to incorporate table-like columns in an HTML layout without the use of tables. If it were not for the CSS float property, CSS layouts would not be possible except using absolute and relative positioning — which would be messy and would make the layout unmaintainable. [Detail]

Free Slideshow, Gallery And Lightboxes Scripts

For Web design projects, you may find yourself sometimes scrounging around for a simple yet useful image gallery and slideshow. But imagine having a huge collection of AJAX, JavaScript, Lightbox, CSS and Flash-based image galleries at your fingertips. Hopefully, this post will do the trick and provide all the resources you might need. [Detail]

CSS Differences in Internet Explorer 6, 7 and 8

One of the most bizarre statistical facts in relation to browser use has to be the virtual widespread numbers that currently exist in the use of Internet Explorer versions 6, 7 and 8. As of this writing, Internet Explorer holds about a 65% market share combined across all their currently used browsers. In the web development community, this number is much lower, showing about a 40% share. [Detail]

Mastering CSS Coding: Getting Started

CSS has become the standard for building websites in today’s industry. Whether you are a hardcore developer or designer, you should be familiar with it. CSS is the bridge between programming and design, and any Web professional must have some general knowledge of it. If you are getting your feet wet with CSS, this is the perfect time to fire up your favorite text editor and follow along in this tutorial as we cover the most common and practical uses of CSS. [Detail]

30 CSS Best Practices for Beginners

CSS is a language that is used by nearly every developer at some point. While it's a language that we sometimes take for granted, it is powerful and has many nuances that can help (or hurt) our designs. Here are thirty of the best CSS practices that will keep you writing solid CSS and avoiding some costly mistakes. [Detail]

The Z-Index CSS Property: A Comprehensive Look

Most CSS properties are quite simple to deal with. Often, applying a CSS property to an element in your markup will have instant results — as soon as you refresh the page, the value set for the property takes effect, and you see the result immediately. Other CSS properties, however, are a little more complex and will only work under a given set of circumstances.

The z-index property belongs to the latter group. z-index has undoubtedly caused as much confusion and frustration as any other CSS property. Ironically, however, when z-index is fully understood, it is a very easy property to use, and offers an effective method for overcoming many layout challenges.

In this article, we’ll explain exactly what z-index is, how it has been misunderstood, and we’ll discuss some practical uses for it. We’ll also describe some of the browser differences that can occur, particularly in previous versions of Internet Explorer and Firefox. This comprehensive look at z-index should provide developers with an excellent foundation to be able to use this property confidently and effectively. [Detail]

CSS Wishlist: New Ideas, Debates and Solutions

The future of CSS is arriving fast, and many tools, languages, and solutions have been developed that make CSS a job not just for Web designers but developers, too. In many ways, the job could become more complex and confusing, but in many other ways, the new changes will provide more opportunity and better technology for the future of the Web. [Detail]

Big Free CSS Templates Collection

Yes, it is the time to share with you another amazing collection of free CSS-based web templates. CSS templates are giving you the abilityt o create amazing look web sites as will as the abilityt o edit it dynamically and easily. [Detail]

11 Classic CSS Techniques Made Simple with CSS3

We've all had to achieve some effect that required an extra handful of divs or PNGs. We shouldn't be limited to these old techniques when there's a new age coming. This new age includes the use of CSS3. In today's tutorial, I'll show you eleven different time-consuming effects that can be achieved quite easily with CSS3. [Detail]

3 Easy and Fast CSS Techniques for Faux Image Cropping

This article is a summary of a 3 fast and easy CSS techniques you can use to display only a portion of an image in your content. All techniques explained here actually need only couple of lines of CSS. However, it is not cropping in a real sense of the word, we are not cutting the image down to a certain size (CSS can't do that yet) we are merely hiding the "extra" and displaying only a part of the image we want. That's why I call it Faux Image Cropping.
These techniques can be very helpful if you need to keep images at a certain size, i.e. thumbnails in the news section or something similar. Being able to use CSS to control which portion of image to display is a great bonus. [Detail]

Backgrounds In CSS: Everything You Need To Know

Backgrounds are a core part of CSS. They are one of the fundamentals that you simply need to know. In this article, we will cover the basics of using CSS backgrounds, including properties such as background-attachment. We’ll show some common tricks that can be done with the background as well as what’s in store for backgrounds in CSS 3 (including four new background properties!). [Detail]

35 Websites To Teach You How To Use CSS Effectively

CSS ( Cascading Style Sheets) are the modern standard for presenting website. Combined with structural markup language like HTML, XHTML – CSS fully take care about presentation part, creating that good concept – HTML = Content, CSS = Presentation. If you know CSS, you can really do everything controlling spacings, borders, positioning, margins, paddings, colors, fonts, background images, hover effects and more presentational effects. CSS is really easy to understand, and in my opinion every graphic designer should have at least simple coding skills with HTML and CSS, because CSS is really still design part, not really coding. [Detail]

How To Create a Pure CSS Polaroid Photo Gallery

Magical things can be done by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. Let’s take a look at building a cool looking stack of Polaroid photos with pure CSS styling. [Detail]

15 Ways to Optimize CSS and Reduce CSS File Size

I have gathered a long list of CSS optimization and file size reduction techniques that have been using by most designers/developers. Depend on the complexity of your CSS code, these techniques might greatly reduce your CSS file size, or maybe just a few kilobytes.

Also, you might also want to read my previous post regarding CSS - 15 CSS Tips and Tricks to learn how to write more efficient CSS code. [Detail]

CSS Fundamentals

This article is excerpted from Speaking in Styles: Fundamentals of CSS for Web Designers by Jason Cranford Teague. Copyright © 2009. Used with permission of Pearson Education, Inc. and New Riders.

Syntax is how you put words together to create meaning: Punctuation and parts of speech are placed in a specific order to describe something. How you combine these elements has a direct effect on the meaning of what you are trying to communicate.

To describe your Web designs, you need to understand the syntax of CSS. [Detail]

Interesting list of tutorials and codes to build a rounded corners with Javascript and CSS

If your are web designer, maybe you have ever gotten headache by how to build a rounded corner box or button. In this post, I want to share you a list of tutorials and code projects help build a rounded corner easily. This list focus on javascript method, but in some of them, it contains CSS implement. Please create an addition if you guys know any scripts elsewhere. [Detail]

Mastering CSS, Part 2: Advanced Techniques and Tools

CSS is one of the most basic building blocks of modern web design. It creates the structure and style that surrounds your content and is capable of making your site a joy to use or a pain in the neck. Mastering CSS is one of the most important things a web designer can do, and has really become an essential criteria for being a successful designer. [Detail]

Mega CSS Resource Roundup

In this article you will get access to one of the largest collections ever of CSS Tools, Tutorials, Cheat Sheets etc. You may have seen some of these before but here they are all put together

CSS is a key part of web design and it is really essential for web designers and developers to be comfortable with it. CSS is not too difficult to code and at the same time it is extremely powerful if you know how to master it. On the other hand getting started can be quite hard as you need to understand how CSS integrates with other web technologies and how the most fundamental parts work fx. CSS selectors.This article will give you techniques and tools enough to get started and to also to start using more advanced stuff. New to CSS? First thing you need to do is to pick a favourite cheat sheet and print it for quick reference. There are many details that can be hard to remember in the beginning and this is where cheat sheets comes in handy. Then dig into some of the Getting Started Resources to get yourself ready for the many really useful CSS Techniques found here. [Detail]

7 New Essential CSS 3 Techniques Revealed

There are several new and exciting functions and features being thought up for CSS3: text-shadow, box-sizing, opacity, multiple backgrounds, border-radius, border-image, etc… [Detail]