Is There A Way To Do Css Inside An Html Body?

February 13, 2023 Post a Comment

I'm trying to change the background color multiple times within one page. Is there a way to put CSS in an HTML body?

Solution 1:

There are two primary ways to do this:

1. Inline (Styles)

<div style="background-color: blue;"></div>

2. In-Page Block (Styles)

These are typically defined in the <head> section of the page.

<style>
.bg-blue {
  background-color: blue;
}
</style>

If you are going to write your styles within a single page, I strongly advise going with "Option #2: In-Page Block" since it allows for reusability and is easier to maintain.

Does that help to answer your question?

Solution 2:

If you mean "Can I write inline css within the html body" then yes, you can! (See below). But having a separate CSS stylesheet is generally considered the better option.

<div id="myDiv" style="background-color:red;">
<!-- content -->
</div>

Baca Juga

Solution 3:

You can use <style></style> tags and put styling inside them, too. Best put into the <head> section.

<style>
body p {
   font-size: 18px;
}
</style>

Solution 4:

Just add style="add your attribute here" to an element and then separate attributes by adding ; between attributes;

<body>

<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
<p style="color:red;margin-left:30px;">This is a paragraph.</p>

</body>

Html5 Dictionary