class inside link not working - html

Question

I have the following code
<div class="subNav">
Work Experience
</div>
I have an external style sheet applying the effects to both .subNav and .current. I am using the style .current to overwrite the style applied on .subNav (using it to show what page the user is on, the 4em size is used to test the code).
CSS:
.subNav a, .subNav a:after{
font: normal normal 600 0.75em 'Lato', sans-serif;
margin: 0px 5px;
display: inline-block;
color: #FFFFFF;
}
.current {
font: normal normal 900 4em 'Lato', sans-serif;
margin: 10px 0px;
}
Basically, its ignoring .current completely. I have tried putting direct code to change various style properties (such as colour, etc) in the link code directly and it works, but doesn't change with the style.

Answer 1

The HTML style attribute is for writing inline CSS that will be applied directly to an HTML element, and only that element.
Proper Usage of The Style Attribute
<div class="subNav">
Work Experience
</div>
There's no way to attach an existing CSS rule set specifically to a single HTML element, as CSS is meant to come second and be applied on top of pre-existing HTML.
One way many developers work around this, in your scenario where you may not be sure exactly where you want your styles applied because the target can change, is to use a class name. This will apply your styles to any element with the class, as well as any elements in the future you put the class on, at any time the class is present.
Your CSS is already correct if you want to take this approach. Next all you have to do is add the class attribute to any HTML element you'd like to see those styles applied to. So in your case where you're trying to style the current link, instead of making sure the current link ends up with style="current", instead make sure the current link ends up with class="current" on it.
If you're worried about the styles in .current being applied to other elements that have that class name on them, you could change your CSS to only target elements with the class name of "current" that are inside of your subNav like in the code shown below.
.subNav .current {
font: normal normal 900 4em 'Lato', sans-serif;
margin: 10px 0px;
}
I feel obligated to point out though however that if you're having this issue it's merely a symptom of a different problem, as you should be responsibly naming things not to conflict with one another.
On a side note, a couple other items I noticed with your code-
If your <div> with a class of .subNav is the only "subNav" on the page, you should be an id not class
May be worth while exploring how the <nav> tag works, and when/where it should be used instead of that <div> all together
You shouldn't leave that empty title attribute on your <a> tag. Having an empty title attribute is worse than not having one at all. I certainly recommend you remedy the issue by filling it in with some useful information rather than just remove it though.

Answer 2

you write style instead of class
<div class="subNav">
Work Experience
</div>

Answer 3

You can't apply CSS class inside style property. Inline styles only you can write using style property. If you want to apply from external either you can use class or ID(if you want unique).
Work Experience
or
Work Experience
If you use ID, you need to write your CSS like below.
#current {
font: normal normal 900 4em 'Lato', sans-serif;
margin: 10px 0px;
}