CSS Relative And Fixed Units

CSS Relative And Fixed Units - EM, REM, %, PX

Units in CSS: first thing to remember is that a whitespace doesn't exist between digit/s and unit, for example, 10 px is incorrect, 5 em is incorrect; but 10x is correct and 5em is correct.

Relative units: em (relative to parent), rem (relative to root html), % (relative to browser font-size).
Fixed units: px
Other units of the world: In Eric A. Meyer's The Definite Guide, they are mentioned as, in, cm, mm, pt, and pc.

My favourites are em, rem, % and px; so let's talk about them. People choose different units for different reasons. I think these four units are good to start with.

Proving: em is relative to a parent (not to the root html, only; though root can be a parent). Check below example in your browser.


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html {font-size: 6px;}
body {font-size: 2em;} /*2em=2*6px=12px*/
div {font-size: 2em;} /*2em=2*12px=24px*/
</style>
</head>
<body> <!--child of html=2*6px=12px-->
<div>
line 1 <!--child of body=2*12px=24px-->
<div> <!--child of div=2*24px=48px-->
line 2
<div><!--child of div=2*48px=96px-->
line 3
</div>
</div>
</div>
</body>
</html>

Proving: rem is relative to the root html (not to the parent). Check the below, yes in your browser.


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html {font-size: 6px;}
body {font-size: 2rem;} /*2rem=2*6px=12px*/
div {font-size: 12rem;} /*12rem=12*6px=72px*/
</style>
</head>
<body> <!--child of html=2*6px=12px-->
line 0
<div> <!--12rem=12*6px=72px-->
line 1
<div> <!--12rem=12*6px=72px-->
line 2
<div> <!--12rem=12*6px=72px-->
line 3
</div>
</div>
</div>
</body>
</html>

Percentage

% is relative to browser's font-size, if browser's font-size is 16px, then 100% is equal to 16px. Different browsers have different font-size, and along with them your 100% will vary.

Pixel

px is fixed unit, like % it's not set by browser's font-size, it's what you set.

Below example is for % and px, there is nothing like parent-child with them.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style> .fifty {font-size: 100%;} .hundred {font-size: 200%;} /* px */ .sixteen {font-size: 16px;} .thirty-two {font-size: 32px;} </style> </head> <body>  <div class="fifty"> fifty <div class="hundred"> hundred </div> </div> <span class="hundred"> hundred again </span>  <div class="sixteen"> sixteen <div class="thirty-two"> thirty-two </div> </div>
<span class="thirty-two"> thirty-two again </span></body> </html>

Final words

Generally I've seen people using mix of em, rem, % and px -- where one of them doesn't work well, other works.

Comments

Golden Rule Of Three Years To Get Success

Give yourself completely to whatever you like for three years -- let it be your career, business, health or any other thing of life. Why three years, exactly? Because what is the advantage of sticking to something which isn't giving any result. Time is precious, don't waste if the results aren't coming. Why not less than three years? If we spread these three years for success, we can assume first year is dominated by getting knowledge of the field, second year dominated by execution, and the third year comes the maturity where knowledge and experience of execution strike for success. As an exeption we can stretch these three years into five or six years -- only when there are uncontrollable issues like of health or circumstantial issues.

Name List Of 64 Yogini / चौँसठ योगिनी

It is a list of 64 Yogini, if you want these names in Stotra form you can get from another post of this blog. These names are very useful for doing, Jaap, Puja, Tarpan, and Havan. These names are also used in making 64 Yogini Yantra in which there are 64 squares and in each square, name of each Yogini is written, then everyday worship of this Yantra starts. For Pujan (Poojan): ओं ---------- देव्यै पूजियामि नम: ! (e.g., ओं गजानना देव्यै पूजियामि नम: ! ) For Tarpan: ओं ---------- देव्यै तर्पयामि नम: ! (e.g., ओं गजानना देव्यै तर्पयामि नम: !) Together Pujan+Tarpan: ओं ---------- देव्यै पूजियामि / तर्पयामि नम:: ! (e.g., ओं गजानना देव्यै पूजियामि / तर्पयामि नम:: ! ) For Jaap : ओं ---------- देव्यै नम:! (e.g., ओं गजानना देव्यै नम:!) For Havan: ओं ---------- देव्यै स्वाहा ! (e.g., ओं गजानना देव्यै स्वाहा !) Note: in the empty space ( ---------- ) you can fill the name of each yogini for each time. List of 64 Yogini / चौँसठ योगिनी For better readability I put this list in four parag

108 Names Of Shri Surya From Mahabharata

Surya (Sun) is the most important planet as well as a deity. Worshiping Surya increases prana-shakti (life-force), it rays destroy many diseases and it is the biggest source of never ending energy. There is a Strota, called Surya-Kavach, it is chanted for protection, as a deity his protection is very strong — remember the case of Karna in Mahabharata, he was invincible due to Surya-Kavach. This Surya-Kavach wasn’t as it is shown in movies, it was a Mantrik protection which Karna had and on Indra request he promised not to use it in the war. We take note of popular deities, but Surya as a deity is not lesser than others — though there are less Sanskrit literature on Surya (as I know), but whatever it is, like Surya Kavach and Aditya Hriday Strota, I think, is very potent. English Name | हिंदी नाम 1) Om Suryaay Namah | ॐ सूर्याय नम: 2) Om AryMane Namah | ॐ अर्यमणे नम:

Shri Janaki Navami Vrat & Sita Anupras

Sita is also known as Janaki, her festival that is Janaki Navami comes on Falgun Sudi Navami. This day is her birthday and she is worshiped, इस दिन सीताजी को समस्त पूजा सामग्री से पूजा कर सुहाग की वस्तुओ से उनका श्रृंगार करना चाहिए जैसे की बिंदी, मेहँदी, चूड़ी, काजल, लिपस्टिक, महावर, इत्यादि। ऐसा कहा जाता है की सुहाग की वस्तुओ से पूजा करने पर पूजा करने वाली महिलाओ का भी सुहाग बना रहता है। I think she should be worshiped with Ram, Lakshman & Hanuman ji, ‘coz she likes them a lot. Double Benefit

Essential Nyas For A Sadhak To Do Everyday

Nyas means to establish something (Devi / Devta energy) in our body: it purifies our body and makes our body and mind worthy of chanting a mantra / stotra. A Sadhak should do भूत-शुद्धि, बहिर्मातृका न्यास, अन्तर्मातृका न्यास, and षोढा-न्यास daily, 'coz we worship Devta by becoming a Devta, and in that Nyas helps us a lot. In every mantra generally many kinds of Nyas are given prior to chanting a mantra, they are usually shorter and doesn't take much time. They are essential and shouldn't be skipped. These भूत-शुद्धि, बहिर्मातृका न्यास, अन्तर्मातृका न्यास, and षोढा-न्यास take comparatively longer time duration. भूत-शुद्धि means purification of five elements in our body, that is Earth (Prithvi), Water (Jal), Fire (Agni), Air (Vayu), and Ether (Aakash). बहिर्मातृका Nyas and अन्तर्मातृका Nyas, establish "energy of our VarnMala" in our body-parts and in our chakras respectively. षोढा-न्यास is of two types Lagu Shoda Nyas and Maha Shoda Nyas.

Devi Lalita Vrat & Puja Vidhi

This festival is celebrated on Bhadon Vadi Chhath. It is for Devi Lalita, this day she is worshiped. Women worship Devi Lalita by Vrat and Puja, ‘coz they want to see the Goddess as their friend. And as a friend Devi is supposed to solve their problems of life and fulfil other genuine wishes. गंगा द्वारे कुशावंते विल्वके नील पर्वते ॥ स्नात्वा कनखले देवि हरं लब्धवतीं पतितं ॥ ललिते सुभगे देवी सुख सौभाग्य दायिनी ॥ अनंतं देहि सौभाग्यम मह्यं तुम्भ नमोनमः:॥ In her worship, above stotra is chanted which means — हे देवी ! आपने गंगाद्वार, विल्वक, नीलपर्वत एवं कनखल इत्यादि पवित्र तीर्थो में स्नान कर भगवान शंकर को पति के रूप में वरण किया है, हे सौभाग्यदायिनी देवी ललिता आपको नमस्कार करता हूँ (करती हूँ ) ।

Mantra To Remove Poverty & Attract Lakshmi On Diwali

Here are few things that previous generations used to do on Diwali. Mantra to remove poverty: This mantra is often chanted to beat away the poverty from the home. This is ritualistic where people imagine “poverty” and other kinds of negativity are going away and home is getting purer and cleaner to attract goddess Lakshmi. काने भेड़े दुखदायी दरिद्र तू मेरे घर से जा अब भाग ॥ देवी भगवती लक्ष्मी आई, तज घर मेरा और जा भाग ॥ डंडा बजाऊ मार लगाऊ नहीं तो जा अब भाग ॥ लक्ष्मी जी का वास हो गया मेरे यहाँ, तेरा नहीं निस्तार ॥ Mantra to attract Lakshmi:

18 Types Of Puja (Worship) Acc. To Fetkarini Tantra

Puja enhances our devotion to our Deity, and it is not an expensive affair we can learn to do it ourselves. Puja makes our heart-center (Air element) stronger, as our devotion increases it is bound to be happen. It is written in Fetkarini Tantra, about 18 kinds of worship (Puja). I think during Navratri, Holi, Deepawali (Lakshmi), Ganesh Chaturthi, MahaShivRatri and during all major festivals, Panchopachar Puja isn't sufficient one should go for either Shodosopchar Puja (16 types) or below 18 types of Puja. Try to do this in Navratri or at the time of Ganesh Chaturthi, because during these two festivals most of the Hindu do Murti Visarjan (point 18). आसनावाहनं चार्घ्य, पाद्यमाचमनं तथा। स्रानं वासोपवीतिं च, भूषणानि च सर्वशः ।। गन्धं पुष्पं तथा दीपं, धूपोऽत्रं चापि तर्पणम्। माल्यानुलेपनं चैव, नमस्कारो विसर्जनम् ।। अष्टादशोपचारैस्तु, मातृ पूजां समाचरेत् ।। Means:1 आसन, 2 आवाहन, 3 अर्घ्य, 4 पाद्य, 5 आचमन, 6 स्नान, 7 वस्त्र, 8 उपवीत (जनेऊ), 9 आभूषण, 10 गन्ध, 11 पुष्प, 12 धूप, 13 दीप, 1

My Rough Drafts

Search This Blog