CSS style selectors

  • Hi, for my main body, I have defined a class:heading,subheading,paragraphs for styling the heading, subheading, paragraph respectively in style.css, but my problem is how do I indicate to wordpress when I want to use a certain style for the text?

    I tried in the WP admin HTML Editor by adding:

    <div class=”heading”>
    I AM A HEADING</div>

    <div class=”subheading”>
    I AM SUBHEADING
    </div>

    <div class=”paragraph”>
    the quick brown fox jumps over the lazy dog.
    the quick brown fox jumps over the lazy dog.
    the quick brown fox jumps over the lazy dog.
    </div>

    BUT that didn’t work and only displayed the text (without style) if I remove the class selectors.

Viewing 4 replies - 1 through 4 (of 4 total)

  • Please use the code feature in the future. 

    <div class="heading">
I AM A HEADING</div>

<div class="subheading">
I AM SUBHEADING
</div>

<div class="paragraph">
the quick brown fox jumps over the lazy dog.
the quick brown fox jumps over the lazy dog.
the quick brown fox jumps over the lazy dog.
</div>

    I recommend you use the standard HTML tags for this task, unless you have a really good reason to do differently. So, your main heading would be an H1 tag, and your subheadings could be anything from H2 to H6 tags. Paragraphs should use P tags. You can then style them in your CSS file like so:

    h1 { color: red; }
h2 { color: blue; }
p { color: green; }

    or, if you want to only style a specific class of these, you could do something like:

    h1.heading { color: red; }
h2.subheading { color: blue; }
p.paragraph { color: green; }

    To assign the classes to your content, you may have to edit your PHP files in a text editor or use the HTML editing tab in the WordPress content editor… depending on your situation.

    What theme are you using? If you theme has an editor-styles.css stylesheet included you can updated this with your custom styles and that way you will be able to see them take effect in the editor, not just when you view the published version.

    Thread Starter mx760

    (@mx760)

    Since I’m using my own custom theme, I just have style.css. So I should just edit in WordPress Admin HTML editor for a certain page to have that class selectors, BUT when I tried with putting this:

    <div class=”heading”>I am a heading</div>

    it’s not being displayed where I want it, you see, I have a mainContent div that holds mainContentItem divs and these textual styles (.heading, .subheading, .paragraph) are to reside inside the mainContentItem div, but by using WP admin HTML editor, it’s not placed there AND another problem is since index.php has the Loop, ALL my pages show the out-of-placed styled text, BUT I only want it to show on ONE of my pages…

    Man, I hope someone can help me out, thanks

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘CSS style selectors’ is closed to new replies.

Tags