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

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

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

Answer 2

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 ! important overrides any other declaration ofcourse ;) As discussed above if different set of rules are added for a same element ie rules targeting elements with same specificity then the CSS will use the rules defined later on (ie 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 ! important ! important is 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 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.