For security reasons you don't want to put styling directly in the CSHTML page. Malicious code can use that to hack your site and most CSPs (Content Security Policies) prohibit inline styling. Putting your styling in a CSS file is the correct approach.
I'm not sure I fully understand the issue you're having but I wonder if it is just a browser refresh/CSS priority issue. Put your custom styling into your site's CSS file that is already linked.
.welcome {
font-size: 16px;
}
Then apply the CSS class to your welcome body.
<div class="welcome">
Welcome!!
</div>
Load the site and force a refresh of the page (Ctrl+F5) to ensure the CSS styling is loaded. Then use the browser's developer tools (F12) to verify that the styling rules are being applied. Select the welcome body and view the Styles
tab.
It is also within this tool where you can see if your custom CSS is being overwritten by other CSS that has higher priority. You can toggle and/or adjust the CSS rules in this window until it shows how you want. Then go back and adjust the CSS you've defined in your stylesheet.
As for the head
element, this is metadata for the site and isn't rendered (only the body
is). Within the head
is where you put things like links to external files and metadata. The only "displayable" part is the title
element. This element determines the title shown on the browser's title bar. You won't put any rendering elements inside head
.