Under the premise, you don't care about invalid HTML in relation of <style> inside <body> (which is not that uncommon), you can assign unique identifier i.e.:
<style>
.my-class-1 {
color: gold;
}
</style>
<div class="my-class-1">Fragment Content</div>
<style>
.my-class-2 {
color: tomato;
}
</style>
<div class="my-class-2">Fragment Content</div>
<div class="my-fragment-1">
<style>
.my-fragment-1 .my-class {
color: teal;
}
</style>
<div class="my-class">Fragment Content</div>
</div>
<div class="my-fragment-2">
<style>
.my-fragment-2 .my-class {
color: hotpink;
}
</style>
<div class="my-class">Fragment Content</div>
</div>
<style id="my-style-1">
#my-style-1 + div {
color: orangered;
}
</style>
<div>Fragment Content</div>
<style id="my-style-2">
#my-style-2 + div {
color: indigo;
}
</style>
<div>Fragment Content</div>SheCodes
shecodes.io › athena › 11404-external-and-internal-css-in-html
[HTML] - External and Internal CSS in HTML - SheCodes | SheCodes
Learn what is external and internal css in html, their advantages and how to use them on your projects.
W3Schools
w3schools.com › css › css_howto.asp
How to add CSS
CSS Reference CSS Selectors CSS Combinators CSS Pseudo-classes CSS Pseudo-elements CSS At-rules CSS Functions CSS Reference Aural CSS Web Safe Fonts CSS Animatable CSS Units CSS PX-EM Converter CSS Colors CSS Color Values CSS Default Values CSS Browser Support ... When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet.
html - How can I insert CSS styles inside independent of specific elements? - Stack Overflow
Inline CSS has the drawback that I can't use CSS classes, which is something I need to do. Is there a way to define internal CSS (e.g. a fragment in the element? This would be much easier for me because I could create a self-contained HTML snippet with a method in my ... More on stackoverflow.com
internal vs external style sheet
There isn’t much difference, the few that I know of (there should be more): Internally, the CSS is immediately processed, while the external style sheet can be preload and deferred. You end up with either a single large HTML file or a HTML file and a CSS file. If you have storage concerns, an external CSS file for all of your HTML files is more efficient. External stylesheets are easier for caching and JavaScript loading. Overall, external stylesheets are better, but if your webpage is a simple single HTML file and you don’t need to cache separately / load different CSS with JavaScript, internal CSS can be slightly faster in loading. More on reddit.com
8
1
April 16, 2021External or Internal CSS?
The main thing that external brings is synchronizing the styles to multiple pages with one css page. Where as internal u have to either copy and page then add page specific selectors in. External allows one css to control any number of HTML pages to link to it and use it's properties More on reddit.com
10
9
September 24, 2018How to fix broken internal javascript and css files
Broken JS / CSS are pretty serious things to fix without prior coding knowledge. Either you pick up some JS / CSS in order to fix it yourself, or you get a technical SEO agency in just to audit and fix up the broken scripts. As far as I'm concerned there's no quick fix for coding errors without professional expertise. More on reddit.com
6
1
March 23, 2019Videos
03:18
How to Use Internal CSS [CSS Tutorials for Beginners] - YouTube
04:46
HTML & CSS for Absolute Beginners: Inline CSS and Internal ...
Internal CSS (Explained in 4 Minutes) | CSS Course for ...
18:11
CSS Tutorials 4 | Internal CSS In HTML Tutorials - YouTube
10:35
CSS Tutorials 2 | Types of CSS With Examples | Inline CSS | Internal ...
10:29
CSS Tutorials 3 | Inline CSS in HTML| Inline CSS Font Family and ...
HubSpot
blog.hubspot.com › home › website › how to add css to html: understanding inline, internal & external css
How to Add CSS to HTML: Understanding Inline, Internal & External CSS
March 13, 2023 - Inline CSS affects only the element of the tag (and possible child elements depending on the property that’s applied). Internal CSS is written inside a <style> element, which goes inside the <head> of the HTML document.
W3Schools
w3schools.com › html › tryit.asp
HTML with internal CSS
The W3Schools online code editor allows you to edit code and view the result in your browser
Hostinger
hostinger.com › home › tutorials › types of css: inline, external and internal definitions and differences explained
Types of CSS: Inline, Internal and External CSS Explained
April 23, 2025 - External CSS styles are stored ... an entire website. Internal or embedded CSS requires you to add a <style> tag in the <head> section of your HTML document....
Elementor
elementor.com › blog › resources › how to add css to html? inline, internal & external css
How To Add CSS To HTML? Inline, Internal & External CSS
December 27, 2025 - If used excessively, it can lead to repetitive code and make updates tedious. The <style> element: Internal CSS uses the <style> tag placed within the <head> section of your HTML document.
Medium
medium.com › @ramdhas › exploring-css-styling-methods-inline-internal-and-external-css-2171554ba23d
Exploring CSS Styling Methods: Inline, Internal, and External CSS | by Ramdhas | Medium
January 22, 2024 - Inline CSS is useful when you want to apply unique styles to individual elements. Internal CSS: Internal CSS is placed within the <style> tags in the head section of an HTML document.
GeeksforGeeks
geeksforgeeks.org › css › internal-css
Internal CSS - GeeksforGeeks
June 24, 2024 - Internal CSS is a method for defining CSS styles directly within an HTML document. It's particularly useful for applying unique styles to a single web page, and it's embedded within the <style> element located in the <head> section of the HTML file.
Top answer 1 of 5
8
Under the premise, you don't care about invalid HTML in relation of <style> inside <body> (which is not that uncommon), you can assign unique identifier i.e.:
<style>
.my-class-1 {
color: gold;
}
</style>
<div class="my-class-1">Fragment Content</div>
<style>
.my-class-2 {
color: tomato;
}
</style>
<div class="my-class-2">Fragment Content</div>
<div class="my-fragment-1">
<style>
.my-fragment-1 .my-class {
color: teal;
}
</style>
<div class="my-class">Fragment Content</div>
</div>
<div class="my-fragment-2">
<style>
.my-fragment-2 .my-class {
color: hotpink;
}
</style>
<div class="my-class">Fragment Content</div>
</div>
<style id="my-style-1">
#my-style-1 + div {
color: orangered;
}
</style>
<div>Fragment Content</div>
<style id="my-style-2">
#my-style-2 + div {
color: indigo;
}
</style>
<div>Fragment Content</div> 2 of 5
2
the simpler answer to your question is "Yes" and I'll elaborate on this with several examples below. A <style> tag will work wherever you place it within either the <head> or the <body>.
A style tag placed in the <body> tag technically does violate HTML syntax rules, it's surprisingly common in practice, even among some larger corporations.
There are several different methods for including <body>-level <style> tags in your project.
1. Pure HTML <style> tags (the static method)
If you have all the styles you need already written up and there are no dynamic pieces needed, you can simply write those styles into a <style> tag statically and include those in the code, as seen in this example below:
<html>
<head></head>
<body>
<div class="custom-widget">
<h1>This is a title</h1>
<p>This is some text.</p>
<style>
.custom-widget {
display: block;
padding: 20px;
border: 5px double red;
}
.custom-widget h1 {
text-transform: uppercase;
}
.custom-widget h1::first-letter {
font-size: 150%;
}
.custom-widget p {
font-style: italic;
}
</style>
</div>
</body>
</html>2. Writing the styles into a <style> tag as text using JavaScript
If you need to load the styles into your <style> tag dynamically and you simply need plain text styles that you will not need to change much after creating them. You can create the <style> block and then inject the CSS styles as plain text as desired, as seen in this example below:
const counter = document.getElementById('counter');
let count = +counter.dataset.count;
const customWidgetStyle = document.querySelector('.custom-widget style'),
countdown = setInterval(() => {
if (count--) {
counter.innerText = `Importing CSS in ${count}…`;
} else {
clearInterval(countdown);
counter.remove();
customWidgetStyle.innerHTML = `
.custom-widget {
display: block;
padding: 20px;
border: 5px double red;
}
.custom-widget h1 {
text-transform: uppercase;
}
.custom-widget h1::first-letter {
font-size: 150%;
}
.custom-widget p {
font-style: italic;
}
`;
}
}, 1000);<html>
<head></head>
<body>
<div class="custom-widget">
<h1>This is a title</h1>
<p>This is some text.</p>
<style></style>
</div>
<span id="counter" data-count="3">Importing CSS in 3…</span>
</body>
</html>3. Creating cssRules styles into a <style> tag using the JavaScript CSSStyleSheet.insertRule() method
If you need even more flexibility with how you add your styles, you can use the CSSStyleSheet.insertRule() (MDN docs), which will dynamically allow you to add and manage the styles more granularly. This may be overkill for your specific need but there's a lot of power, flexibility, and control when working with the CSSOM.
Here is an example of this method, in which I use an addStylesheetRules function example defined on the MDN docs page for insertRule under the heading Examples, here:
const addStylesheetRules = (rules, stylesheet) => {
if (stylesheet === undefined) {
const style = document.createElement('style');
stylesheet = style.sheet;
document.head.appendChild(style);
}
for (let i = 0; i < rules.length; i++) {
let j = 1,
propStr = '';
rule = rules[i];
const selector = rule[0];
if (Array.isArray(rule[1][0])) {
rule = rule[1];
j = 0;
}
for (let pl = rule.length; j < pl; j++) {
const prop = rule[j];
propStr += prop[0] + ': ' + prop[1] + (prop[2] ? ' !important' : '') + ';\n';
}
stylesheet.insertRule(selector + '{' + propStr + '}', stylesheet.cssRules.length);
}
}
const customWidget = document.querySelector('.custom-widget'),
customWidgetStyleTag = document.createElement('style');
customWidget.appendChild(customWidgetStyleTag);
const customWidgetStylesheet = customWidgetStyleTag.sheet;
addStylesheetRules([
['.custom-widget',
['display', 'block'],
['padding', '20px'],
['border', '5px double red']
],
['.custom-widget h1',
['text-transform', 'uppercase']
],
['.custom-widget h1::first-letter',
['font-size', '150%']
],
['.custom-widget p',
['font-style', 'italic']
]
], customWidgetStylesheet);<html>
<head></head>
<body>
<div class="custom-widget">
<h1>This is a title</h1>
<p>This is some text.</p>
</div>
</body>
</html>Please let me know if there is any more context I can add to better answer your question.
CodeWithHarry
codewithharry.com › tutorial › ways-to-add-css
Ways to Add CSS | CSS Tutorial | CodeWithHarry
The style can be used throughout the HTML page. Implementation Internal CSS is defined in a style block, which will be inside the head section.
DEV Community
dev.to › brendan_frasser › understanding-css-advantages-and-disadvantages-of-inline-internal-and-external-styles-glk
Understanding CSS: Advantages and Disadvantages of Inline, Internal, and External Styles - DEV Community
June 22, 2024 - Since developers have to style ... the likelihood of bugs. Internal CSS is a way of applying CSS to a webpage that involves using a style tag in the head section of the HTML file....
Reddit
reddit.com › r/webdev › internal vs external style sheet
r/webdev on Reddit: internal vs external style sheet
April 16, 2021 -
what difference, if any is there between styling your webpage through an external style sheet rather than having it styled in the header?
Top answer 1 of 5
5
There isn’t much difference, the few that I know of (there should be more): Internally, the CSS is immediately processed, while the external style sheet can be preload and deferred. You end up with either a single large HTML file or a HTML file and a CSS file. If you have storage concerns, an external CSS file for all of your HTML files is more efficient. External stylesheets are easier for caching and JavaScript loading. Overall, external stylesheets are better, but if your webpage is a simple single HTML file and you don’t need to cache separately / load different CSS with JavaScript, internal CSS can be slightly faster in loading.
2 of 5
2
There is no differences. (in css) But If your project's getting bigger, you must consider spliting styles to external style sheets. Metaphorically, If you have a clothes, you don't need to organize it. If you have a few clothes, You also don't need to organize it. But If you have a hundred clothes or more? It would better to organize them.
TutorialsPoint
tutorialspoint.com › how-to-use-internal-css-style-sheet-in-html
How to use internal CSS (Style Sheet) in HTML?
November 11, 2022 - Internal CSS is used to define within style tags for a single HTML page. It is defined inside the <head> tag of an HTML page, within a <style> tag element.
HNG Learn
hng.tech › hng learn › learn css programming online › adding css to html (inline, internal, external)
Adding CSS to HTML (inline, internal, external) | Learn CSS Programming online | HNG Learn
3 weeks ago - For example, setting the color and font size of an h1 element inline will only impact that specific h1 element on the webpage. ... Internal CSS is defined within the head section of an HTML document using the `` tag.
Roadmap
roadmap.sh › css
CSS Roadmap
September 24, 2025 - Internal CSS requires you to add the <style> tag to the <head> section of your HTML document. The CSS rules defined within the <style> tag will then be applied to the elements within that specific HTML document.
W3Schools
w3schools.com › html › html_css.asp
HTML Styles CSS
An internal CSS is defined in the <head> section of an HTML page, within a <style> element.
Wikipedia
en.wikipedia.org › wiki › CSS
CSS - Wikipedia
3 weeks ago - Before CSS, this sort of maintenance was more difficult, expensive, and time-consuming. A stylesheet, internal or external, specifies the style once for a range of HTML elements selected by class, type or relationship to others.
MDN Web Docs
developer.mozilla.org › en-US › docs › Learn_web_development › Core › Styling_basics › Getting_started
Getting started with CSS - Learn web development | MDN
In your HTML document, add the following snippet somewhere between the <head> and </head> tags: ... Save and refresh, and you should see all your paragraphs turn purple. In some circumstances, internal stylesheets can be useful. For example, perhaps you're working with a content management system where you are blocked from modifying external CSS files.
Quora
quora.com › How-do-I-add-CSS-in-HTML
How to add CSS in HTML - Quora
Answer (1 of 4): There are three ways you can add CSS to an HTML file: 1) Inline styles: You can add CSS styles directly to an HTML element using the style attribute. Here's an example: [code] This is some text [/code]2) Internal styles: You can add CS...
Simmons University
web.simmons.edu › ~grovesd › comm244 › notes › week3 › css-linking
Attaching CSS to your document
The best method for attaching your CSS style sheets is to use external styles. With this method, you will write all your CSS in a separate file with a .css extension. You can then link to the CSS file from each of your HTML pages.