CODEWITHSUNDEEP
htmlcssasp.net
Antoine Pelletier
Antoine Pelletier

Reputation: 3316

Have the same CSS for a kind of item without using class=

Is there a way to just program a CSS to automaticaly apply itself (for exemple) on all the <I /> that's on my web page ?

my master page :

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css" />
<link rel="stylesheet" href="http://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css" />

 <!-- this is my own CSS below -->
<link rel="stylesheet" type="text/css" href="icon.css" />

My short CSS, icon.css, in a different file :

i
{
   font-family:Verdana;
}

Exemples of use on web pages :

    <i class="ms-Icon ms-font-xxl" > 
        This is not Verdana 
    </i>

    <i class="ms-Icon ms-font-l" style="font-family:Verdana;">
        This text has been forced to verdana
    </i>

In other words, i would like the style to apply to both of my <i /> without specifying it in the style nither in the class ...

Edit :

I just realized the fact that if a item have a specified class, and that class have a CSS, it overwrite the CSS of your stylesheet... I think...

Upvotes: 1

Views: 55

Answers (3)

Nasco.Chachev
Nasco.Chachev

Reputation: 676

The inline style attribute is with the biggest priority in the CSS. Remove the inline-style and use only external CSS. You are also using 2 external stylesheets as CDN ( Content delivery network ). You have to check if the <i></i> element is styled somehow in them. Try to remove the CDN stylesheets and apply the code below in your external stylesheet.

i {
 font-family:Verdana,sans-serif;
}

Upvotes: 2

Antoine Pelletier
Antoine Pelletier

Reputation: 3316

Based on @Jacob Gray's comment, I managed to come up with this :

 i {
    font-family:Verdana,sans-serif !important
   }

Seems like the !important somehow overwrite the CSS of the class="ms-Icon ms-font-l" and that is what i was looking for.

Upvotes: 1

Marc B
Marc B

Reputation: 360762

(C)ascading (S)tyle (S)heets. You need to take care of the priority levels of css. e.g. with some basic html like this:

<style src="styles.css">              external styles: lowest priority
<style>i { color: red; }</style>      embedded styles: medium priority
<i style="color: green">foo</i>       inline styles:   highest priority

Since you have inline styles, that style overrides any similar rules applied elsewhere.

Upvotes: 2

Related Questions