This post is about 5 useful CSS properties that you should be very familiar with, but will most likely rarely use. I’m not talking about the new fancy CSS3 properties. I’m referring to the old CSS2 properties such as: clip, min-height, white-space, cursor, and display that are widely supported by all browsers. So, don’t miss this post because you might be surprised how useful they are.

1. CSS Clip

The clip property is like a mask. It allows you to mask the content of an element in a rectangle shape. To clip an element: you must specify the position to absolute. Then, specify the top, right, bottom, and left value relative to the element.

how css clip works

Image Clip Example (demo)

The following example shows you how to mask an image using clip property. First, specify the <div> element to position: relative. Next, specify the <img> element to position: absolute and the rect values accordingly.

image clip

.clip {
  position: relative;
  height: 130px;
  width: 200px;
  border: solid 1px #ccc;
}
.clip img {
  position: absolute;
  clip: rect(30px 165px 100px 30px);
}

Image Resize and Clip (demo)

In this example, I’m going to show you how to resize and clip images. My original images are in rectangle format. I want to scale it down by 50% to create a thumbnail gallery in a square format. So, I used the width and height property to resize the images and mask them with the clip property. Then, I used the left property to shift the images to the left by 15px.

thumb gallery

.gallery li {
  float: left;
  margin: 0 10px 0 0;
  position: relative;
  width: 70px;
  height: 70px;
  border: solid 1px #000;
}
.gallery img {
  width: 100px;
  height: 70px;
  position: absolute;
  clip: rect(0 85px 70px 15px);
  left: -15px;
}

2. Min-height (demo)

The min-height property allows you to specify the minimum height of an element. It is useful when you need to balance the layout. I used it on my job board to ensure the content area is alway taller than the sidebar.

job board

.with_minheight {
  min-height: 550px;
}

Min-height hack for IE6

Note: min-height is not supported by IE6, but there is a min-height hack.

.with_minheight {
  min-height:550px;
  height:auto !important;
  height:550px;
}

3. White-space (demo)

The white-space property specifies how white-space is handled in an element. For example, specify white-space: nowrap will prevent the text from wrapping to next line.

nowrap

em {
  white-space: nowrap;
}

4. Cursor (demo)

If you change the behavior of a button, you should change its cursor as well. For example, when a button is disabled, the cursor should be changed to default (arrow) to indicate that it is not clickable. So, the cursor property is extremely useful for developing web apps.

cursor

.disabled {
  cursor: default;
}

.busy {
  cursor: wait;
}

.clickable:hover {
  cursor: pointer;
}

5. Display inline / block (demo)

In case you didn’t know: block elements are rendered on a new line, whereas inline elements are rendered on the same line. <div>, <h1>, and <p> tags are examples of block elements. Examples of inline tags are: <em>, <span>, and <strong>. You can override the display style by specifying display: inline or block.

display: inline or block

.block em {
  display: block;
}

.inline h4, .inline p {
  display: inline;
}

246 Comments

Kawsar Ali
Nov 9, 2009 at 12:19 pm

These are really useful. I was actually working on my post with same CSS properties. Too bad you beat me! Always good post Nick. Top of the line

designer graphique
Nov 9, 2009 at 12:19 pm

Thanks for this useful review, and I didn’t know about “clip”. This is awesome CSS trick, I wish I knew it before. Does it work on all browsers? (IE6??)

Brad Frost
Nov 9, 2009 at 12:22 pm

This is a gorgeous post. Really succinct and practical examples for some lesser-used techniques. Well done.

AtiKuSDesign
Nov 9, 2009 at 12:35 pm

I’ve never heard of the white-space CSS rule before. i’m going to have to look into that because it seems like a useful rule.

That’s the new thing I learned today, so thank you for that!

Dan DelMain
Nov 9, 2009 at 12:48 pm

Great Post. I wish people would migrate away from IE6. There are so many unnecessary properties you have to add.

Famba
Nov 9, 2009 at 12:57 pm

I already knew cursor, min height and display, but I never have heard about white space and clip!! Thank you, they are very interesting and useful!

Calvin Tennant
Nov 9, 2009 at 1:00 pm

Really useful post. Never heard of the clip attribute, really wishing I had.

The only issue I have is #5, why not use / float: left / and maintain the ability to set width/height, among other attributes? / display: inline / is a rather harsh way of going about it.

Andy Hunt
Nov 9, 2009 at 1:05 pm

Wonderful post as always! It’s so easy to forget about these hidden gems when you’re eyeball deep in CSS.

Design Informer
Nov 9, 2009 at 1:11 pm

Very useful, especially Min-height. Never knew about that!

Kim
Nov 9, 2009 at 1:27 pm

Thankyou for this, I found it really useful, especially the clipping information. I’ve wanted to do something like this, didn’t realise this existed!

And, I think I’ll tidy up my portfolio by using inline elements instead if floating block elements!

Osvaldas
Nov 9, 2009 at 1:34 pm

Funny, but after 6 years of coding CSS professionally, I haven’t heard of CLIP and there were several times when I needed it.

silvercover
Nov 9, 2009 at 1:43 pm

I didn’t know much about clip property and your article showed me a very well example.

Thanks in advance.

Lucian
Nov 9, 2009 at 2:01 pm

Never heard of clip attribute and I have 3 years experience is CSS now.
White-space it is a great function also!

Architela
Nov 9, 2009 at 2:04 pm

Very useful — thanks!

tom hermans
Nov 9, 2009 at 2:12 pm

just the other day experimenting with the clip-feature and now a nice explanation.. and some other useful tips, thanx guys.

afdasdf
Nov 9, 2009 at 2:29 pm

testing the comments

Teddy
Nov 9, 2009 at 2:40 pm

For the final properly, inline-block will be a great substitute but it’s a shame that it’s not interpreted as we wanted it to be in Internet Explorer (not that I’m complaning, since it has been like that all the time).

I’ve been using white-space property for my <pre> and <code> tags, but I never knew the no-wrap properly could prevent breaking of certain phrases/statements (e.g. dates in your example) into a new line midway. That’s a really excellent application for white-space. Two thumbs up for that!

WebDevHobo
Nov 9, 2009 at 2:53 pm

Demo for clip and clip/resize are the same.

Simon
Nov 9, 2009 at 3:03 pm

The only one I haven’t used is clip and I cant believe why not, these are some amazingly powerful commands for use with styling websites.

Greg
Nov 9, 2009 at 3:08 pm

thanks for the Tips. Simple but helpful

Edd Turtle
Nov 9, 2009 at 4:13 pm

Wow, those are actually very useful :D

Delacour
Nov 9, 2009 at 4:14 pm

LOL using css for years yet I didn’t even know there is a “white-space”! thx for sharing !

Pri
Nov 9, 2009 at 4:43 pm

good stuff….

Arpit Jacob
Nov 9, 2009 at 5:01 pm

Great tips especially about clip property I have never used it before, I always use background property and shift the image. Also thanks for the cursor tip I just found a fix for my site.

Milos Milikic
Nov 9, 2009 at 5:09 pm

thanks, nice tips…

Bryan
Nov 9, 2009 at 5:11 pm

Thanks for the visual on the clip property. Though, I do use the display property quite a bit.

Doug
Nov 9, 2009 at 5:17 pm

Thanks for the tips! I’ve never seen the clip property before. I’m sure I’ll use it now though!

Kiri
Nov 9, 2009 at 6:08 pm

It’s definitely worth noting that min-height only works if the parent element has either a height or a min-height defined, so at the very least, your body will need to have a height defined even if it’s 100%.

Alí Suárez
Nov 9, 2009 at 6:29 pm

Really great tips. Thanks!

Michel
Nov 9, 2009 at 6:34 pm

Never heard of “clip” CSS2 property. Hmmmm…

I guess it wasn’t used much by Web designers (a few years ago, I used to study other designers’ code quite often, to learn how they do design/code) at the time I was starting to learn CSS (a few years ago).

Thanks for sharing! :-)

Michael Thulin
Nov 9, 2009 at 6:51 pm

Do you declare the height twice to override the the !important in IE6?

John Lascurettes
Nov 9, 2009 at 6:54 pm

I’d recommend against using the !important hack for IE6. Why penalize other browers when it’s IE that you’re targeting? “!important” means that it will be that more difficult for assistive devices or end-users to override the “height:auto” value if they ever need to.

A better solution for targeting IE and handing it just the value that’s needed?:

Use * html .with_minheight { height: 500px; } to target just IE6. It’s validating CSS and only targets our problem browser.
Use a conditional commented stylesheet to target IE6 only. Again, just targeting IE6 and not introducing cruft to other browsers.
Or simply just use the underscore hack on the height to target only IE6: .with_minheight {
min-height:550px;
_height:550px;
} Technically, this is valid CSS markup, but it won’t pass validators (see w3c recommendation on css browser-extensions). Again, only targets IE6. No cruft added to other browsers.

John Lascurettes
Nov 9, 2009 at 6:55 pm

Hmm. Unfortunately, your system allowed me to add UL and LIs and PRE tags and showed them just fine in the preview, but then ate them on publish. You should fix that. Don’t show me the preview if it won’t take.

Cheers.

Shantharam
Nov 9, 2009 at 8:20 pm

great stuff, have been using some of these like min-height,display-inline, cursors for a while now, but it is always great to know about different things.

Jing
Nov 9, 2009 at 8:38 pm

thanks, great tips

Jordan
Nov 9, 2009 at 8:48 pm

Nice, informative post. I use 4 out of the 5 properties frequently. Never tried clip, but interesting to see it in action.

anjum
Nov 10, 2009 at 1:37 am

Hey thanks for this article. I had now idea about CLIP: in css. Now i come to know what is it all about :) thanks

Designicle
Nov 10, 2009 at 1:39 am

Great tips. Especially the clip property.

LiliekS
Nov 10, 2009 at 2:01 am

Wow nice tips especially the CSS clip. I don’t even know it exist. Thanks!

dubovoy_aleksandr
Nov 10, 2009 at 2:46 am

thx, great article

Damjan Mozetič
Nov 10, 2009 at 3:27 am

I must admit I never used the css clip property.

Mark Carter
Nov 10, 2009 at 3:33 am

Like several others I hadn’t really come across the clip property … thanks for that.

Just a thought … might be good to run down exact browser support for properties such as the clip, so that the visitor doesn’t have to track it down themselves … a ‘nice to have’ ….

nacho saski
Nov 10, 2009 at 3:51 am

I find the clip property very useful, but its poor support in IE6 make it another candy feature we cant apply in order to keep our sites accesible to -still- many- users. If you want more info about this lack of support, here is an interesting post http://www.velocityreviews.com/forums/t156626-ie6-standards-mode-and-css-clip.html

Ajith Nair
Nov 10, 2009 at 4:13 am

“Clip” was new to me also.

BEBEN
Nov 10, 2009 at 5:29 am

i am found here what the meaning all about form that script….ihihihihihi….usefull

Cloud Keyword
Nov 10, 2009 at 5:49 am

I too was clueless about clip. I also keep forgetting about the white-space one. Must use that in future. Thanks, this was actually useful :)

avanzaweb.net
Nov 10, 2009 at 6:03 am

I have never used clip propierty

banshee
Nov 10, 2009 at 7:29 am

Thanks for the info on CLIP – like almost everyone else here, I didn’t even know it existed! Extremely useful!

Oliver
Nov 10, 2009 at 8:12 am

I’ve never come across these CSS properties but they look like they would be useful for me and I will have to try them on my new websites. Thanks for sharing this.

Max
Nov 10, 2009 at 9:11 am

Thanks for the IE6 Min-height hack! Wish I knew that sooner!

Pippin Williamson
Nov 10, 2009 at 9:34 am

Thanks for this, I’m excited to go play with whitespace. I had never heard or it before.

Kevin Zurawel
Nov 10, 2009 at 9:43 am

With all the talk lately about CSS3, it’s refreshing to see someone exploring the depths of the CSS2 standard we’re using now. This post reminds me of “HTML Mastery” – it’s information that a lot of designers will “know” in the back of their head somewhere, but you’ve brought it out into the light to tell people “these properties exist for a reason.” Thanks for the info!

Joe Stevens
Nov 10, 2009 at 10:20 am

I had no clue about CSS Clip. I think I will definitely be using that in the near future. Thanks

Jordy Pickel
Nov 10, 2009 at 10:38 am

Whitespace is a nifty trick to have. I can’t say how many times I’ve had edits to a page that involve forced line breaks because the content flows into email or web page templates differently, depending on how the font size is rendered in different programs.

Nacho
Nov 10, 2009 at 11:34 am

I wasn’t familiar with CSS Clip either. I’ve been testing it and it’s cool.
Thanks for the tip Nick ;D

Francesco
Nov 10, 2009 at 11:59 am

just bookmarked into delicious…never know about the clip method….thanks folks!

Design Ideas
Nov 10, 2009 at 12:13 pm

Great and useful article! I’ll send it to my friend developer

Rahul - Web Guru
Nov 10, 2009 at 12:28 pm

Quite interesting and simple CSS properties and quite well explained too.
Thanks a ton.

Web Design Maidstone
Nov 10, 2009 at 1:48 pm

Thank you for some useul tips, especially clip

VIP
Nov 10, 2009 at 2:32 pm

Clip property is really helpful for me, will use it in future work.
Thanks alot!!!

gummisig
Nov 10, 2009 at 4:20 pm

Great stuff Nick, very useful to get reminded of old forgotten tricks and some brand new ones I had no idea about.

The clip property is a great resource to have, I´m kind of looking forward to using it :)

From w3cshool:
Note: No versions of Internet Explorer (including IE8) support the property value “inherit”.

…guess the old bastard (ie) does support everything but the inherit, kudos to microsoft.

Grace
Nov 11, 2009 at 8:00 am

Your blog posts are always relevant and informative. Just wanted to say thanks for another nice set of information.

Adrian
Nov 11, 2009 at 9:26 am

Finally the Clip propertie explained perfect!
Thanks a lot!

Sklep zoologiczny
Nov 11, 2009 at 12:42 pm

I would add letter-spacing to this list, but anyway nice article.

Brad
Nov 12, 2009 at 12:10 am

Simple? Yes. But excellent reminders, thanks!

mp-design
Nov 12, 2009 at 4:33 am

it is useful ! i didn’t know about clip method! good stuff! thanks.

Monsieur M
Nov 12, 2009 at 7:47 am

really interesting !

hiro
Nov 12, 2009 at 9:15 am

min-height in this article is useful for me! Thanks!

Hezi
Nov 12, 2009 at 10:00 am

Nice. i like the ‘clip’ property, but use min-height the most.
thanks.

claire
Nov 12, 2009 at 10:54 am

Wow, I never knew about the clip thing.. thanks!

John Riemen
Nov 12, 2009 at 11:06 am

cool.. thank you for this – the min-height one was always a challenge for me. Now you cleared it up.

Dogal Urunler
Nov 12, 2009 at 11:57 am

nice design.

Fefaine
Nov 12, 2009 at 12:05 pm

Great explaination of the clip property.
Thanks!

iiSwanSongii
Nov 12, 2009 at 1:02 pm

I never knew there was a way around the automatic new line break of divs, p, and heading tags. Inline and block is what i’ll be using. Thanks so much!

Webseite
Nov 12, 2009 at 5:33 pm

nice short list, will use it in future, thx for it !

Haziq
Nov 12, 2009 at 10:08 pm

You can use urls for cursor like:

cursor: url('../img/cursors/hand.png'), pointer;

gaijun
Nov 13, 2009 at 12:44 am

thanks!very good!

mabonic
Nov 13, 2009 at 12:55 am

very nice! thank you

Lynn Zephryna
Nov 13, 2009 at 2:20 am

Thanks for the short and concise info. White Space and Min Height will come in handy.

clipping path service
Nov 13, 2009 at 5:20 am

WOW its nice !

Klyve
Nov 13, 2009 at 5:22 am

Thanks, so pleased I read this – I can see uses for a few of them.

Suresh
Nov 13, 2009 at 8:43 am

Thanks, For u knowledge sharing, It will be much useful for the web developer.

فندق كوم
Nov 13, 2009 at 9:29 am

goood tips, thanx

Shawn
Nov 13, 2009 at 10:50 am

Thanks for taking the time to share your knowledge with us. I’m a newbie and didn’t know about these properties. I can already see where I can benefit from a few of them immediately. THANKS!

Sonicatu
Nov 13, 2009 at 2:43 pm

Great tips. I really didn’t knew most of them :) Thanks!

Aaron
Nov 13, 2009 at 3:01 pm

I can’t believe this post has so many comments. All of these properties I already knew about except for the CSS clip properly. Thanks for going so in depth with each one.

Marcin Szewczyk
Nov 13, 2009 at 4:27 pm

white-space… I completely forget about this! Thx

Mike
Nov 13, 2009 at 11:16 pm

Great tips for the green and refreshing for the busy…

As some of us have to wear many hats on a job this was a good find
to kick start my brain as an individual many things get buried in the mental Rolodex anyone who knows every property all the time must not do much else but css & html (No offense intended).

So I do find snarky comments a tad “fan-boyish” the “gaw an idiot should know this” types don’t comment with out good reason it makes you look like a “enter foul language”. Sorry for treading Nick.

Thanks.

Lauren
Nov 14, 2009 at 5:56 pm

Whilst I’ve heard of all these properties other than clip I’ve never once come across a guide on how to use them. Thank you Nick, now I properly understand what each of these properties do!

vache asatryan
Nov 15, 2009 at 10:13 am

haha, white-space ohh man how did i forget that, great guide, your illustrations always bring a smile, thanks so much

Davis hammon
Nov 15, 2009 at 11:20 am

I found the clip to be especially interesting–something I hadn’t really heard of. I think it can be applied very effectivily in interactive slideshow to see more detail.

Thank you for the post–def. Useful.

Victoria
Nov 15, 2009 at 11:33 am

Hi there, I would love to have a comment box like this, may I know how do i get it? It’s for my blog :)

A Website Designer
Nov 15, 2009 at 2:06 pm

Great to see a post called 5 simple CSS and useful properties. This is a far cry from Smashing Magazines usual top 50 etc, etc which take a while to read and I doubt if any website designer has the time to read through 50+.

So well done Designer Wall, great and simple tips regarding CSS properties.

Adam Akers
Nov 16, 2009 at 4:32 am

Another nice bit sized post, love it.

Elizabeth K. Barone
Nov 16, 2009 at 10:53 am

Thanks, Nick; I didn’t know about the clip property at all, and some of these I wasn’t sure how to properly use them or what their actual purpose even was. I can’t wait until the next time I want to put text next to a heading — I now have the power of inline!

pankhuri
Nov 16, 2009 at 11:53 am

thanks a lot for the clip property. it was in my to-explore list but had forgotten to search it… i don’t think i would’ve found better article elsewhere. keep blogging.. :)

mauricio
Nov 16, 2009 at 2:03 pm

I like the min-height, In fact, I didn’t know you can do this, can you do this to set 100% so you have a faux fake columns effect?

thanks

Bindass Delhiite
Nov 16, 2009 at 3:24 pm

Another useful post .. :)

Thanks for the min-height hack for IE 6.

enjoy :)

acai
Nov 17, 2009 at 6:00 am

I can’t wait until the next time I want to put text next to a heading — I now have the power of inline!

Anton Andreasson
Nov 17, 2009 at 6:48 am

But clip() values should be separated by commas, not only spaces, right? To validate, I mean.

Chris Hiester
Nov 17, 2009 at 9:15 am

Thanks for the tip on clip. Very useful.

mumbojumbo
Nov 17, 2009 at 9:18 am

thanks for your great article

Miss Blossom
Nov 17, 2009 at 3:46 pm

As usual you answer all the questions in web design that I diddn’t even know I was asking.

Myspace 2.0 Layouts
Nov 17, 2009 at 6:37 pm

Awww, love this ! Just learned them, i can use them on my site :)

Irene
Nov 18, 2009 at 1:11 am

Wow :)
Very Useful♥

Darrin Dickey
Nov 18, 2009 at 4:35 am

Very helpful. I find myself using display a lot recently, but clip is new to me and I can’t wait to try it out!

cyndy
Nov 18, 2009 at 8:38 am

thanks very handy and useful :)

claire
Nov 18, 2009 at 8:39 am

very cool thank you! Will definately use the min-height one for a twitter box I have.

Nenad
Nov 18, 2009 at 12:51 pm

Very good tutorial. This everyone need to know who work with css.

cssah
Nov 18, 2009 at 6:31 pm

Thanks for the great tips,White-space is really new and awesome. Thx

room34
Nov 18, 2009 at 9:54 pm

Great post! I use most of these all the time (especially white-space and display, and to a lesser extent cursor) but I didn’t even know clip existed… now I just need to find a situation where I can justify using it. Hmm…

The min-height hack for IE6 is another great tip. I hadn’t thought of that… and I usually just avoid using min-height because of IE6.

achmatim
Nov 19, 2009 at 6:02 am

wow! great tips, i like it. how about browser? is supported by all browser?

Shajed
Nov 19, 2009 at 6:07 am

Thanks Very Useful

shpyo
Nov 19, 2009 at 11:24 am

basics ;) Everyone should know it

ashley
Nov 19, 2009 at 12:02 pm

SO useful! thank you :)

Senthil
Nov 20, 2009 at 2:17 am

Gr8 Post !!!!!!
Can u guide me, how we can center and middle align the whole template or an image in div as we use in tables??????? Tell about the problem we face on that in different browsers……..:) Thanks

rgbtantra
Nov 21, 2009 at 3:03 am

Great post friend!!

I was drooling for past few days for min-height compatibility with IE 6.
Finally got a solution.
Thanks :)

J.P.
Nov 22, 2009 at 8:43 am

I deal with a lot of photography and I never thought to add this to my galleries. Awesome! Thanks…

itech_seo
Nov 22, 2009 at 11:45 am

nice, work gr8

Robin
Nov 23, 2009 at 9:37 am

I didn’t know about the clip option. Is that cross-browser?

Surbiton web design
Nov 23, 2009 at 12:01 pm

I use min-height quite a lot with my designs and so was surprised to read you say that it was widely supported yet rarely used. This attribute is incredibly useful if you’re looking to create multi-column fluid layouts. Giving each column a min-height ensures the columns are displayed with a uniform height.

The cursor attribute is indeed one I rarely use and I think you’ve inspired me to play about with them now. Thank you for posting. It was great to read.

Bas Roding
Nov 24, 2009 at 7:14 am

Great post

Wayne Farley
Nov 24, 2009 at 4:41 pm

This is quite useful information. I can’t wait to try these.

Craig
Nov 25, 2009 at 10:15 am

Great post. There is so much you can do with CSS, I’m so glad CSS is widely accepted and is the future of layout. Now if we could get all the browsers to agree everything would be bliss. I didn’t even know about this clip property. Thanks for the schooling.

Roy Ho
Nov 25, 2009 at 12:07 pm

These are indeed useful CSS properties. Thanks!

gabesz
Nov 27, 2009 at 9:58 am

very useful… the 6th should be the: clear: both :)

Ali
Nov 27, 2009 at 6:01 pm

nice one, very usefull. thanks

Ashely Adams : Online Printing
Nov 29, 2009 at 9:28 am

Great tutorial…Very inspirational and detailed…It will help many of us…Thanks for sharing this post…

Basic Websites
Nov 29, 2009 at 5:35 pm

The min-height property is very useful, I was struggling with an issue like your (keeping a column larger than another) and used a very complicated way to achieve this. The min height is so much easier, and the IE hack makes it virtually perfect. Thanks for this.

Ezuca
Nov 29, 2009 at 7:14 pm

Cool! Truly inpiring.

Angelo Beltran
Nov 29, 2009 at 10:58 pm

clip and white-space are now in my toolbox. Thanks!

web design dubai
Nov 30, 2009 at 10:42 am

This is quite useful information.
Thanks for sharing this post…

Shaka
Dec 2, 2009 at 12:32 am

very useful, I can know clip now. Thank you!

rainweb
Dec 2, 2009 at 1:03 am

nice~
good job

sitender
Dec 2, 2009 at 5:24 am

Very very useful topic for all the designers, now i understand what is the importance of clip attribute in css, i have one more request please also explain the other attribute which is generally not used by the css/ html coder

Matthew Cook
Dec 2, 2009 at 4:51 pm

I wasn’t really expecting much from this article because I though I knew all about those 5 attributes but that was actually very helpful.

Thanks.

Rose
Dec 3, 2009 at 7:06 am

Thank you so much ,it’s very useful tips..

Webmaster Barcleona
Dec 4, 2009 at 6:14 am

Execelente, hace varios meses que estaba buscando trucos como estos, gracias!

Carmen
Dec 4, 2009 at 6:48 pm

These are very useful, especially the clipping one. Love it!

BORABORA
Dec 4, 2009 at 9:23 pm

Very useful! Thanks for putting this together.
Best wishes.

Jenny
Dec 5, 2009 at 10:10 pm

very cool. this is just what i’ve been looking for.

SmsVar, Sms Gönder, Toplu Sms
Dec 6, 2009 at 1:44 pm

brawo..

very good..

Adam Hermsdorfer
Dec 6, 2009 at 11:27 pm

Very good css refreshers!

Jordan
Dec 7, 2009 at 1:20 am

Good Tips

Web Design Sheffield
Dec 8, 2009 at 10:25 am

Thanks, Nice little set of tips.
Another one not many people know about is {text-transform: uppercase;} for capitalized text !
Merry xmas

babyBride
Dec 10, 2009 at 2:31 am

Thanks, I do like the clip and resize image css.

fabio
Dec 10, 2009 at 6:32 am

like it… good tips

Human Bagel
Dec 10, 2009 at 2:37 pm

You deserve a medal for design!
Sleek, beautiful, usable design with clean, semantic, standards-compliant markup!

You win the internet.

JMC Website Design Blackpool
Dec 14, 2009 at 12:26 pm

I just recently used cursor to great effect on a css styled form button. Great stuff!

XHTML TEAM
Dec 15, 2009 at 4:13 am

Thanks for the Tips. Very helpful…

Lampros
Dec 16, 2009 at 5:53 am

Very good css tips

Sebby
Dec 16, 2009 at 4:21 pm

Very helpful tips! The Min-Height style is awesome – will definitely use that one a lot. Thank You!

FaS
Dec 21, 2009 at 1:21 am

WOWWW I love your site and the helpful material. I’ll definitely be back; I’m trying to create my own WordPress theme instead of just modifying ones I get.

chris
Dec 21, 2009 at 5:16 am

This are very helpful tips. I just made 5 simple CSS websites wondering how to lengthen the height of the content area just past the sidebar without adding extra nonsense content. I even visited your site but how I wish I saw this post earlier.

But thanks, I’ll be using this tips if ever I’ll be making some again in the future.

MAtt
Dec 22, 2009 at 12:01 am

Awesome post. Never even heard of clip property.

mahnoor
Dec 24, 2009 at 3:05 pm

love ur website design.. very usefull material u have added!!

Biswa
Dec 30, 2009 at 10:01 am

How much I say you thanks, really great material. Every day visit few dozens of websites.I can say Best CSS tutorial on web.

Art
Dec 30, 2009 at 10:53 am

hey, nice post about CSS properties. I learned something new. Great work and nice design of your site.

Proteus Design Studio
Dec 31, 2009 at 12:50 am

I love it! :)

hvntrung
Dec 31, 2009 at 3:11 am

Hey,about the clip property, why you don’t use overflow:hidden for li ,i think it more simple to use clip property

Calgary web design
Jan 4, 2010 at 3:22 pm

helpful – i may use in future

Calgary web design
Jan 4, 2010 at 3:23 pm

i just came back to re-read a section that i need help with thanks

nfl live stream
Jan 5, 2010 at 5:32 pm

thank you sharing

Davis Carlos
Jan 5, 2010 at 8:32 pm

Thanks for your information

prashant
Jan 6, 2010 at 1:08 am

Thanks nice list.. But min-height is not supported by IE6 .. How do i tackle this? :(

vincentdresses
Jan 6, 2010 at 2:08 am

love ur website design..

AndyC
Jan 6, 2010 at 4:33 am

Great CSS tips, good to learn new things.

Adam B
Jan 6, 2010 at 2:21 pm

Some really useful tips here especially like the css clip one as ive always wondered how to do that. Im thinking that you could use the css display:inline-block to get the same results for the last one thou.

Phoebe
Jan 9, 2010 at 12:08 am

Hi, Have you got any tips on fixing display:table in IE6? :)

Lychee
Jan 12, 2010 at 2:51 pm

Stumble Upon brought me here.
I’ve been having a problem with my livejournal layout covering itself on short pages and haven’t gotten around to fixing it until just now with the Min-height.
Stumble got my work back on track. Whatever is the world coming to!?

Thanks for the tips.

Loan Expert
Jan 12, 2010 at 9:10 pm

Thanks for the CSS properties for web design

Itsashirt T shirts
Jan 13, 2010 at 4:32 am

Love to play around with CSS, thnx for the post

Dima
Jan 13, 2010 at 7:09 am

min-height is the best! ty very much

Luana
Jan 13, 2010 at 10:07 am

AMASING, very usefull post! thanks, i just didn’t understand the white space, i think that more exemples could be better, thanks!!

Mr. dametøj
Jan 15, 2010 at 4:46 am

Great article, I didn’t know these properties…. but than again, I am quite the newbie… thanks for sharing ;-)
Cool design of your blog BTW – thumbs up!

Wolfgang
Jan 20, 2010 at 11:42 am

Hi,

I tried to change the position of this image stting: top to 0 and left to 0. but it didn’t work.

Do you know how i can proceed?

phenomenia
Jan 28, 2010 at 4:43 pm

Didn’t know the clip attribute. Might by handy one day. Thx!

Elliot condon
Jan 28, 2010 at 5:30 pm

Clipping! Awesome. I had no idea that could be done. Thanks heaps

Gopinath
Jan 29, 2010 at 7:19 am

Thoughts Hosting:- Domain Name Rs.92/-only, 10Gb space, 100 Email id’s, Rs.2600/-only. And for every domain get FREE extras over 7900/-. *Start Your Own Web Hosting Company Only for Rs.4000/-. visit: http://www.thoughtshosting.com, Contact:9059747833

Gypsy Babu
Feb 2, 2010 at 4:24 pm

I am working on CSS .And this article will help me a lot.I request to you please share some more tips.
Thank you.

capsiplex
Feb 23, 2010 at 5:34 pm

I had no idea that could be done.

Joel
Mar 3, 2010 at 7:32 pm

Good post, I just hope that the resizing of the image is not mistaken by some as resampling. Hence, one of the effects is that the file size remains the same after manipulating the dimensions. So, please advise them to use it wisely.

sbobet
Mar 4, 2010 at 12:07 am

Very good tutorial. This everyone need to know who work with css.

Icons download
Mar 8, 2010 at 12:43 am

Great article.very usefull post! thanks, i really appreciate you for all meaningful posts.

Frederico Mottinha de Figueiredo
Mar 17, 2010 at 7:51 am

Nice tutorial, thanks.

Mwenyeji
Mar 22, 2010 at 12:35 pm

Great tips. Simply outlined.

Jasper
Mar 23, 2010 at 11:04 am

How would you do the image resize and clip with a combination of portret and landscape images?

köpek
Mar 23, 2010 at 3:26 pm

I am working on CSS thank you

Alexander
Mar 23, 2010 at 6:24 pm

Pretty interesting properties. For the “min-height” I simply used padding (but then the effect is a bit different and not as neat). I appreciate the heads up about these properties! :)

john
Mar 25, 2010 at 10:47 pm

Thanks for the nice tutorial.

Ravi Panchumarthy
Mar 26, 2010 at 2:28 pm

Nice and quick tutorial

Artisani
Apr 5, 2010 at 9:00 am

Thanks for this tips.
Especially the min-height for ie was usefull.

Diana
Apr 6, 2010 at 11:59 pm

That is nice! Thanks!

Josh
Apr 8, 2010 at 5:19 pm

Hello, I think #3 is wrong. I believe setting the white-space to nowrap would keep it all on one line. Thus, not wrapping as the value suggests.

Chris
Apr 28, 2010 at 7:00 am

For display I think you missed out 2 values which are ery useful: ‘none’ and ‘inline-block’. None hides the element and is very useful with Javascript etc. and inline-block allows you to use some of the characteristics of a block elements (height, top and bottom padding etc.) on inline elements.

Web Design
Apr 28, 2010 at 9:24 pm

quick and helpful tutorial..much thanks

drummer
May 4, 2010 at 7:22 am

Great site and very nice info! Thanks!

Website Design
May 6, 2010 at 7:45 am

interesting about the css clip… never used it.

Would the images still be the same size and take the same amount of time to load on the page? Why not just crop in PS to cut down on page load times?

elitstudio
May 21, 2010 at 2:56 am

Cool tutorial!

doctormazo
May 28, 2010 at 10:31 am

Cool article! Thanks!

Mina
Jun 29, 2010 at 10:50 am

Yay! Thanks for these tips! very useful. I already knew ‘cursor’ and ‘min-height’, but they are not very common properties. By the way, I love this site :D

Katie
Jul 23, 2010 at 11:44 pm

Thanks for sharing these css properties. Can you display which browsers support which properties. I know there are some issues with white-space.

jDesai
Sep 16, 2010 at 12:36 pm

Decent and quick tips. Thanks a lot.

sukaga
Sep 25, 2010 at 2:37 pm

Hi, i like your articles, very usefull. Can you tell me is it hard to make language-selection menu on CSS? cant find it by Google )

martcol
Sep 30, 2010 at 3:36 pm

I get what the clip thing does but I’m not sure where I might need it?

Thanks

Brad Maver
Oct 4, 2010 at 12:03 am

Great list. All very good points that help out alot .. Thanks for sharing!

Robotics Apps
Oct 9, 2010 at 1:37 am

very useful info.. thank you!! :)

baagdi designer
Oct 18, 2010 at 3:35 pm

you shoul also describe some more here

El garch
Oct 21, 2010 at 3:29 am

Thank you for this nice tutorial, hope you show us more about css properties.

ram
Nov 30, 2010 at 5:06 am

great information.thanku very much

ramya
Nov 30, 2010 at 5:07 am

i got good information in this site.

krike
Dec 7, 2010 at 6:21 am

I’m using most of them so i guess I’m doing fine :D AWESOME :D
However I don’t really see the use of clip.

Submitted on CMS tutorial site: http://cmstutorials.org/tutorial/detail/5_simple_but_useful_css_properties

Ales
Dec 13, 2010 at 2:16 am

Its good.

Juno Mindoes
Dec 23, 2010 at 10:10 pm

Though white iphone 4 is at high price, but with all-powerful function, we can see lots of people just crazy for the latest white iphone 4.

Henry Peise
Dec 24, 2010 at 9:10 pm

White iphone 4 avaiable! It’s a great news to tell you the latest white iphone 4 Conversion Kit is on sale. Get the chance to make your iphone more charming!

Gina Schmidt
Dec 26, 2010 at 3:57 am

Thanks for useful tips. I am going to bookmark this page.

whiteiphone
Dec 27, 2010 at 8:53 pm

If I got a chance, i will prefer buying the iphone 4 white but not the iphone 4 Black. Who can tell me where is the Best iPhone Cases I would really want to take one. Best iPhone Cases and Covers, Sale iPhone 4 Cases, iPhone 3g Cases and Accessories

Uçak Bileti
Jan 12, 2011 at 5:32 am

yalnız şarki süper

Denise
Jan 16, 2011 at 10:58 pm

Thanks for sharing. Lol

formula 21
Jan 31, 2011 at 1:50 pm

Its good.

altın çilek
Feb 2, 2011 at 5:48 am

I always follow your site thank you

hcg damla
Feb 2, 2011 at 1:23 pm

Its good.

allaround
Feb 3, 2011 at 6:12 pm

hmm… Gud article !

sree
Mar 3, 2011 at 1:39 am

great ,this is really informative.

how to put on a condom
Mar 17, 2011 at 4:55 pm

Wow. This is a great site. It’s a great way of being up to date.

How To Get Taller | How To Put On A Condom
Mar 17, 2011 at 4:57 pm

This article 5 Simple, But Useful CSS Properties is amazing!

How To Get Taller | How To Get Taller
Mar 17, 2011 at 5:02 pm

The Image Resize and Clip demo cleared my confusion. Thank you.

Foursseasonssvcs
Apr 5, 2011 at 4:38 am

You have unique business goals and you need someone to make the vision of small businesses in real presence on the Internet. Availability of new, professional, custom designed web site will help increase sales and expose you to thousands of new customers.

Web Application Design

top niche keyword
May 9, 2011 at 8:18 pm

World Top Paying Niche Here!! Don’t Go Any Where!!

top niche keyword
May 9, 2011 at 8:16 pm

Are You Find some Niche Keyword??

Best Tutorial Index
May 9, 2011 at 8:21 pm

World most wanted Tutorials Listing! A huge collection of tutorial you are invited!!

SEO
Jul 8, 2011 at 3:33 am

Thanks guys for the offer.

orhanbt
Jul 15, 2011 at 4:53 pm

verry good

Youssef
Jul 29, 2011 at 11:34 pm

Very useful, thanks man!

game
Jul 31, 2011 at 9:41 pm

The information is very interesting.

bangkok office
Aug 3, 2011 at 3:59 am

Very good excellent

xbox 360
Aug 25, 2011 at 9:36 pm

Useful for many applications.

hotel near suvanabhumi airport
Sep 19, 2011 at 4:15 am

Thank you for Sharing good content.
hotel near suvanabhumi airport

เครื่องจักรกลหนัก
Oct 24, 2011 at 4:50 am

I teach a User Centered Design course and this is a great resource. Thanks.

Moliva
Dec 9, 2011 at 9:25 am

Useful for many applications.

spring valley vitamins
Jan 20, 2012 at 4:35 am

definitely, a BIG BIG deals.thx, for article

Video Marketing and Hosting
May 22, 2012 at 7:45 am

Great resource, many thanks.

Majuterus
Jun 7, 2012 at 7:01 am

Thank you for the resources. I can use some of these css to my own site.

SEO in Karachi
Sep 25, 2012 at 8:29 am

very informative and easy to understand.
it is useful for seo service providers
I am going to use it on my blog SEOSP is my blog SEO SP is Karachi Based SEO Company in Pakistan providing SEO Services from Karachi Pakistan
Thank You for such a nice information.

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.