Wednesday, December 28, 2011

CSS Order and Background Property

Do not leave spaces between the property value and the units! "margin-left:20 px" (instead of "margin-left:20px") will work in IE, but not in Firefox or Opera.

All the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:
  1. Browser default
  2. External style sheet
  3. Internal style sheet (in the head section)
  4. Inline style (inside an HTML element)
So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value).

If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet!

CSS BackGround
CSS properties used for background effects:
  • background-color- 
               The background color property is used to set background color.
                       h1{background-color:red} will make the background of H1 red.

  • background-image
                  The background-image property specifies an image to use as the background of an element.
                    By default, the image is repeated so it covers the entire element.

  • background-repeat
              Usually the image repeats itself to fill both horizontally and vertically.However in some                          cases we only want repetition in  horizontal or vertical directions.
                       background-repeat:repeat-x; // will repeat only in X direction.

                    background-repeat:no-repeat; // this will allow the image to be repaeated only once.
  • background-attachment
  • background-position
            The position of the image is specified by the background-position property:
                        background-position: right top;

               Background ShortHand Property
   There are lot of properties for background we can write all of them as one provided we follow the order.The order is as above.
        div { background: #fffff url('img.jpg") no-repeat right top}

No comments:

Post a Comment