The 30 CSS Selectors you Must Memorize
05 Nov 2010 No Comments
So you learned the base id, class, and descendant selectors – and then called it a day? If so, you’re missing out on an enormous level of flexibility. While many of the selectors mentioned in this article are part of the CSS3 spec, and are, consequently, only available in modern browsers, you owe it to yourself to commit these to memory.
1. *
- * {
- margin: 0;
- padding: 0;
- }
Let’s knock the obvious ones out, for the beginners, before we move onto the more advanced selectors.
The star symbol will target every single element on the page. Many developers will use this trick to zero out the margins and padding. While this is certainly fine for quick tests, I’d advise you to never use this in production code. It adds too much weight on the browser, and is unnecessary.
The * can also be used with child selectors.
- #container * {
- border: 1px solid black;
- }
This will target every single element that is a child of the #container div. Again, try not to use this technique very much, if every.
View Demo
2. #X
- #container {
- width: 960px;
- margin: auto;
- }
Prefixing the hash symbol to a selector allows us to target by id. This is easily the most common usage, however be cautious when using id selectors.
Ask yourself: do I absolutely need to apply an
idto this element in order to target it?
id selectors are rigid and don’t allow for reuse. If possible, first try to use a tag name, one of the new HTML5 elements, or even a pseudo-class.
View Demo
Less is More: Fundamentals of Minimalist Web Design
26 Oct 2010 No Comments
Fighting the battle against clutter is something every designer undertakes, whether it’s on their own site or when designing for a client. Your web site’s design should enhance your site’s purpose by putting the focus on the content and being usable by everyone. Taking the extra time to ensure no detail is left overlooked will produce an effective and attractive website.
Curt Ziegler (aka cudazi) is a web designer specializing in WordPress theme development with 10 years of design experience, a number of highly successful products and over 5000 sales at ThemeForest! Read on to get some professional tips and tricks exclusively from Curt:
Define the Site’s Purpose
Your site needs a clearly defined purpose to eliminate any confusion from the start…
First things first – before opening up your favorite graphics app to design your hot new minimal site, you will need to establish what the site is going to be used for. Your site needs a clearly defined purpose to eliminate any confusion from the start by having a single, strong focal point. It may be to display award winning photographs to potential clients, share breaking technology news or used to sell your hand made pet toys. Start by making a simple statement:
My site needs to ______________________________________.
- Educate teens on the dangers of texting and driving
- Showcase award winning photos to potential clients
- Sell hand-made, premium dog toys
By clearly defining a purpose early on, you will be able to use it to help keep your design on track. As you work through the design elements, continue to ask yourself questions such as:
- Will this compliment and reinforce my site’s purpose?
- Is this really needed or am I just filling space?
- Will this be distracting from my site’s purpose?
Anything you add to the site that does not reinforce your site’s true purpose can be a distraction, weakening your overall message. The additional items must compliment your focus.
Your site selling high-performance pogo sticks does not need to include a link to your stock photography portfolio, no matter just how awesome it is.
This isn’t the time for things you want on your site, it’s what is needed that is truly important. You only have a few seconds to convince your visitors to stick around and read your message.