Well you can say I just woke up to the internet world after a long hiatus. Although I was blogging actively in 2010-11, I had to stop most of my online stuff and give way to becoming a parent. I am a Mom now and want to get back to what I enjoy doing – Blogging about Web Design!

I plan to start the first post of this year by thanking every person visiting this site and listing down the most interesting CSS questions that I received from you folks, the last year. I also plan to make this post as interactive as possible. In this post, I will list only the questions and let you answer them. Next week onwards,  I will update this post and start adding answers to these questions, duly acknowledging your answers in it. I will make a separate post for all deserving answers and publish it in your name, with your permission.

Sounds good? Let’s get started!

Q1. Why should I choose CSS/DIV over Table for creating Layouts?

Q2. When should I use Class Selectors instead of ID selectors?

Q3. Please explain !important?

Q4. Cross Browser way to align CheckBoxes and RadioButtons

Q5. When to use Img tag instead of CSS background-image?

Q6. How do I make sure I am using Web Safe Fonts?

Q7. When to use Margin vs Padding in CSS?

Q8. When should I use em, px or % in font sizes?

Q9. Which list-style-type properties are supported by all major browsers?

Q10. How can I create a font of my own?

Q11. How can I break long words and auto wrap them in a DIV?

Q12. I want to add reflection to all the images on my site. Is there a simple way to do this?

Q13. Horizontal Rules are so boring to look at. Do you have some CSS to spruce it up?

Q14. How can I write a style sheet that has two rules; the 1st rule for all media types, and 2nd rule for mobile devices?

Q15. How can I align text between two images?

Q16. How can I print background images

Q17. How to center align a Div and the contents in it?

Q18. Which CSS Frameworks do you recommend?

Q19. Remove dotted outline on Links in FireFox

Q20. How to include one CSS file into another?

Q21. Books for Beginner and Intermediate CSS designers?

Q22. Can I style a <br />?

Q23. What’s the difference between @import and link?

Q24. Any CSS Troubleshooting Tools?

Q25. What is Quirks mode? Why is it needed?

and yes, there were no rounder corner questions I got last year

So go on and take a shot at answering any of these questions!

<canvas id=”3dCanvas” width=”400″ height=”200″></canvas>

You can draw graphics such as lines, arcs, curves, circles, shapes and create nice effects etc., directly into the canvas element. In this article, I will demonstrate how to draw 3D text in HTML 5 canvas. The source code link is given at the end of this article. We will be using Expression Web (with sp2) as our web editor. Make sure that the doctype is set to HTML 5.

Step 1: HTML

Here’s the HTML needed to declare a canvas element on our page

Here we have added the canvas tag to the HTML code and defined the height and the width attributes with the value 200 and 400, meaning that the canvas should be 200 pixels tall and 400 pixels wide

Step 2: JavaScript Code (onload function)

Write the following JavaScript code. I will explain the code in a bit. We have also defined a drawTextInCanvas function to draw the layers and cast shadow on these layers

On the onload function(), we first retrieve the canvas object using its id attribute value (3DCanvas) in the getElementById method. This allow us to get a reference to the 2D drawing context.

Note: “3D Context” is WebGL

Next we retrieve the height and width of the canvas object. We get a reference to the 2D drawing context and store it in the ctx variable.  Once we have got a reference to the 2D context, we make a call to an HTML5 Canvas API function font, fillStyle and textAlign.

drawTextInCanvas() function

In the drawTextInCanvas function, we have used a loop to draw multiple layers of text one on top of the other, to create a 3D effect. The last parameter ‘4’ that you see in the drawTextinCanvas() function, represents the depth, where four layers are drawn one over the other.

The shadowBlur, shadowColor and shadowOffset is to apply a soft shadow beneath the text. Finally the fillText() call prints the text on the position specified and you should see the following

Download the 3D Text in HTML 5 and Expression Web source code

See a Live Demo

To know more about the features in Expression Web 4 SP1 read What’s new in Expression Studio Web 4 SP1 and the Description of Expression Web 4 Service Pack 1

How to install the Service Pack?

Download the service pack from Microsoft Download Center by visiting this link.

How to determine whether Expression Web 4 SP1 is Installed?

In Expression Web 4, go to About Microsoft Expression Web.

If Expression Web 4 SP1 is not installed, the following version number appears:
(English language) Microsoft Expression Web 4 Version 4.0.1165.0 and (Non-English languages) Microsoft Expression Web 4 Version 4.0.1170.0

If Expression Web 4 SP1 is installed, the following version number appears:
Microsoft Expression Web 4 Version 4.0.1241.0

Brush tool and the Pencil tool are traditional painting tools. While brush tool created soft strokes of color the Pencil tool creates hard-edged lines. In this tutorial, we will study the Brush tool in detail.

The brush tool can be found in the toolbar shown by a small brush icon or use the shortcut ‘B’.

Once you choose the brush tool, following options will be displayed in the Options bar.

a. Presets: Choose from the recently used presets or browse for more.

b. Brush: Opens up its own menu with two sub-options – Master Diameter which sets the diameter of the brush and Hardness sets the softness (with lower value) and hardness (with higher value) of the brush. Here you can choose a type of brush from the given set of brushes and can also load brush presets by clicking on the small right arrow in the menu.

c. Toggle the Brush Panel: Opens up the Brush Palette.

d. Mode: Set the painting mode in which the brush will be used.

e. Opacity: Sets the opacity of the brush.

f. Tablet Pressure Controls Opacity: Overrides the Brush Panel settings and lets the tablet pressure control the opacity of the brush.

g. Flow: Sets the flow rate of the brush.

h. Enable airbrush mode: Enables the airbrush modes.

i. Tablet Pressure Controls Size: Overrides the Brush Panel settings and lets the tablet pressure control the size of the brush.

In addition to these options, the Brush Panel (shown in pt. c.) will also give you some more Brush options.

Here is a sample usage of few brushes;

In this tutorial, we will align our objects on the basis of the key object. Let us see how.

1. Select all the objects to be aligned and distributed. I have created this example for this tutorial.

2. Open the Align Panel – Window > Align or click on the Align link on the Application bar.

3. Now select a key object just by clicking on it. It will then be highlighted with a blue line.

4. Now choose the type of alignment and distribution. For our example, we will have to align the objects vertically and distribute them horizontally. So first choose, Vertical Align Center from the ‘Align Objects section’ to align the objects vertically as per the center of the key object. You can also try the Vertical Align Top or Vertical Align Bottom options to align the objects as per the top or bottom of the key object. See the result;

5. Next we will distribute the spacing in between all the objects equally. Select the key object like we did earlier, and in the ‘Distribute Spacing section’ enter a specific value in pixels and then click on Horizontal Distribute Space.

Explore all the other alignment and distribution options and use as required.

Download the Illustrator logo files.

EW 4 has a doctype for HTML 5. To use the HTML 5 doctype in Expression Web 4, follow these steps:

1. Tools > Page Editor Options… > Authoring tab.

2. Under the Doctype and Secondary Schema section, choose the Doctype and the secondary schema (from the drop down menu) as HTML 5.

So now all your new documents will have the HTML 5 Doctype and it is written as;

<!DOCTYPE html>

Now you can create HTML 5 pages by hand. The HTML5 Schema Configuration Add-In for Expression Web enables the new HTML5 schema to check your code markup for errors and gives IntelliSense for HTML5 tags, attributes and values in the code view.

Download the HTML5 Schema Configuration Add-In for Expression Web and follow these steps for installation”:

1. Launch EW4.

2. Tools > Add-Ins… In the Manage Add-ins dialog box, click on Install.

3. In the Open Expression Web Add-in File dialog box, browse to the directory where the add-in was saved and click Open. The add-in will be installed.

4. Click ‘Yes’ when Expression Web asks you to enable the add-in. If the add-in has been installed correctly, it will be listed in the Manage Add-ins dialog box as shown here;

5. Close the session of EW4 and run it as Administrator (right click on EW4 icon and choose Run as administrator). An HTML 5 button will now appear on the Standard Toolbar, as shown here;

6. Click the button to configure the HTML 5 schema.

7. Click on Enable HTML 5 button to update the EW HTML 5 schemas. Close the dialog box and restart EW4.

8. Now set the Doctype and Secondary Schema to HTML 5 under Tools > Page Editor Options… > Authoring tab.

Expression Web 4 now provides IntelliSense for HTML 5 elements, attributes and their values.

Read more about the HTML 5 add-in over here.

Both the fill tools are listed under the same button on the toolbar. The tool that was last used will also be visible. To view the other tool click and hold down the button and the fly out menu will display both the tools.

Let us look at each tool individually.

NOTE: Though the tools are almost similar even in the lower versions of Photoshop, I have written this tutorial using Photoshop CS5. The Options may be different.

A. Paint Bucket Tool

The Paint Bucket is used to fill color or pattern by clicking in an area. When you select the Paint Bucket tool in the toolbar, the Options bar will display these parameters;

1. Source for Fill area – will let you choose how the paint bucket should fill the area, with the foreground color or a pattern. If the foreground color is chosen, the area will be filled with the foreground color. If a pattern is chosen as the source, then the next icon will be activated and clicking on the down arrow will give you a list of patterns. Further clicking on the triangular button in the palette (shown below) will give you more patterns and options.

2. Mode – sets the fill modes. Choose any from the list.

3. Opacity – will determine the opacity of the fill. Lower values will make the fill more opaque.

4. Tolerance – will decide the degree to which pixel colors are affected by the fill. The acceptable values range from 0 – 255. The lower values will decrease the range of colors affected by the tool and vice versa.

5. Anti-alias – when selected will add a translucent border between the filled and unfilled areas.

6. Contiguous – when selected will affect the adjacent areas affected by the tolerance value.

7. All Layers – when selected will affect all the visible layers, else only the active layer will be affected.

To use the Paint Bucket tool, follow these steps:

a. Make a selection or if you want to fill the entire area, no need for a selection (choose the layer you want to fill with in the Layers Palette).

b. Choose the tool in the toolbar.

c. Choose the Foreground color.

d. Single click inside the area.

B. Gradient Tool

The Gradient Tool is used to fill an area in a gradient. When you select the Gradient tool in the toolbar, the Options bar will display these parameters;

1. Gradient – will display various gradient types to choose from. Click on the triangular button in the palette to display more gradients and options.

2. Gradient Style – let you choose Linear, Gradient, Angle, Reflected or Diamond gradients by clicking on respective buttons.

3. Mode – sets the fill modes. Choose any from the list.

4. Opacity – will determine the opacity of the fill. Lower values will make the fill more opaque.

5. Reverse – will let you reverse the selected gradient fill.

6. Dither – will smoothen the transition of multiple colors used in the gradient and would not make them look like bands.

7. Transparency – adds transparency to the gradient.

To use the Gradient Tool, follow these steps:

a. Make a selection or if you want to fill the entire area, no need for a selection (choose the layer you want to fill with in the Layers Palette)

b. Choose the tool in the toolbar.

c. Set the Foreground and Background colors.

d. Set the options in the Options bar.

e. Click and hold down the left mouse button, drag in the direction you want the gradient to be filled and leave. The transition of the colors will depend upon how long or short you drag the mouse.

The Spot Healing Brush Tool automatically samples from around the retouched area. Hence is very useful is getting rid of imperfections like blemishes from a facial picture. Let us see how to use the Spot Healing Tool.

1. Select the Spot Healing Brush Tool from the Toolbox.

If the Spot Healing Brush Tool is not visible, it may be hidden under Healing Brush Tool or Patch Tool or the Red Eye Tool.

NOTE: If you need to retouch a larger area you can use the Healing brush or the Patch tool.

2. Now the Options bar gives you some options to choose from;

Brush Size – Choose a larger brush size to cover a larger area and vice versa.

Mode – are the blending modes.

Type – are the different healing techniques determines how the pixels are selected to heal the spot.

Proximity Match uses the pixels around the edge of selection and fills the patch.

Create Texture uses all the pixels in the selection to create a texture and fill the area.

Content-Aware is a new feature introduced in CS5. With content-aware Photoshop analyses the contents of the image and figures how it should look and finds out the best way to remove the unwanted area.

Sample All Layers – Select the option to let Photoshop sample data from all the visible layers and deselect if you want to sample it using only the active layer.

NOTE: You may need multiple clicks and a combination of different types of healing techniques to get a desired effect.

3. Now just click the smaller area or click and drag to repair imperfections in a larger area.

Here is our original image:

And here’s the image after we healed the spot of black pole.

There are lots of other unwanted areas in this picture that I need to heal, the final picture looks like this;

TIP: Where the area is larger you can also use the Patch Tool.

How will you make sure that your page is rendered properly in browsers using minimum screen resolution or using the highest resolution? Here are some tips of how you can achieve that.

a. Keep at least one column variable

If your layout is made up of 2 columns where in the left column has all navigation links. It is advisable to fix the width of this column and leave the right column to configure the rest available space. This can be applied to a 3 column layout too.

b. Use Stretch Layouts

If you are using the 1024 x 768 screen resolution while designing the page and you know there could be readers who may use a lower resolution, then set your main page content table to a width of anywhere between 90-95%. This will leave buffer space around the table helping it look clean in a lower resolution.

c. Make the lowest resolution as baseline to build websites

If you build your layout using the lowest resolution (800×600) so that the table fits well in it, when viewed in the higher resolution your page will still look nice. To give you a tip, you can set a contrast background color, or add border or a shadow effect to the table to make it stand out from the body. This can be used with the stretch layouts too.

Choose any one of these that suits your requirements.