April 15, 2013

Welcome to my new blog!


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,

Cheers and happy coding!

November 28, 2012

Understanding Inheritance in CSS


Inheritance in CSS

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?

why_inheritance_is_applied_in_CSS

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>


/* this is CSS */
p {
   color: #069;
   background-color: yellow;
   padding: yellow;
}

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 in CSS


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.

ALSO SEE: Targeting tags within document hierarchy

1. Targeting Attribute

This will simply target the attribute of the tag. So now, the elements under this attribute will be styled accordingly.


<!-- this is HTML -->
<img src="keepcalm.png" width="500" height="300" />
<img src="keepcalm.png" width="500" height="300" title="Keep Calm" />


/* this is CSS */
img[title] {
    border: 3px solid red;
}

Form the above code, you can see that the image with title attribute is styled accordingly to the CSS but the same image without title attribute doesn't.

2. Targeting Exact Value

We now know how to style an element according to its attribute, but we can also style an element according to its attribute values. Let us see how to target exact attribute values,


<!-- this is HTML -->
<p><a href="http://codecrypton.blogspot.in">CodeCrypton - Home</a></p>
<p><a href="http://codecrypton.blogspot.in/p/html.html">CodeCrypton - HTML</a></p>
<p><a href="http://codecrypton.blogspot.in/p/css.html">CodeCrypton - CSS</a></p>


/* this is CSS */
a[href="http://codecrypton.blogspot.in/p/html.html"] {
    background-color: #000;
    color: #fff;
    text-decoration: none;
}

You can also style the webpage according to the attribute values as explained above. The specified value must be exactly equal as in attribute.

3. Targeting value within spaces

As we know to target exact attribute values, let us learn how to target attribute value words within spaces here,


<!-- this is HTML -->
<p title="This blog name is CodeCrypton">Code Crypton is a programming blog that focuses on 
building webpages.</p>


/* this is CSS */
[title~="blog"] {
    background-color: orange;
    color: #069;
    width: 400px;
    padding: 10px;
}

By using the tilde ( ~ ) symbol, now you can target value words that are within spaces.

4. Targeting values within dashes

Now, just like styling attribute values within spaces, now we can style attribute values that are within dashes. Lets learn about that here,


<!-- this is HTML -->
<p title="this-blog-name-is-codecrypton">Code Crypton is a programming blog that fouces on 
building webpages.</p>


/* this is CSS */
p[title|="blog"] {
    background-color: yellow;
    color: #069;
    width: 400px;
    padding: 10px;
}

Now by using the vertical bar ( | ) symbol, we can style the attribute value within dashes.

5. Attribute beginning with certain value

If you remember attribute value starting with certain words, then you can use the caret (^) symbol. See how it works below,


<!-- this is HTML -->
<h1 rel="Code Crypton Programming Blog">Code Crypton</h1>


/* this is CSS */
h1[rel^="Code"] {
    color: #069;
}

6. Attribute ending with certain value

Just like previous example, if you remember attribute value ending with certain words, then you can use the dollar ($) symbol. Look below how it works,


<!-- this is HTML -->
<h1 rel="Code Crypton Programming Blog">Code Crypton</h1>


/* this is CSS */
h1[rel$="Blog"] {
    color: green;
}

7. Targeting certain values somewhere

If you only remember some phrases of value name but don't know the exact position of these phrases inside the value, then follow the code below,


<!-- this is HTML -->
<h1 rel="Code Crypton Programming Blog">Code Crypton</h1>


/* this is CSS */
h1[rel*="programming"] {
    background-color: #333;
    color: rgb(210,233,255);
    width: 215px;
    padding: 10px;
}

When you use the star/multiply (*) symbol, then you can target certain attribute values somewhere inside like the above code.

8. Using multiple attributes

So far, we have only seen styling elements with one attribute. But if needed, you can use even two or more attributes to style an element for better styling.


<!-- this is HTML -->
<h1 rel="multiple" title="attribute selector">Multiple attribute selector</h1>


/* this is CSS */
h1[rel*="multiple"][title$="attribute selector"] {
    color: #069;
    background-color: #fff;
    border: 1px solid orange;
    border-radius: 9px;
    width: 400px;
    padding: 10px;
}

From the above code, you can see how a single element's attributes are used multiple times to style an element.


Related posts: