What are we facing?

I have a web page that needs a printer friendly version and I don’t want to change its markup.

The Solution

Fortunately the html link tag allows to associate a style sheet depending on what device the document will be displayed on. Among the list of possible values that the media attribute can handle we will be focusing on the print value which is going to help us link an printing specific style sheet to the web page. The following example illustrates how to use the media attribute.

Now that you have added the the link tag, you’ll notice that whatever style included in printerfriendly.css style sheet file will not affect any tag in your page when you’re are viewing it in your web browser, but if you print it, or execute print preview (let’s not waste paper), you’ll see that the printer specific styles will do their job.

Some External References

• Print Different
• Html Link Tag

What are we facing?

I want to manage the font size using CSS instead of the size attribute in the font tag, but at the same time I want to keep my pages looking the same.

The solution

If you have used font sizes in the 0 to 6 range, you are on the right spot, your pages are going to render identical using CSS, As you can see in the table below:

size	size Rendering	font-size	font-size Rendering
0	Size	xx-small	Size
1	Size	x-small	Size
2	Size	small	Size
3	Size	medium	Size
4	Size	large	Size
5	Size	x-large	Size
6	Size	xx-large	Size

 

The font sizes that fall out of this range need some extra work to get them to look the same in CSS, If you need to get them to work you can play with the relative values ‘smaller’ and ‘larger’.

 

Some external resources

• http://www.w3schools.com/CSS/pr_font_font-size.asp
• http://css-discuss.incutio.com/?page=FontSize

What are we facing?

I want to devote a section of my page to quotations from external sources, and I want to do it the right way, both visually and semantically.

The Solution

You should use the <blockquote> tag because it’s meant to designate quoted text, generally long quotations. An use of <blockquote> is exemplified below

<blockquote><span>
The &lt;blockquote&gt; tag is supposed to contain only block-level elements within it,
and not just plain text. To validate the page as strict XHTML,
you must add a block-level element around the text within the &lt;blockquote&gt; tag
</span></blockquote>
	    

If you use <blockquote> as shown above, you’ll notice that the only thing that happens when you apply it is that your paragraph gets indented as you can see below

By the way, you should not use <blockquote> for indentation purposes.

Now you need your quotation to look nice. In order to change the rendering of you quotation we are going to apply some CSS magic to the <blockquote> tag

             blockquote
            {
                padding: 5px;
                font-style: italic;
                background-color:Silver
            }

And this is how the quote looks like when the style is applied

Now you have semantically correct quotations rendered nicely.

Some external references

• Blockquote: Then and Now