Change style inside HTML to all class elements - html

Question

I was wondering couple days ago if its possible to do the following.
Lets say we have a basic HTML code with the following in it:
<p class="someinfo"> basic text </p>
<p class="someinfo"> some other information </p>
And we also have some CSS files that are included in the header of the HTML with basic styling like:
.someinfo{
font-size:32px;
color:red;
}
So here comes my question.
If I edit the HTML and put inside the first Paragraph (style="color:black") like down below it will change the color only for that div element.
By changing the style like this is it somehow possible to make the changes appear to all elements with that class name?
<p style="color:black" class="someinfo"> basic div </p>
<p class="someinfo"> some other information </p>
I hope you understand what I'm asking and apologise if it's a stupid question.
P.S. I am asking this because I have the following situation. There is a website that i don't have the access to any of the files on the server, cannot upload any new files. All i can do is create new pages from a text editor which doesn't recognise < style > and < script > tags. All I want to do is change some css on the navigation and on some other items that are part of every page in the website.

Answer 1

This is what CSS is for :) If you want all elements of a given class name to change to black you could change the CSS style to:
.someinfo{
font-size:32px;
color:black;
}
Doing it inline manually wont work.
If you really want to do it inline you could do so programatically with js:
var someInfoElements = document.getQuerySelectorAll(".someinfo");
for(i = 0; i < someInfoElements.length; i++) {
someInfoElements[i].style.color = "black";
}

Answer 2

Option 1
You could define the first element with a style attribute and use JS to make the rest for you, as long as all elements have the same selector.
const someInfo = document.querySelectorAll('.someinfo');
const style = someInfo[0].getAttribute("style");
someInfo.forEach((s) => s.style = style);
<p style="color:red; font-size:32px" class="someinfo"> basic text </p>
<p class="someinfo"> some other information </p>
Option 2
You could add style attributes to each element.
Here is an example:
const someInfo = document.querySelectorAll('.someinfo');
let style = '';
someInfo.forEach((s) => {
if (typeof s.getAttribute("style") === 'string') {
style += s.getAttribute("style");
if (style.slice(-1) !== ';') {
style += ';';
}
}
});
someInfo.forEach((s) => s.style = style);
<p style="color:red;" class="someinfo"> basic text </p>
<p style="font-size:32px" class="someinfo"> some other information </p>
<p style="color:blue" class="someinfo"> and more information </p>
<p class="someinfo"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, soluta animi, optio repellat eius consectetur! Iure repudiandae, architecto doloremque, dolorum totam consequatur minima placeat recusandae nisi earum dignissimos, illum culpa. </p>
As you see I am using color:red and color:blue. Just like in CSS the last attribute wins. In this case the color of your element with the class someinfo is blue and all other CSS attributes and values will be added.

Answer 3

yes you can, if you want to change all paragraph in the div just put "p" in your css code like this: your both elements will change
p {font-size:32px;color:red;}
instead of
.someinfo{font-size:32px;color:red;}
your code will be like this
<style> p { font-size:32px;color:red;} </style>