2

I have a html webpage containing with lot of css. Let's say if I have one style per div, do I need to add it to my external css file or just write internal css inside of that html page?

Take a look at this example.

<div class="sub">
<a href="#"> Link <i class="fa fa-user-circle-o" aria-hidden="true"></i></a>
</div>

I need to add two different colors to "link" and icons. I can simply do this way. 

<div class="sub">
<a href="#"> <span style="color:red"> Link </span>
<i class="fa fa-user-circle-o" aria-hidden="true" style="color:black"></i></a></div>

Or can add classes and write it to external css also.

<div class="sub">
<a href="#"> <span class="color-1"> Link </span>
<i class="fa fa-user-circle-o" aria-hidden="true" class="color-2"></i></a>
</div>

I know those two methods are working but need to know the best practice for this type of situation. Internal or external?

  • 2
    Possible duplicate of [What's so bad about in-line CSS?](https://stackoverflow.com/questions/2612483/whats-so-bad-about-in-line-css) – Esko Jul 12 '17 at 06:13
  • Basically I asked, If I have only one style, do I need to create a class or do it with inline css. –  Jul 12 '17 at 06:16
  • use of `ID` for one style and external or internal style. – Ehsan Jul 12 '17 at 06:17
  • No, you don't need to. But for maintainability I would argue it's better to keep html and css separate as much as possible. Also if you need the same styling somewhere else, you won't need to repeat the code. And you can change all the instances of the color by changing one line of code. Etc etc etc... – Esko Jul 12 '17 at 06:18
  • Good point. I'll go with external css. –  Jul 12 '17 at 06:20
  • here no need to add a span, add a class to the link to reset its color and add a rule to the the `.fa` child to reset color if not yet reset in your main stylesheet example https://codepen.io/gc-nomade/pen/vZvWZP ` Link ` and css selector would be `.color-1 { color: /* rule to set */ } .color-1 .fa { color: /* rule to reset */ }` – G-Cyrillus Jul 12 '17 at 07:04
  • @GCyrillus: Your solution seems good. Thanks for pointing that out. –  Jul 12 '17 at 07:56

2 Answers2

0

Actually it's a good practice to have your CSS in external, but it depends upon the situation. For this, it is best to use inline CSS.

John Doewe
  • 1
  • 4
0

In a short answer:

As far as possible don't use inline style, because inline style has Highest priority after !important keyword.when we have too many lines and use of inline style, it is very hard if we want to find and overlay it.

always-a-learner
  • 3,671
  • 10
  • 41
  • 81
Ehsan
  • 12,655
  • 3
  • 25
  • 44