Skip to main content

CSS inheritance sequence

    Starting today, I will also write about a few things CSS apart from Google Maps Javascript API and Jquery Mobile. I will cover some really interesting things in CSS and keep updating this blog as and when I learn something new and think its worth sharing with you all.

    Today we will look at a very common mostly known thing in CSS - the inheritance sequence of CSS. Most of you reading this post must be aware that there are 3 ways in which you can include CSS into your web application.

  • External Stylesheet
  • Internal Stylesheet
  • Inline Styles

External Style Sheet
    An external style sheet is ideal when you are writing a style that would be applied across multiple pages. The external style sheet gives the developer lot of control over the look and feel of the entire website or web application. The external style sheet is included using the the "link" tag which is included in the head section.

<link rel="stylesheet" href="styles/default.css" />

Internal Style Sheet
    An internal style sheet is used usually when a single document has unique style. The internal styles are written as part of the "style" tag which is again included in the "head" section.

<style>
    p{
        font-size: 20px;
        color: #a123bb;
    }
</style>

Inline Style
    An inline style loses many of the advantages of style sheets by mixing the content with the presentation. Inline styles should generally be avoided and be used when absolutely necessary and unavoidable!

<p style="font-size: 20px; color: #a123bb;"></p>

    As we know and/or have learned from experience, that these styles cascade into one, let's say a "virtual" style sheet which gets applied on the entire web site/application. This cascade follows the following sequence to override each other and create one final style sheet. Number #4 in the following list has the highest priority in the cascade.
  1. Browser default styles
  2. External style sheet
  3. Internal style sheet
  4. Inline styles
    So an inline styles has the highest priority, meaning that it will override a style defined inside the "head" tag, or in an external style sheet or the default browser styles. However, there are a few cases where this sequence of cascade can change!

Case #1: Usage of the !important keyword
    In case there is the "!important" keyword associated with an of the styles, then that style would get applied irrespective of whether it is part of the internal or the external style sheet.

Case #2: Javascript
    When styles are applied through javascript, these styles will override all styles included as part of the internal or external style sheet or even the inline styles.

Case #3: Sequence of inclusion of stylesheets
    If the link to the external style sheet is placed after the internal style sheet in the "head" tag, the external style sheet will override the internal stye sheet!

    Hope you have enjoyed this post and learned a few new things. Do let me know in case you want me to include a topic as part of the blog and I would be happy to write about it! Till then keep reading and keep sharing.

Labels:

Comments

Post a Comment

Please leave your comments here...

Recommended for You

The bitter divorce of PSD and HTML

    Today's article is an interesting post that I read. The original post in Portuguese and authored by Fabricio Teixeira  can be found at arquiteturadeinformacao  (Now don't ask me pronounce this =)).     Some are calling it the death of PSD  but I prefer calling it a "divorce". PSD and HTML are both healthy and living strong, just that they do not live together anymore. "PSD to HTML", which for years was the most accurate and sometimes the only right path to web design process, seems like has its days counted.     Firstly you draw a page in Photoshop; impeccable layout, representing exactly how the web pages would appear when opened in a browser. After a sign-off on this picture (PSD) from the client the front end developer transforms these pictures into HTML, CSS and Javascript. The assets are cut, one by one, exported from the PSD and integrated into the HTML. Plugins and new tools are created in the process and some companies eve...
5 comments
Read more

Where does Google get it's live traffic data from?

Referring to a post that I wrote earlier, Google’s - Live traffic Layer , ever wondered how Google collected this data? I was wondering the other day, how Google received live data to display it on their maps as a layer! I looked up the web and found something very interesting and am sharing the same with you all. As we all know, the traffic layer is available most accurately in several states in USA. Most major metro areas in the US have sensors embedded in their highways. These sensors track real time traffic data. Easy to miss at high speeds (hopefully anyway, traffic permitting), more commonly noticed may be the similar sensors that often exist at many busy intersections that help the traffic lights most efficiently let the most amount of people through. The information from these tracking sensors is reported back to the Department of Transportation (DOT). The DOT uses this data to update some of the digital signs that report traffic conditions in many metro areas. They als...
17 comments
Read more

ES6 101 - Map

Spatial Unlimited changes to The UI Dev After being hosted on blogger 😣 for the last 6 years 📆, this page has finally been moved to Github.io This means a few things for you, dear reader! You will be redirected to the new page shortly! ⏩ ⏩ ⏩ Once crapy HTML is now better looking Markdown ! 😍 😍 The entire blog is a Github repo ! 😍 😍 Spatial Unlimited is now The UI Dev 😍 😍
Post a Comment
Read more

Jquery Mobile - Filtering the Listview

    So you have a very long list of items and you want to provide the users with a searching facility. There is nothing to worry here. Jquery Mobile provides a very simple solution to a very difficult and time-comsuming looking problem.   jQuery Mobile provides a very easy way to filter a list with a simple client-side search feature. To make a list filterable, simply add the  data-filter="true"  attribute to the list. The framework will then append a search box above the list and add the behavior to filter out list items that don't contain the current search string as the user types. The input's placeholder text defaults to "Filter items...".     Now again, this is not going to satisfy the client. The client will not like the default search and will ask for  customization . No problem again. We can do it very easily again by virtue of the Jquery Mobile framework.   To configure the placeholder text in the search input,  use the data ...
Post a Comment
Read more

My first blog!

          " W hy is it that there are no Goolge Maps API examples which show India specific data?"...This question kept bothering me all through my learning phase. I always thought why aren't there any examples that use a map which shows Indian locations. Anybody who is new to Google Maps API application development would love to see a location that he knows of on the map! This is what I longed for all the way through and now have decided to put up simple examples and other supporting data for building customised simple Google Maps and all will show locations in India! When starting something new, if one finds something familiar out there, then it gives a feeling of comfort! And this is what I will try to provide to all those out there who are facing a similar problem that I faced! I am not an expert at Google Maps API, I am learning too...But, I will like to help out people along the way! So, all comments from the novice to the profession...
8 comments
Read more