How to style correctly in HTML - html

Question

I started very recently to study/practicing with HTML, typescript, CSS and angular5, and I'm developing a test app to try what I've learned so far. But I am a little bit confused on how I can solve this problem:
Basically I need to set the color of the text inside of a element (the color of the dropdown button text must be different from the one the menu text has).
<ul class="nav navbar-nav ">
<li class="dropdown" appDropdown>
drop1<span class="caret"></span>
<ul class="dropdown-menu">
<li>menu1</li>
<li>menu2</li>
</ul>
</li>
</ul>
I want "drop1" text in white, while the "menu" element text can be of the default color.
Now if I put in the CSS this:
ul li a {
color: white;
}
Each text is colored in white. Now I know I can set directly the style property in HTML tag to override the style from CSS, but since I have several dropdown I would like to set everything in the CSS. How can I do it?

Answer 1

Try to use > css selector using class like
ul.navbar-nav>li>a
It will selects all <a> elements where the parent is a .navbar-nav class
Stack Snippet
ul.navbar-nav>li>a {
color: white;
background: red;
}
<ul class="nav navbar-nav">
<li class="dropdown" appDropdown>
<a href="#" class="dropdown-toggle" role="button">
drop1
<span class="caret">
</span>
</a>
<ul class="dropdown-menu">
<li>menu1</li>
<li>menu2</li>
</ul>
</li>
</ul>
Another solution is to use :not pseudo class
Stack Snippet
ul:not(.dropdown-menu)>li>a {
color: white;
background: red;
}
<ul class="nav navbar-nav">
<li class="dropdown" appDropdown>
<a href="#" class="dropdown-toggle" role="button">
drop1
<span class="caret">
</span>
</a>
<ul class="dropdown-menu">
<li>menu1</li>
<li>menu2</li>
</ul>
</li>
</ul>
Referece Link
child-selector
:not() selector

Answer 2

You can try this simple idea:
<ul class="nav navbar-nav ">
<li class="dropdown" appDropdown>
<a href="#" class="dropdown-toggle white-text" role="button" >
drop1
<span class="caret">
</span>
</a>
<ul class="dropdown-menu">
<li>menu1</li>
<li>menu2</li>
</ul>
</li>
</ul>
With this CSS
.white-text {
color: white!important;
}
That means you can utilise this class throughout your site if you need the text to be white
edit
If you're worried about using !important inside the class you can just remove that, but just ensure that the class is the last entry in the class stack, for example:
<a href="#" class="dropdown-toggle white-text" role="button" >
rather than
<a href="#" class="white-text dropdown-toggle" role="button" >

Answer 3

Target the class of your element.
.dropdown-toggle {
color: black; // all your toggle menu (main menu) will have a black color;
}
.dropdown-menu a {
color: white; // all your dropdown menu (sub menu) will have a white color;
}
Don't use !important;

Answer 4

You myst either use a CSS file or use the style="" element inside your HTML tag.
i.e.:
First way: <button style="color: red; background-color: green;">Log in</button>
Second way:
HTML file:
<button class="mybtn">Log in</button>
CSS file:
.mybtn {
color: red;
background-color: green;
}
You work like this with all tags and all elements you that want to style.