Using Two Classes on one item in CSS.

Here's a quick CSS Tip you can use if you need to style an item with two(or more) classes.

Sometime you might need to make something stand out a little more than the rest of the elements using the same CSS Class. You could throw a span tag around it or you can uses a second CSS Class. This way if you need to use this style again you aren't constantly having to type out the whole span tag.

It's actually pretty simple…
The HTML

<div class="one two">This text has TWO classes.</div>

The CSS
.one
{
color: #ff0000;
}
.two
{
font-size: 1.5em;
}

and here is the result:

A simple but very useful CSS Tip.

Popularity: 15% [?]

Don't want to spend all that money on Photoshop? There is a free alternative, GIMP, or GNU Image Manipulation Program. A good alternative with a lot of support and plenty of tutorials to help you learn GIMP. Here is a list of a few GIMP Tutorials. Most of the sites these GIMP tutorials are on have many other tutorials. These should be enough to get you started though.

GIMP Tutorial - The User Interface

(more…)

Popularity: 22% [?]

It's the weekend! Here are a few web design and graphic design related posts I stumbled upon (not from StumbleUpon just regular browsing) over the week.

45 Photo Editing Tutorials for Photoshop - A great list of tutorials to help you learn about photo editing in Photoshop.

Designflavr - I just found this site and I really enjoy it. "DesignFlavr is a breed of website that hopes to deliver the latest and freshest art and design straight to you with no frills and no hassle. The concept behind this website is to help support the vast and ever growing number of Designers and Artists that reside here on the World Wide Web."

css-warfare - Another inspiration site with a lot of good CSS designs.

25 MORE Reasons You Might Be A Hardcore Graphic/Web Designer - A list of reasons you might be a hardcore graphic or web designer over at bittbox. The first list is also available.

Popularity: 20% [?]

Here are ten band gig, or show, posters. Old or new gig posters can always be used as inspiration. They usually have some great typography elements, nice use of colors, and interesting imagery. I never really thought about looking at gig posters for inspiration until a recent trip to Nashville, Tennessee. There were posters everywhere down there. Hatch Show Print posters are found all over in Nashville. I'm only showing ten posters, but there are literally thousands of gig posters out there. Some of these are Hatch Show Print and some are ones I found at GigPosters.com or GIGART.com.

(more…)

Popularity: 23% [?]

For me, one of the best parts of running this blog is that I am always learning something new. Doing research for new posts and finding new resources and sites helps me expand my knowledge and pass it on to the readers. With all the CSS I have written and learned, I never really knew about global resets. I have seen them before in other peoples code, but didn't pay much attention to them.

I recently came across a great article over at perishablepress.com that explains what they are used for and gives a long list of different types of resets. I have unknowingly used resets before when setting padding and margin to 0 for different elements and then adjusting it to my liking.

It's important to design sites with cross-browser compatibility in mind. With the different ways that browsers handle CSS and the fact that each browser has it's own default setup for things like margins and padding, adding these global resets can really help the design process. I plan on implementing some of these resets in future design projects.

Here is an example of a CSS reset. To find a lot more check out this Killer Collection of Global Reset Styles.

* {
     padding: 0;
     margin: 0;
}

The * is called a wildcard symbol. Here it is used as a wildcard selector which means that these properties are applied to every element. So, all the padding and margins are reset to 0.

You can add other properties to the wildcard selector. Some people will add border: 0; and outline: 0;. The above, with padding: 0; and margin: 0;, is one of the most popular CSS resets used.

The post at perishablepress is worth a read, and they have a lot more reset options.

Popularity: 21% [?]