If you’ve done anything with CSS you have come across IDs, classes, tags, and compounds. These are types of CSS rules.

Let’s cover each one.

Tags

A CSS tag type is used when we are redefining an HTML tag. For example,

h1 {
   font-size: 24px;
   margin: 12px 0 12px 0;
}

We want the h1 headings to be at 24px with a top and bottom margin of 12px. We can use a CSS tag style for redefining almost any html tag. Some of the more common ones are body, paragraph <p>, heading tags<h1>..<h6>, and links <a>.

Classes and IDs

Classes (and IDs) take CSS to another level. It’s great to be able to redefine html tags, but classes and IDs let us create our own tags. The difference between classes and IDs is that one is used only once on a page (IDs) and the other can be used multiple times (classes).

Classes

Let’s say I want to emphasize certain text by using a red color and a bold font. And, I want to  emphasize text several times on a page. I would set up a class as follows:

.redbold {
   color: red;
   font-weight: bold;
}

Classes always begin with a period. When I want to use this class on the page it would look like this:

<p> This is text on a page. <span class="redbold">And this is in red.</span></p>

Another use of classes that I’ve done regularly is creating boxes on the right side. I set up a class to create the box and then use that as many times as needed on the web page. The class would include height and width attributes. See posts below for more info.

IDs

IDs are very similar to classes except that they are used only once on a page (theoretically) and they always begin with the # sign.

For example

#container {
   width: 960px;
}

To use the above ID on a web page I would add the id to a div tag:

<div id="container">
all the information inside the container goes here....including text and html tags
</div>

#rightsidebar {
    width: 250px;
    float: right;
}

#rightsidebar h1 {
     color: red;
}

Creately is an online diagramming tool for flowcharts, mindmaps, wireframes, and more. It has an extensive library of object sets and ready-made templates. It has built-in collaboration options that let you share, review, update and track online diagrams.

Creately’s inuitive interface makes it quick and easy to create diagrams.

It has a myriad of shapes and symbols to choose from ranging from basic shapes to org charts to people shapes to SWOT templates, etc. Here are just a few of the samples:

Click and drag the symbols of your choice to the diagram window.  Need to move the symbol after placing it your diagram? Simple. Click and drag to the new location. The specific x,y coordinates will show up as you drag the object.

After adding an object you can also, add text below the object, add a connector, define the stacking order, or add a duplicate object.

To connect an object to another object simply click on the 2nd object on the desired side. Creately adds the connecting lines.

At the top of the working area is the normal menu options. You can add your own lines, text, and images. You can specify fill and stroke colors for your shapes.

When you are ready to share your diagram with others, click on the share option at the right of the workspace area.

Easily send emails to your reviewers by entering their email addresses.

Enable a view link for your diagram for your reviewers to preview your work.

When you are done with the diagram, you can publish it and share on Facebook, LinkedIn, Twitter, or embed it on your website.

Check Creately out.  It’s free and they provide an online demo version for your to experiment with.

View more WordPress How To Videos.

What has been your experience with Flickr or istockphotos? What other services would you recommend?

View more WordPress How To Videos.

View more WordPress How To Videos.

This video is part of our Quick Video Series for WordPress.

Posts don’t have to be posted immediately. Instead, save them as Drafts. Come back and edit them as your ideas develop. Then, when you are ready, you can either publish the post immediately, or schedule it to be posted at a later date. To learn more, check out this video.

View more WordPress How To Videos.

Multiple Undo’s

What I love about Photoshop is there always something new to learn. I think this feature has been there for a long time, but I found it just in the past year. We are all familiar with the ctrl-z keyboard shortcut to undo the last step. Did you know if you add the alt key it will continue to undo previous steps? Pressing crl-alt-z multiple times will continue to go back multiple steps. Actually, keeping ctrl-alt pressed and just clicking on z will continue to go back.

Copy Layer Style

There are multiple ways to do this, but my favorite is to hold down the alt key, click on the ‘fx’ icon on the layer that has the style I want to copy, then drag the ‘fx’ icon to the layer I want to apply the same style. Walla!

Copy Layer

Although this one is very common, it’s always good to mention it again. I use it all the time.

Highlight the layer you want to copy in the Layers panel. Press ctrl-j. A copy of the layer will show up above the original layer. By default, the name of the layer will be the same name as the original layer with -copy at the end of it.

Trim Image

I use this technique for getting rid of extra space around an image.

This can be used to remove transparency or a solid color.

To do this technique, choose Image/Trim. Select the either transparency or color (top left or bottom right color). Click ok and walla!

You can also select which side of the image you want to trim. I don’t think I’ve ever changed the default settings which is to trim all sides.

Solo Layer

I don’t use this technique as often as some of the others, but when I need it, I am glad I have it in my repertoire of techniques.

If I just want to preview one layer, I hold down the alt key and click on the eye icon for that specific layer. All the other layers turn ‘off’.

Go Back to Last Saved Version

This handy menu item can save you from having to close the file and re-open it when you want to go back to the last saved version.

Click on the File menu and notice the Revert option. This option quickly takes you back to the last saved version.

Select a Layer Automatically

I am throwing this one in here because it comes up a lot when I am training. This is a life saver for some of my students. If you are not used to having to select the desired layer from the layers panel, you’ll love this option.

There is an easy-to-miss check box in the control panel (below the main menu). To see this, you have to be on the move tool (the black arrow at the top of the tool box). Notice in the control panel to the far left a very simple checkbox called Auto Select. That’s it! Turn that on and you will be able to click anywhere in your document and Photoshop will automatically select the layer underneath your cursor. This setting is especially handy if you are working with text and you just want to click and update your text.

Another Layer Select Technique

This technique saves you from having to select the desired layer in the layers panel. It’s especially handy when you have layers on top of layers in your document. Make sure the Move Tool (black arrow at top of toolbox) is the active tool. Mouse over the area of your document that has the desired layer. Right-click. A context menu pops up showing you all the layers underneath your cursor. Select the desired layer.

Those are tips I use often. What are your favorites? What have I missed?

For those just learning CSS, here is a fantastic tool to help you generate page layouts: CSS Portal. The result is rather generic but it provides a great basis to build on.

They offer more than just CSS for page layouts. On the same site, they offer tools to generate your buttons and your menus. Fantastic!

I didn’t spend much time with the button generator, but between the layout generator and the menu generator you could very quickly come up with the shell of a website.

As with any tool, I’m sure it has it’s quirks, but what a great way to get a quick jumpstart on a website.

There are other layout generator options also available. Check out the section titled “CSS Layout Tools” in this article: 50 Useful CSS Tools and Generators for Developers.

They have a list of eight layout generators, but I found CSS Portal to be the most user-friendly. Be sure to check it out!

What’s your experience with CSS Layout Generators?

QR Codes are becoming rather commonplace. Let’s discuss what they are and why you might want to use them.

QR codes are form of a barcode. The main difference between a ‘normal’ barcode and a QR code is that a QR code is two dimensional – which means it can hold a lot more data. QR is short for Quick Response. Their ability to hold more information and their ease of use makes them practical for small businesses.

The beauty of QR codes is that they can be read by smartphones. Apps that read QR codes are readily available. Digital information such as a website address can be stored in a QR code, read by a smartphone and the smartphone user is immediately taken to a website.

Two things are needed to start using QR codes: 1) QR code generator, and 2) QR Code reader.

QR Code Generator

Google ‘QR Code generator’ and you’ll get a number of results. Most of them are free. Some generators allow for more design and color in the QR code than others. A couple of recommend sites are Kaywa, Keremerkan, and myQR. The code on the left is from myQR. At each site you can choose whether you want a website address (URI), an email, a text message, or other options in your QR code. You enter the desired information, click a button, and walla, there’s your QR code! You can download it and place it wherever you’d like.

QR Code Reader

Google ‘QR code readers’ and you’ll have a number of options for apps that read QR codes. Kaywa has its own reader, but there are others available. Mobile-Barcodes has a list of the ‘best QR-Code reading software available’. QR code readers are available for most smartphones.

In a future posting, we’ll discuss the many different ways to use QR codes for marketing your business. In the meantime, go create your own QR code!

This very useful site lets you experiment with various CSS settings, then gives you the option to download the CSS. Beautiful!

And, that’s just the beginning.

Remember, these CSS options are CSS3 – meaning they may not work in older browsers. But, it even helps with that by displaying on the site which versions of browsers the current feature you are working on will work in.  And, it even shows mobile compatibility. Nice!

At the top left of the website is a drop down. Choose the specific CSS3 feature from this list.

You can also choose a feature from the options across the top:

At the top left of the screen, below the drop down feature list, are the parameters for the selected CSS3 property. Experiment with these till you get the look you want.

After setting the properties, I always glance at the Browser Compatibility section to be sure I understand which browsers will handle this CSS3 feature.

At the top right, it shows the code for this feature, and an option to download the code. The Download option will save it as a zip file, making it easy to copy and paste code into your website.

And that, my friends, is CSS3 Maker.

Visit the site and experiment with the latest CSS3 features.