CODEWITHSUNDEEP
htmlcss
niko
niko

Reputation: 9393

What does these below code mean?

 border-color:#4d90fe!important

What does the above line mean in html/css. I have come acrossed these styling , on google, facebook and many more websites(source code). what !important indicates ? Could anyone clear these question, 

1) when to use % or em 
2) when to use px

When I saw google page source I have found it using % sometimes and px sometimes. Mostly for padding, margin borders, width , it used px and for width and height it used % and at certain times.Im in a confusion to use px and %, Could anyone clear me when to use px and when to use % or em.

Upvotes: 1

Views: 820

Answers (3)

Musaab
Musaab

Reputation: 1604

% is when you want a scaling site. For things to be a percentage of one another, for example:

<div style="width:100%;">
    <div style="width:50%"></div>
</div>

px is for when you want to assign the exact pixel size of an attribute, such as width:

<div style="width:100px;">
    <div style="width:50px"></div>
</div>

The above two examples are not the same thing. The one with % will fill the parent (the element that it is contained in), while the other will only be as big as the px (pixel) specified size.

Added after comment: Scaling means that if as the size of the screen changes user by user, the content will adjust itself to the size of the browser window (with different monitor resolutions for example).

Attribute is probably better defined as a property. A property of a <div> for example can be width, height, color, etc...

Upvotes: 1

oezi
oezi

Reputation: 51817

using google this is very easy to answer on your own in less that 2 minutes:

  • !important (searching for css !important)
    in short: !important sets the css-rule to highest priority/precedence, overwriting all other rules specifying another value for the same attribute
  • explanation of units (searching for css units)
    in short: px means pixel, em refers to the actual font-height and % is percentage - almost self-explaining

Upvotes: 4

Jos&#233; P. Airosa
Jos&#233; P. Airosa

Reputation: 368

As for the !important statement, if you don't know, CSS is interpreted, which means (among other things) read from top to bottom, so, if you define for example:

.one { border-color: #000000; }
.two { border-color: #ffffff; }

HTML:

<div class="one two"></div>

This div will have #ffffff as border color. Now if you have:

.one { border-color: #000000 !important; }
.two { border-color: #ffffff; }

And the same div as before the border color will be #000000. Because of the !important that first definition take precedence.

You can read more about !important here (for example): http://www.yellowjug.com/web-design/the-importance-of-important-in-css/

As for the usage of em/% and px, Musaab response is pretty self explanatory.

Upvotes: 1

Related Questions