Style.css on Browser different from the one on Server ??? WHY ???

  • Resolved nasroo7

    (@nasroo7)


    9 years, 10 months ago

    Hi,
    Thank you reading me ??
    Here is my question first, if you don’t want to read everything =P

    My main Question: Why is that the Style.css that is opened from the browser (directly from the URL) has more than 6,000 lines, while the “same” Style.css that is in the FTP server has only 550 lines. (knowing that they are both organized the same way: spacings, line jumping…etc) [Can you then modify the Style.css on the FTP by putting the same code that you get by Inspecting Elements from the URL?]

    I uploaded a WordPress Theme. The theme is working, however when I opened the webpage URL with Firefox, and clicked on Inspect Element, I had all the Style.css lines (more than 6,000 lines) (so far, so good)
    At the same time I opened the Style.css that was saved on the FTP server (Of that same Theme) using Dreamweaver CC. There was approximately only 550 lines.

    How come that the same Style.css that I opened on the Browser (From the URL) (using the Inspect Element, same thing if using Firebug) and copied it in Dreamweaver, had approximately 6,000 lines!? while the other had only 550… How come the big difference?
    (Note: The code of Style.css on the FTP server is well organized, with the spaces, and line jumps, the same way as the one opened from the URL browser…)

    I tried to search about it to understand, but I can’t find any explanation (Maybe I’m not using the right keywords to search)
    I’m guessing since the Template is itself responsive, so the Browser is adapting it according to the screen resolution and all… But I really would like to find an article or something to explain that.

    And this gives me a second question: Is it then possible to customize the Style.css that is on the server, and be guided by the Inspect Elements on the browser. Because I hired a Freenlancer on (Freelancer.com) a week ago, and asked him to modify a Menu size, and all he did was: On the Website > inspect Element > Found the Width, and height > Changed to the Pixels that I wanted.
    Then he simply copied all the CODE, and Pasted it in the Style.css that was in the FTP server… (But that made the Style.css that was on the server goes from 550 lines, to more than 6,000 lines)

    So, I would like to find some more information on that if possible.
    If you only know what type of keywords I should use in google, please let me know.

    I was using keywords like: Style.css on browser different from ftp…
    But no favorable results, even with other phrases.
    I really would like to understand that, and know how to properly do the css modifications in the future.

    Thank you for reading, I hope that someone will point me to the right direction.
    Thank you!

Viewing 2 replies - 1 through 2 (of 2 total)

  • What theme are you using? Are you using a CSS minifying plugin on your WordPress install?

    Thread Starter nasroo7

    (@nasroo7)

    Hi, Thank you for replying.

    I’m not using such a plugin.

    But, I discovered that the Parent style.css was the one opened by the browser (The one that has more than 6000 lines), and in the middle of those 6000 there was basically 550 lines that were replaced by the ones that are in the Child Style.css (Which contains 550 lines that are supposed to override the ones that are in the parent style.css)

    After some different research on modifying the Style.css, I discovered that the Child Style.css (The one with 550lines) doesn’t include all the coding of the website, but only the changes [that’s why it has an “@import url(“…/Parent Style.css”);]. So basically, the 550 lines represents only the “Overriding Code lines” that are here to replace the “Original Code Lines” of the Parent Style.css file. The rest of the remaining 5450 (6000-55=5450) are just from the Parent.

    So, If you need to make changes, instead of modifying the Parent Style.css, it’s better to ADD the same Code Line that you want to modify in the parent style.css into the child style.css
    Which means that the freelancer who just Copied ALL the 6000 code lines from the Style.css that was generated by the browser, and just copied them into the child style.css did something wrong. It’s not supposed to be that way, so if there is a change that was made in the parent style.css, and that was not supposed to be changed in the child style.css won’t be displayed, and you’ll have to manually find the code into the parent style.css, and basically either modify it in the child, or delete it from the child, so the browser will display the parent line code one.

    So, my question was a basic css design understanding.
    If you ask my question the way I did, you can’t find answers, but if you put your hands into modifying the css, and understanding the concept of Chil theme, then you will automatically have the answer of my question (When I was ignorant =P )

    Well, thank you for reading me. And maybe someone will ask the same question as I did, and will find here the answer. If I didn’t make my self clear, please let me know.
    I go back to my dreamweaver now ??
    Have a nice day!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Style.css on Browser different from the one on Server ??? WHY ???’ is closed to new replies.