After using css to indent paragraphs site wide, how do I exclude centered text from this rule? - html

Question

I have used css to indent every parapgraph in wordpress by 30px. This was going great until I noticed that it also indented my centered aligned text by 30px. That makes this centered text off centered. It's even more noticible when I look at it on mobile and I want the text to be easy and professional to read on the go. So, I want to exclude "text-align:center;" from the 30px indents for every center aligned text.
I don't have access to the entire code of my theme with my wordpress premium account. I can only edit the css using a blank css editor in a menu option. Is this possible without being able to see the whole code?
I have tried looking this up on stackoverflow before posting and using this code...
#article p {
display: block;
text-align:center;
text-indent:0!important;
}
I now know that this "#workskin p.chapter" ID selector will not work because I have not added it to my code because I do not have access to the full themes code.
This is the css code that I am using to make the indents and the only code that I have in my css editor for wordpress "p" paragraph element...
article p {
text-indent: 30px;
}
I could not get any changes in making my indents disappear for the text that was center aligned.
I'd like to make my center aligned text centered with my site and not indented an extra 30px from the center. For example:
Title-centered with no indents
Paragraph one-indented
Paragraph two-indented
Break in paragraph-centered no indents
Paragraph three-indented
Paragraph four-indented
Break in paragraph-centered with no indents...etc
This is the first time I am using css. Usually I have a full theme to look at the code and I am able to make small edits using color# and changing the src of images but that is the extent of my coding knowledge and I'm learning a little more with each google search and comment. This is the last code edit I need on my site and I appreciate everyones comments and help.

Answer 1

The specificity in CSS is in the order of
Type selector(h1, p ,div...) < Class selector(rules with a period .) < ID selector(rules with #) but the rules defined with ! important overrides any other declaration ofcourse ;)
As discussed above if different set of rules are added for a same element i.e rules targeting elements with same specificity then the CSS will use the rules defined later on (i.e the latest one)
Example:
p{
color : red ;
}
p{
color : green ;
}
In this example the color of the text in paragraphs will be green and not red as rule with green color is defined after the red one.
p{
color : red ! important;
}
p{
color : green ;
}
But here because of ! importantis added to red the color of text inside the p will be red.
So in your case you can go with either defining the text-align: center ! important or just define the rules overiding the ones you don't want in the specific p tag but this can be done by defining it's specific CSS rules after the rules for normal p tags
first define the normal or default rules as
article p {
text-indent: 30px;
}
After this add the specific rules
#worskin p .chapter {
display: block;
text-align:center;
text-indent:0;
}
Thanks AuxTaco for your suggestion.

Answer 2

you can put class on the p that you want to exclude from it like:
article p {
text-indent: 30px;
}
// try changing it to this remember exclude is class on p tags you want to exclude
// Dont forget the dot (.) before exclude
// and the !important is after the value
article .exclude {
text-indent: 10px !important; // you put !important here
color: red !important; // like this
padding: 10px !important; // like this
}
MAKE SURE TO MAKE EXCLUDED P UNDER THE NONE EXCLUDED TO REWRITE IT
LOOK AT CODE COMMENTS CAREFULLY
Hope it was hepfull