CODEWITHSUNDEEP
csslesssemantic-ui
funerr
funerr

Reputation: 8156

How to add a custom class to Semantic UI?

Where and how do I add a custom class like: 

 .my-custom-class {
  color: red;
 }

The reason is so it won't change all of the Semantic UI elements too.
In which file do I add it for it to be included in the dist file?

Upvotes: 0

Views: 1314

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42304

If you don't want to change the Semantic-UI elements, why don't you just have a completely separate CSS file for custom styling?

It's completely fine (and quite common) to have multiple CSS files, such as with the following structure:

<link rel="stylesheet" type="text/css" class="ui" href="/dist/semantic.min.css">
<link rel="stylesheet" type="text/css" href="custom.css">

Then in custom.css, simply include your additional custom styling:

.my-custom-class {
  color: red;
}

The order in which the external stylesheets are loaded directly corresponds to the specificity; loading your custom stylesheet after Semantic-UI will give it more specificity in the case of a tie.

Hope this helps! :)

Upvotes: 3

Related Questions