CSS rules doesn't apply

  • Hey,
    I am using the colormag free theme on my site. I made a child theme and it that folder I made a new functions.php and style.css file. My child thme style.css is loaded by the functions.php in my child theme folder.

    The issues I have apply to different rules but some the styles I use for now seem to work. I want to remove the top border of main navigation and justify all my paragraphs.

    Here is a link to my site and the code of my style.css

    #site-navigation {
    background-color: rgba(0,168,198,0.6);
    border-top: 0px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1) inset;
    position: relative;
}

body > p {
	line-height: 150%;
	text-align: justify;
}

    Thank you for time and support!

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

  • Hi Michael,

    For the border, you’ll need to add a bit of specificity since there’s a conflicting inline style that’s taking precedence.

    Try replacing the #site-navigation with #site-navigation.main-navigation in your code.

    The selector you used for the paragraphs will only style direct descendants of body. This is due to your use of > in body > p.

    For example:

    <body>
	<p>This will have justified text.</p>

	<div class="anything-else">
		<p>This will not.</p>
	</div>
</body>

    Since everything on your site is within a <div id="page"> that is within <body> …your code here won’t have any effect.

    If your goal is to target all paragraphs, you might as well just use a p selector.

    Although you might want to reconsider using justified text for better readability. Google for articles like “Never Justify Type on the Web” if you want to look into it more, but ultimately the decision is up to you.

    Best of luck!

    Thread Starter michaeltaube

    (@michaeltaube)

    @leland:thanks. The selector you mentioned for the navigation worked. So it looks almost like I want to have it.

    Okay what I understand is that only direct childs of body would be effected by body > p. Now I used just p as selector to change the line-height to 150%. Thanks for the hint not to justify text on the web. I googled it now I understand why.

    Again. Thank you for your support.

    Thread Starter michaeltaube

    (@michaeltaube)

    as I wrote earlier that the selector Leland mentioned worked to remove the border it’s only true for the top border.

    My CSS looks like this now

    #site-navigation.main-navigation {
	border: 0px;
	padding: 0px;
	margin: 0px;
}

    Anyone has an idea what the reason for this is?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CSS rules doesn't apply’ is closed to new replies.