Treehouse: Grow your CSS skills. Land your dream job.

Article Archives

15 comments

Question & Answer Wrap-Up: Quickies

Mackinley Drummond

What's the deal with the "cardboard cutout" CSS-Tricks look?

Nothing metaphorical or especially significant. I just like texture in general. I also wanted to make the site look unique and not fall into any preconceived mold of what a CSS-based site had to look like. I have begun the early stages for a design refresh for this site. I'm pretty pumped about it. Don't get too excited though, it's gonna take me a while to complete it. I'm …

35 comments

Should You Host Your Clients Websites?

This question was sent in by jamie y.

I have been asked before when talking to potential customers if I could host their site. Right now I have been referring them to a hosting company. But I was wondering how I might be able to host them myself and pocket that hundred bucks instead of giving it to the hosing company. Is there an easy way of doing this?

Absolutely yes, you should offer to host your clients sites

32 comments

What Are The Benefits of Using a CSS Framework?

Vin Thomas sent in this question through Twitter:

What are the benefits of using a CSS framework? And would you suggest that over starting from scratch?

I was kind of dreading this one. I feel like the proper answer requires an in-depth analysis of many of the popular frameworks, and to be really thorough, actually do some projects using them so I can see how they "feel" in real usage. That makes me tired just thinking about it.

Instead …

75 comments

How Much Should You Charge for a Website?

This question was sent in by Tom Nowell.

Tom said he was a university student and has been building websites for people lately. He says that he does it on his own time so it doesn't cost him anything, so he has no idea what to charge.

All of us have faced this problem before. It's a bit of an awkward situation. You are putting a price tag on yourself and it feels weird. Most of us are modest …

30 comments

XHTML 1.1 or HTML 4.01?

NOTE: This article is super old. As I write this warning in mid-2013, there is only one DOCTYPE that should be used, the HTML5 <!DOCTYPE html>

Aaron Bazinet originally posted this question in the forums.

I'm going to go ahead and say right away I'm not an expert on this subject, but I do find it quite interesting. The first line of every page we design starts with a DOCTYPE, and I have a feeling that most of us don't …

29 comments

How Would You Recommend a Novice Get Started Using CSS?

This question was sent in by Nikita James.

I get this one a lot and it's surprisingly difficult to answer. The problem is that the question doesn't include the persons background, which will in many ways determine the best course of action.

  • Are you literally just getting started in web design? As in, you have never designed a website before?
  • Have you designed web sites before, but never with CSS? As in, you are coming from a table-based mindset?
40 comments

Do You Need To Be a Good Designer AND Coder?

This question was sent in by Greg Arndt.

Is being proficient in both design and coding fairly common in web design or is a person usually better in one rather than the other. I find my trouble is that I can code easily, but have an extremely difficult time designing a website. If it's common to be good in both and typically do both in a job, any suggestions on achieving knowledge in the other field? Not only would …

28 comments

Is There Any Dedicated CSS Hacks For Safari or Opera?

This question was sent in by Marcin Lachowski.

Back in the day, there used to be a hack for Safari using the pound (#) sign. Safari didn't like that symbol, so you could declare something like this:

p { color: red; } p { color: black;# }

Every other browser will read the second line replacing the first line and the text will be black. Safari doesn't like that pound sign and will stick with the first declaration and …

39 comments

Absolute, Relative, Fixed Positioning: How Do They Differ?

Finsta left a question in the forums:

I am fairly new to web design and I could never master the differences in positioning of elements. I know there are absolute, fixed, and relative. Is there any others? Also do they majorly differ? And when should you use which?

Short answer: Yes, there is one more, "static", which is the default. Yes, they majorly differ. Each of them is incredibily useful and which you should use of course depends on the …

28 comments

What Do You Think is the Best Online WYSIWYG Editor?

This question was sent in by Edwin.

To clarify, I believe Edwin is asking about these JavaScript scripts you can use on website which turn regular <textarea>s into more robust editing environments. You'll recognize one in use right here on CSS-Tricks:

I like editors like this, especially in WordPress comment forms. WordPress allows commentors to use HTML tags in their comments, like <strong>, <em>, and <a href=""> tags. That's nice, but not all commentors may feel comfortable using tags …

5 comments

Next 10 Days: Your Questions, Answered!

For the next two weeks, I'm going to change up the regular programming! I'll be back home in Wisconsin for a friends wedding and to visit family and friends, catch some football games, and have fun! So to makes things a little easier on myself, instead of doing the regular tutorials and screencasts that take quite a bit of preparation and time, I'm going to do a few weeks of Question & Answer with you guys!

So if you have …

80 comments

CSS Wishlist: 21 Designer/Developers Sound Off

I asked a bunch of designers what they thought needed to change in CSS.

Wolfgang Bartelme

Designer at Bartelme Design

I'd love to see cross-browser support for gradients, shadows, opacity masks and rounded corners. I guess that would not just dramatically reduce bandwidth, but also speed up production and customization.

Jon Hicks

Designer at hicksdesign

I would love a different box model! I find it bizarre that padding and border add the width of an object, and would love to …

9 comments

Poll Results: How do you back up your websites?

It's nice to hear so many people have a backup plan! It's probably a much rarer situation that your web host loses your data than it is that your own computer fails. But still... backups can save your ass in a major way.

Personally, I backup files and databases locally. Then my local machine is backed up by Time Machine. I'm thinking that is alright for now, but I'd like to beef it up at some point.

I admit a …

8 comments

Links of Interest

Automatic Numbering with CSS Counters

The CSS 2.1 spec makes inserting counters into content possible. This has always been possible with ordered lists, but this counter system is much more robust allowing you to insert counters on any type of page element, set up incrementation rules, resetting rules, and more. The Opera Dev Blog has a nice article on how to do it. Works in current versions of all the major good browsers, and is slated to work in IE …

37 comments

Your Go-To Hex Code Color

A few days ago I mused on Twitter:

When I need to pick a hex code color out of thin air, I always pick #ccc

Turns out, lots of folks have their own favorites! It's little mini conversations like this that make Twitter so much fun.

DigitalSkraps

#ccc

 

reidab

orange

 

leefloyd

#e8e8e8…

25 comments

Modal Login Pages

Wikipedia has a succinct opening sentence about modal windows:

In user interface design, a modal window is a child window which requires the user to interact with it before they can return to operating the parent application, thus preventing the workflow on the application main window.

These are common in desktop applications when a program needs an important decision made. They are becoming more and more popular in web applications thanks to the JavaScript "light box" (or one of …

35 comments

The Usability Problems of useit.com

Jakob Nielsen has written some damn smart things about usability, and his work has probably done great things for the web in general. You hate to beat up on a guy like that, but c'mon, it is beyond ridiculous to me to be a self-proclaimed god of usability and have a site as awful as his. I'm not the first one to say it, and I won't be the last. (Great article on a group makeover from 2004) People have …

5 comments

Links of Interest

Browser Differences I Can Live With

For a beautiful web has a nice article on acceptable cross-browser differences. Essentially, progressive enhancement typography stuff and then things like border-radius. I completely agree. I guess that answers this question.

 

Feed IE6 With a Basic Stylesheet

A lot of times when you use conditional stylesheets, you create one for IE 6 that over-writes some exisiting rules from your main stylesheet to fix quirks, hide things, and do just general cleanup. …

29 comments

Styling Scrollable Areas

The scrollbars on browser windows are not styled by the website itself, or even generally by the browser. They come from the operating system itself.

The desire to customize the style of these scrollbars is strong. When you are starting out, it feels like something you should be able to do with CSS. Complicating the issue, if you search around for CSS to change/customize scrollbars, you'll probably find it. The problem is that in IE 5.5, there was proprietary browser …

10 comments

Lifestream Website with Sweetcron

I wrote a tutorial for NETTUTS that has been published:

Sweetcron is "The Automated Lifestream Blog Software". It is still in public beta, but is already a very nice blog software package. The beauty of Sweetcron is that new posts are created automatically from your activity elsewhere on the web. New photos on Flickr? Tweets on Twitter? Thumbs up on StumbleUpon? Blog posts on Tumblr? Add them all to your Sweetcron-powered site and they will appear on your site in …

38 comments

Body Border 2: Fade In with Gradient

A while back I showed you how to create a Body Border with CSS. Basically, we used four fixed position DIV's to ensure all edges of the screen got a border and that the border would sit on top of all other content.

Let's take that same idea and expand on it.

  • Instead of a solid color, we'll use an alpha-transparent black gradient.
  • Instead of it being always-on, we'll have it fade in on a particular rollover.

View Demo Download

8 comments

Links of Interest

Test Your Color IQ

I would think designers would be better at this than most folks. You can test your color IQ by arranging blocks of color into hue order. There are 20 blocks per row and the hue change isn't that dramatic, so it's a bit tricky!

 

Contextual Form Highlighting with Pure CSS

The best kind of highlighting on forms is where not only the input field gets highlighted but also the corresponding label. We have the :focus …

29 comments

Drag ‘n Drop Cards

In the next week or so we are launching refreshed site for one of our clients at Chatman Design. The client is Beacon Athletics, a company that sells equipment for athletic fields. The homepage is of course of particular importance. Over the past year or so, their current homepage had become quite cluttered as different areas of the site were added and every section was vying for attention. The bottom line, is that Beacon is a company that sells products …

18 comments

A Business Card Microformats Site

All microformats are are standardized ID and Class names to wrap data in. Really. That's it.

Say you are having a birthday party next week and you are posting about it on the web. That event has a name (Birthday party!), a location (Chuck E. Cheese!), a time (from 6:00pm-9:00pm), and some extra details (No gifts). There are many many ways to present this information semantically the web. The event could be a definition list with DL's and DT's. You …

15 comments

Will Font Embedding Ever Become A Reality?

I have to admit I don't have my head fully wrapped around this whole font-embedding controversy. At it's root, it comes from us web designers being frustrated by the lack of options font options for our web pages. We want more, the "core 10" are just too limiting. Ideally, we'd like to use any font we want without resorting to alternative methods like sIFR, FLIR, or simply just using images.…

5 comments

Links of Interest

IE 8 Proprietary CSS Attributes

IE 8 will have a number of proprietary CSS attributes. Not a big surprise, all the major browsers have them. It's a way to have support for a) stuff that is truly proprietary to that browser, b) stuff that they want to support but the CSS3 spec isn't completed yet, or c) stuff that IE 8 will only be partially supporting. Of particular controversy? "-ms-overflow-x/y". We have pretty good consistent support of the overflow-x/y …

29 comments

Screencasting Setup

I get a fair number of questions about how I record the screencasts, so I thought I'd do a post on it that is both of interest now and that I can refer people to later. …

8 comments

From The Forums

Yesterday I "upgraded" the forums from phpBB 3.0.0 to 3.0.2. It was a bit of a debacle, probably mostly my fault, and it was down for a lot of the day. It's back up and running now though! Apparently it fixed an issue one user was having with IE 7, so that's cool. I did lose the some of the "search" data from the database, so searches in the forums might be kinda limited for a while (if anyone knows …

21 comments

Messing With Firefox’s View Source CSS File

Firefox has a number of core CSS files that it uses to render web pages. Most of them are filled with sensible default values for all those pages out there which don't provide their own styling. For example, Firefox has its own CSS file just for forms called forms.css which gives form elements their special Firefox form look. This file differs from defaults in other browsers, hence the common need for CSS resets to yield cross browser consistency. But I …

10 comments

Links of Interest

Tutorial Search

When I was doing that video on Google Search I thought to myself wouldn't it be cool to make a search engine that only searched through design/development sites? I talked myself out of it, because I started to think you'd be better off searching regular Google instead of limiting yourself to certain sites. Reader Art Webb clearly had the same idea, and built TutSearch.net. I almost wish I hadn't talked myself out of it, because in …

8 comments

How To Deal With An No-Longer-Semantic ID or Class Name

Errol writes in:

What's your thoughts on a situation where you've started
naming classes and then halfway through you realize that
you need the same class but the naming isn't semantic.

Do you create a duplicate class, rename the existing one
to something more general, or something else?

For example:

I'll have a #modules_list_footer but now I need the same thing
for articles, so I could just use modules but it
should be "#articles_list_footer".…

25 comments

Improving the Default Directory View

You've all seen a page like this:

That's when you are viewing a directory on a server (or locally), that doesn't have an "index" page to show you, but does have permissions set to allow you to see the directories contents. Different browsers have different takes on it. Here is Fx3:

None of them are exactly shining examples of user-friendliness, but they'll do. After all, chances are all you need to do is quickly scan the contents and click on …

5 comments

Links of Interest

Fade Out Bottom (revisited)

The first post that was ever popular on CSS-Tricks was my tutorial on fading out the bottom of a website. Reader Pascal Moret wrote in with some suggestions for fixing it up for IE 6. I figured what the heck, might as well get it fixed up for those folks who might want to use it but are worried about that. The live demo is updated as well as the download.

 

Override Inline…
91 comments

IE 6 Blocker Script

Fed up with supporting IE 6? Ready to just cut it off? I don't blame you. I generally feel that most problems people have with IE 6 are pretty easy to work around with practice, but that is not always the case, and I feel like the JavaScript support is even more problematic for developers.

Many times it just comes down to how best to spend your time. If you have to choose between designing and coding a neat new …

19 comments

Weird File Requests and Easing Server Stress with .htaccess

I got an email from Media Temple (my hosting provider for CSS-Tricks) telling me that I was going to exceed my "GPU" limit for the month. Wha? Turns out a GPU is a "Grid Performance Unit" and is a Media Temple specific way to calculate how much server resources you are using. I think everything but database stuff is included in this. They provide a "GPU Tool" as part of their interface to show you what parts of your website …

32 comments

Launch: Status

Today is the unveiling day of a new web application I've been working on the past few months. I am pleased to announce: Status. I worked on it with my friend Richard of Shiftedfrequency.


What is Status?

Status is a communication tool that is all about private groups. You can either start a group, or get invited to an already existing group. Within your groups, there is but one single function, and that is to "Check in". When …

20 comments

Links of Interest

Automatically back up your entire web server files and databases to Amazon S3

Christina Warren has a comprehensive and excellent tutorial on creating a Ruby script to back up your entire web server, including databases, and upload them directly to an Amazon S3 bucket. The tutorial is geared toward Media Temple, but I imagine could be adapted to other hosts. She also did a screencast demo demonstrating it all. This is high on my list of to-do's, and handy for …

48 comments

Date Badges and Comment Bubbles for Your Blog

One of the things you run into when your blog becomes bigger, is that you need to cram more info into less space, to make it possible to display all the information you want to show. One of the things I did to do that is add an icon for the date, and then a bubble over that with the number of comments in it.

As you can see, this "shield" shows the day, the month, and the number of …

12 comments

Screencast Archives Updated!

It was a long and grueling process, but I finally finished updating the entire video archive. Here are the improvements:

  • Videos play on the web in Flash. From time to time I would get a note from someone either saying the had trouble watching the videos online or downright yelling at me for embedding video in Quicktime. I like Quicktime as with the way I shoot it easier to deal with, has smaller file sizes, and higher quality. Well, I
62 comments

New Poll: How Do You Back Up Your Websites?

What if you hosting provider calls you one day and tells you they had a catastrophic fire at their facility and every bit of data on their (your!) servers is gone!

It's highly unlikely, of course, and it's more likely that your host does a better job of backing up data than you do. But... it's certainly possible and ultimately, you are responsible for your sites. If you do client work, the duty of backing up is even more important!…

3 comments

Links of Interest

Google Docs: Forms

This isn't exactly breaking news, but I only just heard about it so I thought I'd share. The free service Google Docs allows you to build web forms from within it. It has a pretty limited feature set. Basically you just provide the question, answer type, help text, and whether it's required or not. Add as many questions as you'd like and save it and you get the ability to embed the form as an iFrame. The …

140 comments

Creating a Slick Auto-Playing Featured Content Slider

I love the Coda Slider plugin for jQuery. I've used it recently to build a couple of tabbed "widgets". One here on CSS-Tricks in the sidebar to show Script & Style links, Featured Posts, and Popular Posts. Just kind of a fun way to show lots of content in a small area. I also used it on an article for NETTUTS for a similar purpose.

Both of these examples use the Coda Slider pretty much "out of the box". Sure …

9 comments

Script & Style Exclusive: Automatically Generate a Photo Gallery from a Directory of Images

UPDATE: Script & Style is closed, but an updated version of this article is now on David Walsh's site.

Just a quick note that I wrote up a tutorial (with demo and download) on how to Automatically Generate a Photo Gallery from a Directory of Images as an exclusive for Script & Style.

There will be exclusive articles posted from time to time on Script & Style as well as, of course, the regular stream of links aimed at helping …

32 comments

Poll Results: What is your favorite CMS?

WordPress was the clear winner in the most recent poll asking What is Your Favorite CMS?

I'm a bit surprised there weren't more people commenting that WordPress isn't really a CMS (which I disagree with). WordPress had more than twice the votes than its nearest competitor, the more "traditional" CMS, Drupal. Actually, Drupal and Joomla were neck and neck at the finish line which makes sense to me as the share much of the same functionality as I understand …

4 comments

Links of Interest

Want More Sales? Become an Authority

This latest article from Search-This, Thinking Outside the SEO Box, is about small-guy eCommerce stores and what they really need to do to compete in the ever-saturated online store space. The main advice? Become an authority in your niche. Are you trying to sell cost-efficient agility training equipment to high schools? Then you should be blogging about training. If you establish yourself as an authority on training, you will gain traffic, gain links, …

4 comments

Building a Better Blogroll / WordPress Podcast

I wrote an article for NETTUTS that was published today. It's called Building a Better Blogroll: Dynamic Fun with SimplePie and jQuery. In it, I make up a "widget" for pulling in recent headlines from the Envato family of blogs which you can switch between using the Coda Slider plugin for jQuery.


I was interviewed by Charles Stricklin of the WordPress Podcast on Episode 44. It starts about 58 minutes in. We talk about that series I did …

7 comments

Links of Interest

Finding Information: Factors that improve online experiences

As this site grows, my concerns about the findability of information grows. I feel like the navigation is fairly clear (although sub navigation is lacking). I have browseable archives and search, yet still, am I doing all I can do make the information on this site easy to find? I wish WordPress offered more advanced search for one thing, I might look into adding this via plugin somehow. Another idea I have is …

11 comments

Launch of ThemeForest + Exclusive Beta Invites!

You guys are probably already aware of the Eden and their family of kick ass tutorial sites (e.g. NETTUTS, PSDTUTS, etc.). They also run the site FlashDen, which is a marketplace for Flash components. With your FlashDen account, not only can you browse and buy their giant collection of Flash components (think photo galleries, audio players, animations, even full website templates), but you can also be an author and sell Flash stuff that you make. The top …

21 comments

Label Placement on Forms

When creating a web form, one of the many choices you must make is how you are going to align your labels with your inputs. This is not a trivial decision, as this placement affects the readability/usability of your form, completion rates, speed of completion, and ultimately the satisfaction level of the users trying to get through your form. But is there one ultimate answer for how you should be aligning labels? Not really, it depends on the specific needs …