JMM JMM - 9 days ago 6
HTML Question

What is the reason for the huge clutter of information in <style> inside the <head>?

I'm an HTML beginner. I am seeing that many websites, even extremely simple ones, have a huge amount of style information inside the head, such as the code below (I've only copied about 10% of the actual style info. from one website).

Questions:


  1. What is the reason for this clutter of information?

  2. The "style" often seems to end with
    { display: none!important; }

    </style>
    . Why is this "none!important" important?

    <style type="text/css">
    object[width="640"][height="160"],
    object[width="640"][height="100"],
    embed[width="640"][height="160"],
    object[width="100"][height="100"],
    iframe[width="100%"][height="60"],
    object[width="300"][height="60"],
    object[width="200"][height="200"],
    object[width="1000"][height="250"],
    object[width="1000"][height="270"],
    img[width="240"][height="400"],

    #RightAdBlock,
    .ad_head_rectangle,
    object[width="300"][height="300"],
    iframe[width="100%"][height="250"],
    #ad_global_below_navbar,
    #ad-background,
    #AD_banner,
    #AdColumn,
    #AdContainer,
    #AdHeader,
    #AdImage,
    #Adcode,
    #AdvertiseFrame,
    #Advertisements,
    #BottomAdContainer,
    . . . . . . iframe[src^="http://ad.yieldmanager.com/"],
    #rhs_block > #mbEnd,
    #tads.c {
    display: none!important;
    }
    </style>


Answer

As declared by the type attribute in type="text/css" anything inside the style tag is CSS or Cascading Style Sheets. CSS allows you to style your webpage with colors, spacing, fonts, etc...

This is one of the three basic "languages" you will need to develop a modern website:

  1. Html: Content
  2. CSS: Style
  3. JavaScript: Logic

The reason that style tag looks like a mess is because normally you would find those styles in an entirely separate file. So basically you are seeing an entire file shoved into one line. This is sometimes done for performance reasons.

To answer your question about { display: none !important }, display: none hides an element and !important is just a drastic measure to ensure that nothing can style it otherwise.

Comments