Jump to content



Photo
- - - - -

Text in <p> not respecting div class


This topic has been archived. This means that you cannot reply to this topic.
8 replies to this topic

#1   oxwivi

oxwivi
  • Members
  • 250 posts

Posted 26 May 2012 - 11:43

To make global text size changes, I change the stylesheet.css, but I found that with <p> tags, the settings of the div classes are not respected.

For example, almost all the text in osC is within <div class=​"contentText">​. I have changed the font text for contextText as necessary in the stylesheet, but the text remains the measly defaults until I remove the <p> tags.

How can I make <p> respect div classes or separate texts into paragraphs without <p> in a way the div classes are respected?

#2 ONLINE   multimixer

multimixer

    Lemons or Melons ?

  • Partner
  • 4,553 posts

Posted 26 May 2012 - 12:07

Try .contentText p{}

You may have some extra setting for p, probably in a more specific context and possibly later on in your css file that gains priority over your plain .contentText setting

#3   MrPhil

MrPhil
  • Members
  • 5,152 posts

Posted 26 May 2012 - 16:26

.contentText p { properties } would apply to the contentText class and all child paragraphs. p.contentText { properties } would apply only to paragraphs with contentText class. Be careful which you use.

Also, not all CSS properties are inherited. Some are not inherited (say, from <div> to child <p>) (e.g., margin), some are partially inherited (e.g., font-size as a computed value for relative measurements), and some are fully inherited (e.g., font-family). You should be aware of this behavior for a particular property.

Edited by MrPhil, 26 May 2012 - 16:27.


#4   oxwivi

oxwivi
  • Members
  • 250 posts

Posted 26 May 2012 - 20:30

Darn the CSS thing is more complicated than I first made out to be. Thanks for the clarifications, they're really helpful.

#5   npn2531

npn2531
  • Members
  • 1,134 posts

Posted 27 May 2012 - 11:40

here are some good places to start:

http://www dot w3 dot org/TR/CSS2/selector.html#descendant-selectors

http://www dot w3schools dot com/cssref/css_selectors.asp

http://codex dot wordpress dot org/CSS_Troubleshooting

#6   oxwivi

oxwivi
  • Members
  • 250 posts

Posted 03 June 2012 - 08:28

.contentText p { properties } would apply to the contentText class and all child paragraphs. p.contentText { properties } would apply only to paragraphs with contentText class. Be careful which you use.


I'm responding a little late, but after trying both of them (they did not exist in the default stylesheet), no difference was made. I made sure and pressed Ctrl + F5 to refresh the server.

#7   npn2531

npn2531
  • Members
  • 1,134 posts

Posted 03 June 2012 - 17:15

Most likely what is happening is that there is some other CSS selector in the default stylesheet that is overriding the CSS selectors you are trying to use. An easy way to see which selectors are being applied to a web page element is to use FIreFox web developer tools.
https://addons dot mozilla dot org/en-US/firefox/addon/web-developer/

Just install the Firefox web browser on your computer and then install the web developer tools (above) . Then open your web page in Firefox and go to tools>web developer>information>display class and id details.

The tool will overlay (label) every element on the screen with the CSS selectors being applied to that element.

#8   oxwivi

oxwivi
  • Members
  • 250 posts

Posted 03 June 2012 - 17:42

I like Firefox, but I keep it for personal use. Anyway, I got the problem using Chrome's inspect element. I'm not sure why it affects <p> in places like descriptions though. Take a look:

Attached Files



#9   oxwivi

oxwivi
  • Members
  • 250 posts

Posted 03 June 2012 - 18:17

Well, I'm not bothering to mess with the stylesheet any more. Even though I heard <br> is deprecated or something, it's respecting the size set in contentText.