Pages

April 15, 2013

Sorry friends, its been four months since I posted in this blog until now.

Because, I was looking to take this learning platform to a much more professional level with a self hosted domain name and with much features that a normal blogger platform cannot do. Hope you can understand!

Now, I introduce you to my new blog Bricks of Web (http://bricksofweb.com).

In my new blog, I'm trying to make tutorials that any beginner can understand and practice their coding skills. And if you like my new blog please do follow them from the resources available below,

November 28, 2012

Mostly CSS style that is applied to an element is also inherited to its descendants. Just like humans inherit skin color, height, baldness etc... from their parents and grandparents. In this post, lets try to understand why certain styles are inherited and why some or not.

Why elements are inherited?

Because, inheritance is big time saver. Imagine a webpage containing thousands of elements which needs to be styled, and to style them individually is a heck to work. It is only because of this inheritance property in CSS, we save a lot of time.

Let us see an example to understand this,

<!-- this is HTML --><p>The journey is difficult, long, sometimes <strong>impossible</strong>. Even so, I know few
people who have let these <em>difficulties stop them</em>. We enter the world without
<em>knowing for sure</em> what happened in the past, what <em>consequences</em> this has
brought us, and what <em>the future may</em> have in store for us.</p>

You can see in the above code, the color of the paragraph tag(p) is changed. But, the color property is also inherited to its descendant selectors like strong and em's. Imagine if there is no inheritance then we need to style each and every element in a webpage.

Limits of Inheritance

Some CSS properties do not inherit their values on to their descendant elements for good,

Properties that affect the placement of elements on the page like margins, padding, background color, borders of elements are not inherited.

Every browsers have their own default property style for some elements. Elements like headings, anchor links have their own predefined styles like have bigger font-size or coloring the link to blue etc...

Some times multiple styles conflict to apply style to a single element. In those cases, it depends on certain inheritance rules.

November 26, 2012

Attribute selectors are used to style items using the attribute of elements rather than targeting tag elements in HTML. This gives you another way or opportunity to style the similar tags with different attributes.