I want to customize the styling of the .col elements on a single page without affecting other pages. I've tried adding the following code snippet to my CSS file:
.col {
border: 1px solid #7851A9;
}
However, this also styles the elements on other pages, which is not what I intended. I attempted to style them inline, but it didn't work. I suspect there might be an issue with my syntax. Furthermore, inline styling is not considered best practice.
How can I create a specific CSS rule that targets only certain .col elements and not all of them? I realize this is a basic CSS question, but I've spent hours experimenting with different approaches without success so far.
<div ng-repeat="module in modules">
<div class="row">
<div class="col" style="border: 1px solid #7851A;" ><h5 style="color:#000000;text-align:center;">{{module}}</h5></div>
</div>
<div class="row">
<div class="col col-50" style="border:1px;"><h5 style="color:#000000;text-align:center;">Module Mark</h5></div>
<div class="col col-50" style="border:1px solid #7851A;"><h5 style="color:#000000;text-align:center;">{{GenerateRandomMarks[$index]}}</h5></div>
</div>
<br>
<br>
</div>