Wow! It’s 2012 already and a very Happy New Year to all of you!

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!

The basic formatting techniques like Line breaks, white spaces and indentation make your web content stand out and look clean and neat. The HTML <br> tag is used to add line breaks in your page. See below:

marks denote line breaks. To view line breaks or other Formatting marks in Expression Web, go to View menu > Formatting Marks > Show and then from the same menu choose ‘Line Breaks’.

Tip: Use the same menu to view other formatting marks. The screenshots in this article are taken in Expression Web 3.

To add line breaks; in Design view, place the cursor at the point where you want to insert a line break and do either of the following:

a. In the Toolbox, under the Tags heading, double click or drag the .

b. Insert > HTML > Break.

c. Hit Shift + Enter.

NOTE: Hitting Shift + Enter will add a line break whereas hitting only the enter key adds a paragraph break.

To format a line break, select the line break in the design view, go to the Format menu and choose Properties. The Break dialog box will be prompted as follows:

a. Normal line break: create a default line break.

b. Clear left margin: clears left margin and begins the next line at the nearest line below the content in the left margin.

c. Clear right margin: clears right margin and begins the next line at the nearest line below the content in the right margin.

d. Clear both margins: clears both the margins and begins the next line at the nearest line below the contents in both the margins.

You must have observed this behavior that when you click on a hyperlink it is surrounded with a dotted border as shown in the image below:

I observed this behavior in Internet Explorer 8 and Firefox 3.0 and above. I also tested the behavior in Safari 4.0.4 and Google Chrome 4, but they did not display such border. Even though, this is temporary and the border disappears as soon as the link loses its focus, I do not like it. So I came up with this solution.

Add the following CSS to your page:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title> Get rid of the dotted border</title>
<style type=”text/css”>
a:focus {
outline: none;
}
</style>
</head>
<body>
<a href=”#” id=”anchor1″ target=”_blank”> Read More..</a>

</body>
</html>

You can add the same code in your Expression Web page.

However, this could be a problem for users with disablity or those using keyboard instead of mouse. In that case, a woraround could be, when you remove the dotted border, you could change the color of the font similar to the hover/active hyperlink or change the font-weight to bold. This could help the user get a visual cue for navigation. See below:

a:focus{
outline:none;
color:#FF0000;
}

or

a:focus{
outline:none;
font-weight: bold;
}

Many designers and users are confused about the difference between a screen tip/ tooltip and the alt attribute.

A Screen Tip or Tool Tip gives some description about a link, menu or an item. Whereas an alt attribute is used for accessibility for those users who do not have the ability to view images or for those who use screen readers and also for those whose images are turned off/not displayed.

In non-standards compliant browsers like IE 6, the alt attribute was implemented incorrectly. So when a user hovered over an image (with alt attribute defined), he would see a screen tip. This caused confusion among many designers. But standards compliant browsers like Firefox, Opera, Safari and now IE 8 correctly implement the alt attribute.

So to add a screen tip, use the title attribute as shown in the code below:

<img src=”maroon_leaves.jpg” alt=”leaves” title=”Maroon leaves”/>

The output of the above example can be seen in this image. On mouse over what is displayed is the screen tip (content of the title attribute) and not the content of alt attribute.

NOTE: The title attribute will be rendered with or without the alt attribute.

In my previous article; ‘To add a shadow to a box using CSS 3 using the box-shadow property’, we explored the box-shadow property in CSS 3, available in browsers like Safari 3+ and Firefox 3.5+. But plenty of users use Internet Explorer, Chrome, Navigator and such other browsers. How can we have a shadow effect in these browsers? One way is through use of images. I have found out a way to get a shadow effect for box like this:

Though it is not similar to what we would get with the box-shadow property, but we can do with it. Here’s the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>Box Shadow Example</title>

<style type="text/css">

body{

background-color:#ffffff;

}

.box{

background-color: #ffffff;

width:125px;

border: 1px silver solid;

margin: -1em 0 0 -1em;

padding: 0.5em;

}

.shadow{

background-color: silver;

width:125px;

padding: 0.5em;

margin: 1.5em 0 1.5em 2.5em;

}

.tbl {

width: 40%;

}

td{

padding-right:30px;

}

</style>

</head>

<body>

<table class="tbl">

<tr>

<td>

<div class="shadow">

<div class="box">

<img src="maroon_leaves.jpg" alt=”maroon_leaves”/>

</div>

</div>

</td>

<td>

<div class="shadow">

<div class="box">

<img src="small_plant.jpg" alt=”small_plant”/>

</div>

</div>

</td>

</tr>

<tr>

<td>

<div class="shadow">

<div class="box">

<img src="small_plant.jpg" alt=”small_plant”/>

</div>

</div>

</td>

<td>

<div class="shadow">

<div class="box">

<img src="maroon_leaves.jpg" alt=”maroon_leaves”/>

</div>

</div>

</td>

</tr>

</table>

</body>

</html>

The output of the above code would be like this:

NOTE: The CSS in the above example is internal and not external. However it is advisable to you, to create an external style sheet and add all the styles to it. Then link the style sheet to your webpage.

One of the best features of CSS 3 is box-shadow that allows you to add shadow to any element. The property is at present implemented only in Safari 3 onwards and Firefox 3.5 onwards.

An example of the output generated by this property is shown below:

Isn’t it spectacular? And this is possible with a single property; ‘box-shadow’.

The property takes 3 integers and a color attribute.

1. Horizontal offset of the shadow; a positive value will place the shadow on the right of the box, a negative value will place the shadow on the left of the box.

2. Vertical offset; a positive value will put the shadow below the box and a negative value will put the box-shadow on top of the box.

3. Blur radius; beginning from 0 (sharp shadow), the higher the number, more blurred it will be.

4. Value for color.

box-shadow: 10px 10px 10px #888; padding: 5px 5px 5px 10px

NOTE: To add a shadow to the box with rounded corners, use the border-radius property in addition to the box-shadow property.

To get the same effect as shown in the image above, use this code.

<div style="-webkit-box-shadow: 10px 10px 10px #888; padding: 5px 5px 5px 10px; background-color: black; width:130px;">

<img src="../ maroon_leaves.jpg" alt=”Leaves; ”/>

</div>

NOTE: The box-shadow property is prefixed with -webkit- in Safari and -moz- in Firefox. That is because, most browsers support custom CSS tags that are not yet part of any standard. So they are prefixed with the browser name.

But the box-shadow property is still not supported in Internet Explorer and other browsers. To get a similar effect (without using images as shadow) is not possible (or it is something that I am not aware of!) In my next article, I will show you a way to create shadow effect for box without using images.

We learnt what ‘Element Selectors’ are and how to group declarations and selectors, in our tutorial Element Selectors in CSS. But as you advance in HTML and CSS, you will need more specialized rules to style an element.  Apart from document elements (element selectors) there are two other types of selectors you can define on your own. They are Class selectors and ID selectors.

What are class selectors?

A class selector is set of styles that you can apply to one or more elements. See these examples:

<p class=”desc_text” >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor </p>

<h3> Lorem ipsum dolor <span class=”desc_text”> sit amet, consectetur adipisicing elit, sed </span> do eiusmod tempor </h3>

A class ‘desc_text’ when applied to the paragraph element stylizes the entire paragraph whereas when applied to the span element stylizes only the spanned text.

Though we will learn more about the ID selector later, the main difference between the two is that class selectors can be used for multiple selectors and ID selector can style a single element in the entire document.

Defining class selector in CSS

In CSS the class selector is preceded by a period ‘.’ followed by the class name and style definition. See below:

.desc_text {font-size: 10px; color: #cccccc; }

This kind of class selector could be applied to any element that matches the class attribute value ‘desc_text’.

You can also use the universal selector ‘*’ to define the class that matches any element in the document.

*.desc_text {font-size: 10px; color: #cccccc;}

But this one;

p.desc_text {font-size: 10px; color: #cccccc; }

will match any paragraph elements that have the class attribute containing the word ‘desc_text’. In the above example the span element would not match this class and hence the styles would not be applied. So this kind of rule applies only to a specific type of element.

Combination of general class selector and element-specific class selector

.desc_text { font-size: 10px; }

span.desc_text { color: #cccccc ;}

First declaration is an example of general class selector and the second one is of element specific class selector. You can declare both and use them together. The output of the above example would be as shown below:

CSS2 had introduced a new selector, the universal selector to match any element in your page. The selector is indicated as an asterisk ‘*’. The universal selector could be used to list every element in your page.
For example,

* {font-size: 12px}

This declaration would set the font size of all the elements used in your document to 12px.

NOTE: Even though the universal selector is one handy option, consider the specificity of other selectors for it to work properly.

Why is CSS preferred by all the designers? Well that is because of its ability to separate presentation from the content and most importantly its power to edit the document style by changing a single line of code. Don’t believe me? Find it yourself!

An element selector is an HTML element. There are other types of selectors too, which we will explore later. So the element selectors are the most basic selectors in your document structure. html, body, p, div, span, headings, etc are all different types of element selectors of a document. We can apply certain rules to them to stylize these selectors. For example, if we want all the paragraphs to be displayed in red color, we can do that by;

p { color: red}

Or if we want the heading 2 to appear with a gray background;

h2 { background-color: gray}

Grouping multiple declarations

We saw how to apply a single declaration to an element selector. But you can have multiple declarations in the same rule. See this example:

p { color: red; background-color: gray;}

In this rule, we have combined two declarations; (i) the font-color in all paragraphs to be red (ii) background color of all paragraphs to be gray. Semicolon is used as a separator between these declarations. If you notice, the last declaration is also followed by a semicolon. It is rather important to do so since browsers ignore the whitespaces in the style sheet. To make this clear see following example:

p { color: red; background-color: gray font-size: 10px; }

Since there is no ‘;’ after the value ‘gray’ for background-color, browsers check if the property has multiple values. But since font-size is not a valid value and background-color does not take multiple values, both the properties will be ignored. But note that the last declaration of the group need not end with a semicolon. For instance;

p { color: red; background-color: gray}

This will work absolutely fine in most of the browsers. But at a later stage, if you want to add some more declarations to the group, you must add a semicolon after this declaration, else it would ignored as shown in above example.

Grouping Element Selectors

We saw techniques to apply one or more styles to a single selector. But what if, you want to apply same style to more than one element selector. For instance, if you want heading 2 and paragraph both to be in red. It would be stupid of us if we write the same style for another element. There is a better way to do that;

h2, p { color: red}

In this example, we are using a comma to group two selectors, viz. ‘h3′ and ‘p’. Similarly you can group multiple selectors. This way you generate fewer lines of styles in your style sheet which in turn makes it easier for you to find out selectors and styles at a later stage when your style sheet has numerous rules defined in it.

Grouping multiple declarations with multiple selectors

By now we grouped multiple declarations for a single selector and we also grouped multiple selectors with a single declaration. Now it’s turn to group multiple declarations, with multiple selectors. Confusing enough isn’t it! Well this example would make it clear;

h2, p {

                color: red;

                background-color: gray;

                font-size: 10px;

}

These were some powerful and effective techniques of CSS. We will learn more in our coming articles, but for now I hope you enjoyed reading this.

The display property defines how HTML elements should be displayed.

• display: block

The element will generate a block around it with line break before and after the element.

• display: inline

The element will generate an inline box around it, which will be in line with rest of the content.

• display: inline-block

The element will generate a block box positioned as an inline box.

• display : none

The element will not generate any box; the element will not be displayed at all.

• display: inline-table

The element will generate a table like box positioned as an inline box.

• display: list-item

The element is displayed as a list item. The list is an unordered list and hence preceded by a bullet mark.IE5 on Mac displays the list as ordered.

• display: run-in

The element will generate a block box if it is followed by any box other than block box. It will generate an inline box if followed by a fixed and absolutely positioned block box.

• display: inherit

The element inherits its value from its parent element.