CODEWITHSUNDEEP
csssemantic-ui-css
Malhar Mehta
Malhar Mehta

Reputation: 99

Customize styles in semantic ui framework

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <title>Semantic UI</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
    <style>
        body
        {
            text-align: center;
        }

        .ui grid container,four wide column
        {
            border: 1px black;
        }
    </style>
</head>
<body>
     <div class="ui grid container">
  <div class="four wide column">1</div>
  <div class="four wide column">2</div>
  <div class="four wide column">3</div>
  <div class="four wide column">4</div>
  <div class="four wide column">5</div>
  <div class="four wide column">6</div>
  <div class="four wide column">7</div>
  <div class="four wide column">8</div>
</div>
</body>
</html>[Screen Of My Output][1]
      [1]: https://i.sstatic.net/cJmTc.jpg

I want to add my own styling to the framework.

I tried some options like !important in css and directly applying css on class and tags too, but it isn't working.

Upvotes: 0

Views: 556

Answers (1)

MTCoster
MTCoster

Reputation: 6145

Your CSS selectors don't do what you think they do! For example, four wide column selects all <column> tags that exist somewhere inside a <wide> tag which exists inside a <four> tag.

In order to select a class, you must prefix the class name with a period (.), like this: .four. To select elements with multiple classes, remove the space between class names: .four.wide.column.

Here is an example demonstrating basic usage of class selectors:

.container {
  font-size: 25px;
}

.column {
  color: green;
}

.column.four {
  background-color: red;
}

.four {
  color: yellow !important;
}
<div class="container">
  <span class="four wide column">A</span>
  <span class="four wide column">B</span>
  <span class="two wide column">C</span>
  <span class="two wide column">D</span>
</div>

Check out this cheat sheet for more details.

Upvotes: 1

Related Questions