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

Side-scrolling web pages issue with Jquery Mobile - Issue #5748

    While developing a Jquery mobile based application, I came across a issue that is observed only on the iOS 6 devices and Android 4.2.2 devices.     What is the issue?         Web pages are side scrolling on iOS6 and Android 4.2.2 devices.     How did I debug the issue?         This bug was in our applications bug tracker for a long time and since I am the lone front-end developer the project that I am working on, my manger was pushing me to close this bug quickly. I had used the perfect mobile meta tag and still the web pages were side-scrolling. None of my divs had width that was going beyond the device widths and still there was this issue. That day, I decided to break down my HTML to pieces, and tested each piece on the dreadful iOS 6 device. I came down to a textbox that had some placeholder text in it and there it was, the issue was glaring me in my face. ...
Post a Comment
Read more

ES6 101 - Class

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

SASS: Syntactically Awesome Stylesheets - An Introduction

    I had some free time today, and decided to explore into SASS, which I had planned on doing for a long time. SASS is really cool and it really is simple styling with a lot of attitude. SASS really makes CSS so much fun. I loved it and am putting up a few posts to talk about the various features of SASS.     SASS is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance and much more. The SASS CSS is required to be compiled before it is transformed into standard CSS using a command line tool or a web-framework plugin. Let's not worry about this for now.     SASS CSS can be written using 2 types of syntaxes. The most popularly used syntax is known as "SCSS", rightly named " Sassy CSS" and is a superset of CSS3's syntax. This means that every CSS3 stylesheet is valid SCSS as well. The second syntax is an older one known as the "indented syntax" or just SASS. This syntax is for people who do not love brackets and...
Post a Comment
Read more

Hilarious Google Maps

       I came across these simple yet wonderfully done illustrations based on the Google Maps Street style by Christoph Niemann - Illustrator for the Times Magazine. These illustrations are absolutely stunning show of creativity, design, execution and general beauty. All the illustrations show exactly how it is on the roads in New York. Sit back and enjoy the show.
1 comment
Read more

Satellite to keep eye on Chambal, Palpur Kuno sanctuaries

         In a bid to check the rising incidents of poaching and keep an eye on the flora and fauna of the two sanctuaries in Madhya Pradesh, the government has decided to use satellite to monitor the Chambal and Palpur Kuno region.          The basic field technique, which is used currently, to maintain a log of the region’s vegetation, wildlife does not give the real time data. Therefore, the government has decided to use the Geographical Information System (GIS) Global Positioning System (GPS) for the purpose.          Madhya Pradesh’s leading animal scientist Dr. RJ Rao, who has received training in such satellite monitoring of national reserves from California, said the program ‘ARC Q-9’ is proving to be of great use in protection of the wildlife. They have used the program to prepare a database of the whole Chambal and Kuno region, said Rao. Sourc...
Post a Comment
Read more