Jump to content

Conflicting Stylesheets


Vugh

Recommended Posts

Hey guys, this is probably a simple question but I'm new to coding so your comments/solutions will be greatly appreciated. I inserted the links below on the same page (within <head> section) and can't get both to work. For example, cloudflare icons are not rendering unless the googlefonts link is deleted (and vice versa) but I want to keep both.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Archivo+Black|Questrial">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Looks to me like both links are conflicting probably because  rel="stylesheet" is same for both. Is there a way to combine both links on the same page to avoid the conflict?

Any suggestions or solutions?

Thanks!

VJ

 

Link to comment
Share on other sites

The rel attribute won't cause the problem, its because both target the same elements, and which ever is last will precendence over the previous. The best option is to use a different identifier class for each element targeted, so no conflict will occur.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...