The Issue with CSS opacity:

The problem with using opacity to create a transparent background, apart from the several line of CSS syntax to cater to different browsers, is that both the parent and child elements become transparent. It is possible to resolve this issue with additional lines of CSS and HTML mark-up, such as using extra div’s, positioning and such but that just adds a whole lot of junk to the file.

The Problem with 24-bit PNG file:

The problem with 24-bit PNG file is that not only is it not supported in IE, the file size is much larger than a just creating transparency with CSS.

So here is the SOLUTION! RGBa!

RGBa allows you to declare your regular RBG values plus an alpha value to control the level of transparency. So this is how it would look:

.opacity50 {
/* fallback for IE that does not support RGBa*/
background: rbg(255, 255, 255);
/* 50% opacity */
background: rgba(255, 255, 255, 0.5);
}

        

A better fall back for IE

.opacity50 {
/* For IE 5.5 - 7 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000);
/* For IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000)";
}

        

Okay, so let me explain what I did above and how it works. Filter is a proprietary CSS extension added by Microsoft back in the year 2000. There are many other filters that are available, which I will talk about later in another post. The gradient filter, have a start and an end hex color both of which have its own independent alpha channel. The first 2 digits are the alpha and the last 6 digits are the hex value.

Your final code should look like this:

.opacity50 {
/* For IE 5.5 - 7 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000);
/* For IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000)";
/* 50% opacity */
background: rgba(255, 255, 255, 0.5);
}

        

There you go! Now you have a transparent background that does not effect the child elements. Also the best part about this is that since Microsoft released the Filters in 2000, this method works on all browsers.

Explanation:

The <wbr> tag is used to indicate where it would be okay to add a line-break.

<p>to learn more about HTML and CSS you should visit advance<wbr>styles</wbr> website.</p>

Explanation:

The <time> tag is used to declare a date and time within an HTML document.

<article>
<h1>Article heading</h1>
<p>article published on <time datetime="2010-03-24>March 24th 2010</time></p>
<p>Article content</p>
</article>

        

Explanation:

The <section> tag specifies a ssection in an HTML document.

<section>
<h1>Section heading</h1>
<p>Section content</p>
</section>

        

Explanation:

The <progress> tag represents the progress of a specific task.

<div>
<p>Uploading...<progress>50%</progress></p>
</div>

        

Explanation:

The <output> tag specifies the result generated by a script.

<div>
<input type="text" /> +
<input type="text" /> =
<output>The answer if 5</output>
</div>

        

Explanation:

The <nav> tag specifies a navigational section of the HTML document.

<nav>
<a href="home.php">Home</li>
<a href="html.php">html</li>
<a href="css.php">css</li>
</nav>

        

Explanation:

The <meter> also known as a gauge specifies a unit of measurement within a known range. This should be used for measurements with a known minimum and maximum value.

<ul>
<li><meter value="0.5">50%</meter></li>
<li><meter value="50" min="0" max="100">50 out of 100</meter></li>
</ul>

        

Explanation:

The <mark> tag is used to highlight part of your text for reference purposes.

<p>Remember to <mark>study</mark> for your test tomorrow.</p>

It is important to understand the intended purpose of this tag. According to the HTML5 specification:

When used in a quotation or other block of text referred to from the prose, it indicates a highlight that was not originally present but which has been added to bring the reader’s attention to a part of the text that might not have been considered important by the original author when the block was originally written, but which is now under previously unexpected scrutiny. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user’s current activity.

Explanation:

The <hgroup> tag is used to group the header content of an HTML document, section, or navigational element. More specifically, it is used to group <h1> – <h6> elements when multiple levels are used

<hgroup>
<h1>heading 1</h1>
<h2>heading 2</h2>
</hgroup>