Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
Thread Tools Display Modes
Share |
  #1  
Old 12-09-2011, 05:46 PM
kju385's Avatar
kju385 kju385 is offline
v7n Mentor
 
Join Date: 11-29-11
Location: Croatia
Posts: 654
iTrader: 0 / 0%
Messy CSS rules order?

A newbie question, here goes:

Can an incorrect order of the css rules influence entire website performance?

I'm asking because of some alterations which I've made at my website, and among other things I added a wrapper around a preexisting wrapper to achieve more space. Now, other rules don't have that new div tag, but are working properly. Should I change them all accordingly? I mean is css rules order relevant at all?

Last edited by kju385; 12-09-2011 at 05:56 PM. Reason: forgot something...
 
Reply With Quote

Advertisement

Advertisement

  #2  
Old 12-09-2011, 06:53 PM
HTMLBasicTutor's Avatar
HTMLBasicTutor HTMLBasicTutor is offline
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 26,710
iTrader: 5 / 100%
Yes the order of your rules in your CSS file can mess things up if not in the right order.

The CSS file(s) are:
  • Read and applied in the order they are read in the head section of your pages if you have more than one CSS file linked.
  • Each CSS file is read from top to bottom and styles are applied in that order.
 
Reply With Quote
  #3  
Old 12-10-2011, 10:50 PM
ExpertsGuide ExpertsGuide is offline
Junior Member
 
Join Date: 11-25-11
Location: India
Posts: 22
iTrader: 0 / 0%
Specificity, Inherince and Cascading effects also apply to css.
Means some style property already defined at the top will add with the one define at the bottom. Some will overwrite. Some will get ignored.

Eg,
HTML Code:
<style> <style> #green {color:green;} .blue {color: blue;} div {color: red;} </style> <div>hiii</div> <div class="blue">bii</div> <div id="green" class="blue"> hello</div>
I the above style red will not be able to overwrite blue since it more specific.
And green is again much more secific as compared to blue. So it overwrites others.
 
Reply With Quote
  #4  
Old 12-11-2011, 09:45 AM
kju385's Avatar
kju385 kju385 is offline
v7n Mentor
 
Join Date: 11-29-11
Location: Croatia
Posts: 654
iTrader: 0 / 0%
Quote:
Originally Posted by HTMLBasicTutor View Post
Yes the order of your rules in your CSS file can mess things up if not in the right order.

The CSS file(s) are:
  • Read and applied in the order they are read in the head section of your pages if you have more than one CSS file linked.
  • Each CSS file is read from top to bottom and styles are applied in that order.
I knew there had to be a catch somewhere... In the last two days I combined the original two css files into one layout.css file and corrected all the "old" rules with an appropriate name. Now, pretty much everything should run more smoothly

Thanks for the input
 
Reply With Quote
  #5  
Old 12-11-2011, 10:03 AM
kju385's Avatar
kju385 kju385 is offline
v7n Mentor
 
Join Date: 11-29-11
Location: Croatia
Posts: 654
iTrader: 0 / 0%
Quote:
Originally Posted by ExpertsGuide View Post
Specificity, Inherince and Cascading effects also apply to css.
Means some style property already defined at the top will add with the one define at the bottom. Some will overwrite. Some will get ignored.

...

I the above style red will not be able to overwrite blue since it more specific.
And green is again much more secific as compared to blue. So it overwrites others.
Due to the nature of the site in question, I needed several different styles to distinguish data. As a result, most of my styles are specific with only a few general style rules. I understand the basics of the overwriting effects, you gave a very nice example

Since it was my first website, I mostly designed it through improvisation neglecting the rules order entirely. "Oh, I could add this in header. The footer looks too dark, another css to fix it. Now let's play with a center table style. Back to footer rules... etc." You get the point

Does the rule order from top to bottom also apply when the styles are meant for the same div, just for another property?

i.e.
#wrapper #leftArea a
#wrapper #leftArea a:active
#wrapper #leftArea a:visited
#wrapper #leftArea a:hover
 
Reply With Quote
  #6  
Old 12-13-2011, 05:34 AM
JohnnyS's Avatar
JohnnyS JohnnyS is offline
Contributing Member
 
Join Date: 07-05-11
Location: philippines
Posts: 312
iTrader: 0 / 0%
Quote:
Originally Posted by kju385 View Post
Does the rule order from top to bottom also apply when the styles are meant for the same div, just for another property?
yes, the style declaration at the bottom will be implemented..


Quote:
Originally Posted by kju385 View Post
i.e.
#wrapper #leftArea a
#wrapper #leftArea a:active
#wrapper #leftArea a:visited
#wrapper #leftArea a:hover
now about this one, it will not overwrite the style because the styles will be shown when the event is triggered..
 
Reply With Quote
  #7  
Old 12-13-2011, 07:22 PM
kju385's Avatar
kju385 kju385 is offline
v7n Mentor
 
Join Date: 11-29-11
Location: Croatia
Posts: 654
iTrader: 0 / 0%
Quote:
Originally Posted by JohnnyS View Post
yes, the style declaration at the bottom will be implemented..
Well, I managed to sort everything out so it should work fine now. It's really was not that complicated code but it was all mixed up. Even found a few errors that slipped me the first time. I'm satisfied with the general site performance currently

Quote:
Originally Posted by JohnnyS View Post
now about this one, it will not overwrite the style because the styles will be shown when the event is triggered..
I see. Anyway, thanks everyone for having patience with newbie questions. You've earned your rep points
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Right Order in CSS? davelev Coding Forum 8 03-04-2011 07:13 PM
How Messy Is Your Desk? Cricket Forum Lobby 32 03-02-2010 08:31 PM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 05:08 AM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2018 VIX-WomensForum LLC