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

Playing with the markers and info window bubbles...

    In the last few posts, we have seen some marker examples and some information window examples. Now, lets do something interesting combining these two things. Just writing that "This is an info window" in the information bubble is not very interesting! And I know this...Have gone through the same phase!     So, today we will do something interesting! We will display the latitude- longitude co-ordinates of the point that the user clicks on the map! Doing this is not at all complex! Copy paste the following code and you will see for yourself a map coming to life!     The output of the above code looks as seen in the result section above! If you have any queries regarding the above code please comment on the blog post or feel free to contact me at my mail ID .
3 comments
Read more

Form info window

         Today we will look at a Google Maps API v3 example to add a form in the information bubble! This is usually required when we wish to accept some data/information from the user! This data can be saved to a server in the form of an XML file or a database! The information can then be retrieved back at a later stage, when necessary!          In this example we will only look at form in the information bubble! The connectivity part with the server will be discussed in another post! So, today's code snippet is as seen below! <html> <head> <title> Google Maps API v3 - Adding marker and info window on Click and creating a form in the infowindow with the lat-lng information in it. </title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var map;    //When using ev...
5 comments
Read more

SASS - Nesting the CSS

    To begin with SASS we need Ruby to be installed on our machine. To set up Ruby and SASS on your machine refer to the following steps.     If you’re using OS X, you’ll already have Ruby installed. Windows users can install Ruby via Windows installer , and Linux users can install it via their package manager. Once you have Ruby installed, you can install Sass by running: gem install sass     To translate your Sass file into a CSS file, run sass --watch style.scss:style.css     Now whenever you change style.scss, Sass will automatically update style.css with the changes. Later on when you have several Sass files, you can also watch an entire directory: sass --watch stylesheets/sass:stylesheets/compiled     We don't need to do so many things to get up and running. We just need our good old friend jsFiddle. We will take a look at the various features of SASS today onward. Let's discuss the most basic and an important featu...
Post a Comment
Read more

Jquery Mobile Form - Checkboxes

    Checkboxes - popularly used in forms for multi-option selection, pose a problem in the mobile web world! The checkboxes being so small as they are, reduce the touch area and it becomes really difficult for selection. Jquery Mobile styles these checkboxes in such a way that they become touch friendly and gel with their overall framework design. Jquery Mobile styles the label for the  checkboxes  so that they are larger and clickable. A custom set of icons representing the  checkboxes  is added to provide additional visual feedback.     The  checkboxes  can be used singularly or in a vertical group or can be even grouped horizontally. These  checkboxes  can be used along with data-mini="true" too, which renders the  checkboxes  in a smaller size. We will take a look at all this in the example that follows.     In the first implementation you will see, 3 singular  checkboxes  which a...
Post a Comment
Read more

jQuery Mobile's Next Big Step

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