Ask any student in the world what their favorite subject in school is and you’d hardly find Geography in the answers. The study of the geographical and physical features of the Earth as we know it can hardly hold a candle to Music, the Sciences, Astronomy or Arts and Design for a variety of reasons, which is a shame since many of the great discoveries of new lands came to be because of the existence of maps.

The World Map in itself is always morphing through the centuries as great civilizations fall and give way to smaller independent nations. Today the World Map can be regenerated to feature the languages we speak in common, the religions and idealogies we adopt, by landscape, time zones etc.

Accuracies aside, there is a great deal of creative maps (like the one shown above) out there that depict this beautiful world we live in, all across the Web. We have pulled together 40 Creative Remakes of World Maps to share with you today. Name your favorite version on this list, and off it, in the comments section.

Magic World Map. A magical remake of the continents of the world. (Image Source: CreativeDesign)

Butterflies World Map. A myriad of colours in the form of mini butterflies outline the landmasses and islands scattered across the world. (Image Source: artPause)

Artistic Map. I feel like the scene is going to break out into song any time now. (Image Source: DesignFlute)

Map of The World. Can’t help feeling that this beautiful mash of orange and blue should be on a wall somewhere. (Image Source: Evilpainter)

Map of The World 2010. Even potential mural art needs an update. (Image Source: Evilpainter)

World Map Abstract Paint. Technically it’s abstract art if you can’t get it, but who cares about technicalities when it’s beautiful. (Image Source: Michael Tompsett)

The World As We Know. A funny jab at what each part of the world has to offer – although I’m not sure that you get lions for real from Madagascar. (Image Source: Osama Hajjaj)

World Map. A cute version that would be a great addition to classrooms. (Image Source: Laila Hills)

Super Mario World Map. One for the gamers. (Image Source: Ian Gibson )

World Beer Map. Like the name says, it’s the World, according to beer. (Image Source: Pure Travel)

The World. I didn’t know igloos have antennas! (Image Source: Paul Thurlby)

Map of the Caribbean. Aww man, this is a beauty. (Image Source: SARA DRAKE)

Religions World Map. A beautiful map of religions practiced in the world. (Image Source: St.Peterburg)

One World. Before you judge, take a closer look at the individual units that make up this artwork. Yes, they are flags! (Image Source: Genista)

Moustache World Map. Like a Sir. (Image Source: thepixelprince)

World Flags Inside Candies. This will be a hit with the kids if the candies were real. Still a very nice artwork, nonetheless. (Image Source: cooldesignvn)

Fedex: MAP. For Fedex, they see business everywhere. (Image Source: FedEx Corporation)

Facebook World Map. Still don’t think that Facebook is trying to take over the world? (Image Source: Paul Butler)

Typographic World Map Night. There are two things featured here, the world at night (hence the dots of lights all over) and their country name spelt out across their territory. (Image Source: vladstudio)

Cats Map of the World. What can I say? It’s the World Map built by silhouettes of cats! (Image Source: artPause)

Inverted Map. So this is what the Earth looks like when it is only 30% water. (Image Source: DM9JaymeSyfu)

Tangram Abstract World Map. Reminds you a bit of origami, doesn’t it? Actually these are Chinese puzzles called tangrams, and they make a mean-looking world map. (Image Source: Michael Tompsett)

World Map Metro Style. I wonder how long it’ll take to get from Paris to China by the tube. (Image Source: artpause)

Hexagonal World Map. Maybe this is how bees build their worlds in their hives. (Image Source: The Man in Blue)

Dots World Map. A little rough around the edges but still a very convincing world map. (Image Source: sNowFleikuN)

World Map of Patient-to-Doctor Ratios. Note that the colours mean something as well. (Image Source: EuroRSCG Amsterdam)

Country Codes of the World. Can you find yours in the mix? (Image Source: bytelevel)

“WORLD MAP”. Looks like blueprints to me. (Image Source: Ogilvy Brasil)

“Map”. ‘It’s a small world if you’re a wild animal. 89.2% of the world belongs to humans. Nature is left with 10.8%.’ (Image Source: Grey South Africa)

World Map Tattoo. Nothing says I love the world more than a permanent mark like a tattoo. (Image Source: Lauren Calton)

World Map Body Art. Take two. (Image Source: littleholly23)

Bean Map. Even beans want to have a piece of the action. (Image Source: Alex Bramwell)

‘World’. Here’s a world map made of recycled computer components. I wonder what they will think of next! (Image Source: Susan Stockwell)

Feed The World. This one is made with rice grains. (Image Source: Name)

The World, Dubai. It’s a world of islands depicting the world. (Image Source: Nakheel)

Peel That Tangerine. When life gives you tangerine… (Image Source: stuffofawesome)

The World in A Drop of Water. I bet you don’t often see this on your window pane every other day. (Image Source: ZARKANZAR)

Kaffe. At least the spilt coffee didn’t go to waste. (Image Source: Erik Johansson)

Apple Globe. Don’t you wish you could spin this so you can see the other side of the globe? (Image Source: Kevin Van Aelst)

World Cow. When random patches are too mainstream, go global with it. (Image Source: nextnature)

Related posts:

1. 35 Extraordinary “End of The World” Inspired Artworks
2. 22 Creative 4D Artworks That Invade Reality
3. Most Beautiful Castles Around The World
4. Showcase of Creative Moleskine Art

The Cascading Style Sheet (CSS) is, I think, the simplest of languages compared to other web-related languages, so it is not surprising to find many people who are just beginning to learn how to create a website will mostly learn this language and HTMLfirst.

In this post, we will go back to CSS basics. We are going to review how the CSS styles are initially applied, which styles will apply, how some styles declaration overwrite one another while others don’t.

So, this post is specifically dedicated for beginners who are just starting to get the hang of the challenges, probably still making mistakes and errors when compiling their first stylesheet. So, let’s just get started.

Recommended Reading: CSS Back To Basics: Terminology Explained

Default Browser Styles

Firefox, Chrome, Safari, Opera and Internet Explorer are currently the top five desktop browsers in the market. These browsers and all other browsers follow a standard rule to include built-in default styles to render the HTML elements.

So, when we put in some random HTML elements without any styles added, you will see that it is still properly rendered in the browser.

But, if we inspect those element carefully, each of the browser have (slightly) different values for their “default” declaration which cause to inconsistency across the browsers, particularly in the old one like IE6, 7 and Firefox 3.0.

For example, as you can see from the above screenshot, the newest Firefox rendered the blockquote by default with margin: 16px 40px 16px 40px, while on the other side the Internet Explorer 7 will render blockquote with margin: 0px 40px.

To overcome the inconsistencies shown above, many web designers and developers prefer to overwrite all those styles with CSS Reset. This CSS file generally contains almost all HTML Type selectors, defining them with equal rules.

There are many CSS reset available, but here are my top three favorites:

• Normalize.css
• CSS Reset
• HTML5 Reset Stylesheet

Selectors

You probably often read this term across the web design/development blogs you visited; Selectors.

The Selector in CSS is the syntax used to target any parts on the HTML document for the styles to be applied to. There are three basic selectors we are going to discuss here, as they probably will be the common selectors used on your first website. We’ll cover others in future posts.

Type Selector

We have mentioned once above, Type selector will target any specified HTML elements on the document. For example:

  p {  	/** declaration **/  }  

will match all the p or the paragraph elements and using it will eventually overwrite the default styles given from the browsers.

Class Selector

When you have added a class or even many classes to an element, you can also target those classes. The Class Selector begins with a dot parameter.

  .box {  	/** declaration **/  }  

The above snippet will match all elements that have the box class, or we can also select more specifically.

  p.box {  	/** declaration **/  }  

It will target only the p element that has the box class.

When we are using the Class selector, all the same styles declaration from both the Type selector and the Default Browser will be overwritten.

ID Selector

The ID is a very restrictive attribute, we can only have one id on an element and it must be unique as well.

  <div id="content">Content</div>  

In case we have an id in an element, we can use the id selector to target that element; the id selector is defined with a hash # parameter.

  #uniqueID {  	/** declaration **/  }  

Since the ID is unique, it has the strongest priority level of the type of selector. So, when we declare styles with the ID selector it will ultimately overwrite all the same declaration from the Class, Type selectors and the Default Browser styles.

Embedding the Styles

We have come through all the essential basic selectors and now we will look into how those styles are embedded in an HTML document.

External Styles

External styles are the styles that are added in a separate file, usually in a .css file which then are linked to the HTML document using the <link> tag to apply those styles.

  <link rel="stylesheet" href="css/style.css">  

And all the styles declared in the files will behave like what we have mentioned in the Selectors section above, namely it will mainly overwrite the default browser’s style, and overwrite to another style declaration depending on the priority level of the selectors.

This practice is the most recommended way to attach the styles, particularly when you have thousands of lines of CSS codes with many pages to attach to.

By doing so, the styles will also be easily manageable, for instance, you can separate the CSS files into several files depending on its specific role, such as typography.css to control all the styles related to Typography and so on.

Internal Styles

The internal styles are the styles that are embedded directly in an HTML document, generally inside the <head> tag.

  <head>  	<style type="text/css">  		h1 {  			/** declaration **/  		}  		p {  			/** declaration **/  		}  	</style>  </head>  

But this practice is not recommended when you will have hundreds of line of styles as your HTML page will be too long and the style will only affect where the styles are embedded. When you have let say ten pages, you will need to copy those styles and embed them in all the pages and when you need to change the styles you have to change it to ten different pages, which is obviously a tedious task.

Based on its priority level, the internal style is higher, so it will overwrite the external styles.

Inline Styles

Inline styles are the styles that is directly embedded in the HTML element.

  <p style="margin: 5px;">This is a paragraph</p>  

This example above will add 5px margin to the paragraph element and it will also overwrite the margins that have been declared for that element both in internal and external styles.

But do avoid doing this, as your markup will be cluttered with all those style declarations; if you have a bunch of styles embedded, it will even become a nightmare to see and maintain all your html and styles.

Further reading: Three ways to insert CSS – W3CSchools.

The !important Rule

There are some circumstances when we have to apply a specific style for an element but the same style for that element has also been declared elsewhere in the stylesheet or in the document. For example:

We have the following anchor tag with embedded styles

  <a style="color: #border: 1px solid #156E8E; background-color: #389ABE;">This is a link</a>  

And we also have a separate style for that anchor tag in the style sheet.

  a {  	border: 1px solid #333;  	background-color: #555;  }  

In that example, we can use the !important rule to force the browser to use the styles in the style sheet instead of the one in the element.

  a {  	border: 1px solid #333 !important;  	background-color: #555 !important;  }  

The !important rule will indicate that this style is the most important and must be applied over the other style even when it is directly embedded in the element (Inline Styles).

Further reading: !important CSS Declarations: How and When to Use Them – Smashing Magazine.

Conclusion

We have come through the entire subject matter in this article. We can see now that each selector and the way we embed the styles have different priority levels in the browser’s mechanism. As I’ve mentioned earlier, these subject are intended for novice levels so they are definitely not something new for seasoned web designers.

But, I think every web designer in general will agree that going back to basics is sometimes necessary to review our fundamental knowledge of a subject. In fact, we often miss some of the basic stuff, as we tend to be more impressed with awesome (and crazy) stuff like this.

Lastly, I have provided a demo and source file for you to examine our discussion in this article further.

• Demo
• Download Source

I hope you enjoy this post and if you find some inaccuracy in it, or I have missed some important points, don’t hesitate to notify me in the comments section below.

Related posts:

1. A Look into: CSS3 Negation (:NOT) Selector
2. CSS3 Attribute Selector: Targeting the File Type
3. How to View Facebook Photos, Pinterest Style [Quicktip]
4. CSS Back to Basics: Terminology Explained

Ever gone to work or class but forgot to bring your phone along? What options would you have then? Well, you can borrow a colleague or a classmate’s phone for emergency texts or calls, but there is no way to receive the messages that are sent to our phone. If you have access to a computer then you can use your other online social networks to communicate with friends but what about those who are not comfortable using this method?

How about using your Chrome browser to manage your SMSes without even using your phone? Well, we’ve found out that you can do that with MightyText, aptly known as Texty. MightyText is an Android application that will synchronize your SMSes with a Chrome browser via an extension. This allows you to use Chrome to send and receive your SMSes during emergencies like this.

Send and receive SMS via Chrome

To prepare for this, download MightyText Android App on your phone from Google Play.

When the installation is complete, open the app and complete setup by connecting MightyText with your Google account.

Then install MightyText Chrome Extension on your browser.

Once installation is done, you will be prompted with a notification telling you that you can start sending and receiving SMS from your Chrome Browser. An icon has now been added to your browser. Click the MightyText icon.

After clicking MightyText icon, you will be prompted with your account status: you are not logged in to your Google account. Click on the link to sign in using your Google account.

It will redirect you to a new page to allow the access. Click ‘Allow’.

Once the access is granted, you will see a popup at the top right corner of your computer screen notifying you about how many messages have been received since you installed the Android app. Now every time when you received SMS, you will see this popup.

That said, you can now start sending and receiving SMS from your computer right in your Chrome browser. Anytime you need to use the application, open your Chrome browser and click on the MightyText icon to view the MightyText SMS page.

At the top bar, there’s a notice to sync your contacts. Click to sync MightyText with your Google contacts so that the mobile numbers will appear as your friend’s names instead of their numbers. To compose new messages, simply click the ‘Compose New’ button.

Conclusion

You will be able to use MightyText with your Chrome browser as long as you are connected to the Internet. Note that even if you are sending SMS from your browser, you will still be charged with the standard SMS fee. This is just one of the many ways Chrome is making your life a whole lot easier.

Related posts:

1. How to Read .ePub Ebooks on Firefox and Chrome [Quicktip]
2. 10 Reasons You Should Switch to Chrome for iPad
3. How To Sync ITunes From Mac to Android [Quicktip]
4. Schedule (Send later) Your GMail Emails with Rightinbox