Friday, July 20, 2012

text-transform in css

We knew it all along and yet, we forget their existence -- it must have been quoted by some big person or else let me own the patent for it. I always have issues with this

Now I just rediscovered it with the text-transform property in CSS. oh pls, God Bless Me

This does relatively reasonable job which is very appreciable. I find many instances in which I could have used it in the past and yet, I never did.

Following is a simple illustration of how to use this and what it does

I am applying the following style on the forth comming statements which are typically html paragragh tags

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}



This is some text.The class of this para is "uppercase"

This is some text..The class of this para is "lowercase"

This is some text..The class of this para is "capitalize"

!important in css

It reads like not important, but it means totally the other way. I got curious when I first encountered this property in CSS. It has really took a long time for me to discover this property.

After going through the details of this property, in order to make my understanding simler, it is some what like the final keyword in Java. Dont take my word for granted, its just a persection. I am just trying to put things together to explain the stuff.

Following is a simple explanation of the same

Guess that I'm using the following code to style my paragraphs in my document
p {color:#0000ff}  --> should apply blue color to my paragraphs
p {color:#000000}--> should apply black color to my paragraphs and will override my previous blue style for para tags

Eventually all my paragraphs will be black in color

To ensure that certain things dont get overrided, let me say i do the following (!important atlast),
p {color:#0000ff !important;}
p {color:#000000;}


This is my target paragraph. Note that I am blue in color

This is an unexpected property that I least expected to find in CSS :).
But be warned, this is not java, so let me say the following, as far as I have tested, the !important tag is a bit tricky and is jerking around a bit as well. Its because, say I do the following

p {color:#ff0000;}
  some paras
p {color:#0000ff !important;}
  some paras
p {color:#000000;}
  some paras

Now all the "some paras" that I am refering to will be in blue color. So no matter where you declare !important property for styles, it gets applied to entire document. Thats ridiculous and will definetely be useful some times. But I am scared of it.

Again Diamond cuts Diamond and !important overrides !important - Wow howz my moral of the story (cool down plz)

p {color:#0000ff !important;}
p {color:#00ff00 !important;}

This will ensure that all your para tags are green in color. Hope you get the picutre, if not dont expect me to explain further, try it out :).