CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
membersound
membersound

Reputation: 86875

How to override inline css from external class?

I'm using bootstrap glyphicon class:

.glyphicon {
    top: 1px;
    //...
}

For one single item, I want to override top property, inline with CSS:

<span class="glyphicon glyphicon-home" style="glyphicon.top:2px"></span>

I know this is not a standard way, but you got the idea of what I'm trying to achieve.

Is that possible?

Upvotes: 0

Views: 225

Answers (3)

JMF
JMF

Reputation: 1113

The most optimal is to always use css. And no styles on the page itself. Good practices are welcome at the end of a project ...

<div class="icono">
<span class="glyphicon glyphicon-home"></span>
</div>

css

.icono .glyphicon-home {
 top: 1px;
}

Upvotes: 0

Mohammad Usman
Mohammad Usman

Reputation: 39372

<span class="glyphicon glyphicon-home" style="position: relative; top:2px"></span>

CSS positioning properties (top/right/bottom/left) works only when used with relative, absolute or fixed position.

Detailed Reference

Upvotes: 5

Justinas
Justinas

Reputation: 43519

For inline css you don't need selector:

<span class="glyphicon glyphicon-home" style="top:2px"></span>

Inline CSS selectors has highest priority and will overwrite external CSS.

Side note

For top: 2px to work element must be non-statically positioned - position: [relative,absolute,fixed]

Upvotes: 2

Related Questions