Probably my CSS knowledge is limited, but I don't uderstand this:
<p style="color: green">
<p style="color: red">This is red</p>
This should be green. But it's not.
</p>
The second line will render in black ignoring the "color:green". Why?
I tested it in Chrome 28 and Firefox 22.
You can't nest paragraphs.
Paragraph is an auto-closing element, the </p> is optional - any block element will automatically close the last open <p>.
This is what's happening:
<p style="color: green">
</p> <!-- auto-closed paragraph -->
<p style="color: red">
This is red
</p>
This should be green. But it's not.
</p> <!-- here you have syntax error -->
You cannot nest <p>'s. A paragraph's end tag may be omitted if it's followed with another paragraph. This means that in your code, the first paragraph contains no text, the second one contains "This is red". Then there is some text "This should be green. But it's not." which has no style and a closing </p> tag, which has no opening tag.
check: http://www.w3.org/TR/html-markup/p.html
Paragraph can't be nested within another paragraph or block element.
When your code is rendered in the browser it is rendered as like below
<p style="color: green"></p>
<p style="color: red">
This is red
</p>
This should be green. But it's not.
<p></p>
So you can see, there is no wrapper to the last sentence as a result the default css color i.e black is being applied on that.
Related
My button "TEST" is not in the same linke as my text. So the hyperlink does not come directly after the word "hyperlink" in my text but it adds a automatic break. And I dont understand why.
<div style="margin-top: 30px;">
<div class="col d-flex flex-column">
<h3>TITLE!</h4>
<p class="mb-3">
Just some text
<br>
Some more text
</p>
<br>
<h3>Second Title</h4>
<p class="mb-3">
Some text that will contain a hyperlink
<br>
HYPERLINK
Test
some more following text
</p>
<br>**strong text**
</div>
</div>
Your question should contain much more information (i.e. relevant code), but basically the a tag which contains the "TEST" tag needs to be an inline element to allow subsquent text to be on the same line (which it isn't, judging from the behaviour you describe).
Apply a class or ID to it and create a CSS rule for that class or ID wich contains display: inline-block.
A popular online forum that I post to does not have the ability to create inline code spans in posts. Therefore, I'm creating a userscript in Tampermonkey to turn code blocks into inline code spans unless they're immediately following a line break <br>. I've made a Tampermonkey script so far that injects a style into the <head> of the online forum, using the following selector:
br + code {
background-color: yellow;
}
<body>
<h2>Example A (this is correct)</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
<code>But after a line break, the code is yellow!</code>
</p>
<h2>Example B (unwanted behaviour)</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
After a line break, there is more text...
<code>...but the code is still yellow!</code>
</p>
<h2>Example C</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
After a line break, there is more text and an empty span <span></span>...
<code>and that makes the code not yellow anymore!</code>
</p>
</body>
Example A works perfectly, selecting only the code span that immediately follows the line break. However, example B has unwanted behvaiour.
The problem with example B is that there is plaintext content in between the line break <br> and the inline code span. It seems like the CSS selector is selecting the code span after the line break even if there is plain text content in between them and making it yellow, but I don't want that.
Example C is an HTML way of fixing this issue. I added an empty <span> in between the <br> and the <code>. This caused the CSS style not to select the code, deciding that the code was not the first element to follow the <br>.
But I would prefer a CSS-side fix to this issue. What is it, if any?
Unfortunately, because of this forum having strict policies on what tags are allowed in forum posts, any alternate methods won't work. I need an answer that actually solves the posed qustion, and I can't change the HTML provided in any way, otherwise it's likely to get stripped from my forum post. The following is a list of what I have tried. In all of the following cases the additional info will be stripped:
Attempting to put CSS classes on the parts I want to style.
Attempting to add attributes other than font-size to a section of text.
The only reason that the empty span solution (example C) works for me is that the forum server lets you set font sizes with <span style="font-size: 12px">. If I were to go through with what I have now, I would need to surround part of the line before the inline code span with this.
This isn't a CSS issue, but rather a misunderstanding of the semantics and purpose of the <p> and <br> tag. Here is a great SO post talking about semantics and their importance.
TL:DR: Restructure your HTML to be semantically correct before worrying about your CSS, and use CSS classes as appropriate rather than complicating your code with sibling selectors:
.highlighted {
background-color: yellow;
}
<p>Your first paragraph</p>
<p>A second paragraph without the linebreak</p>
<code class="highlighted">... code that is highlighted ...</code>
<p>A third paragraph</p>
<code>... this code isn't highlighted ...</code>
Why you don't put all element that you need to change background to
<div style="background-color: yellow;">
<br>
<p>
</div>
Using :nth-child() selector, <code>...<\code> can inherit its background color from its parent element or can override with a custom background color. For example, it can be implemented in your given HTML as below:
br + code {
background-color: yellow;
}
h2:nth-child(3) + p code:nth-child(3) {
background-color: inherit;
}
<body>
<h2>Example A (this is correct)</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
<code>But after a line break, the code is yellow!</code>
</p>
<h2>Example B (unwanted behaviour)</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
After a line break, there is more text...
<code>...but the code is still yellow!</code>
</p>
<h2>Example C</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
After a line break, there is more text and an empty span <span></span>...
<code>and that makes the code not yellow anymore!</code>
</p>
</body>
I have a requirement where I have to eliminate <br> tags enclosed in <p> tags whenever they are not preceded with text or followed with text, let me give a complete example.
Asterisk (*) tags are meant to be matched, the others are meant to be left untouched.
<div>
<p>
<br/>*
<span>Text1</span>
<br/>
<i>Text2
</i>
</p>
<p>
<b>
<i>
<br/>*
</i>
</b>
<span>Text3</span>
<br/>
<br/>
Text4
<i>
<br/>*
</i>
</p>
<p>
<span>Text4</span>
<br/>*
</p>
</div>
Putting things simple, I need to normalize the text formatting from some Word documents where the editors were doing line-breaks act like paragraphs, line-breaks are meant to break text and not imply spacing between lines, this is the paragraph's job.
So, all I need is to keep <br/> tags surrounded by text safe and match the rest to issue a delete.
Thanks!
You could use two queries:
//p/descendant-or-self::*/*[1 ]/self::br[not(preceding-sibling::node()/normalize-space()!='')]
//p/descendant-or-self::*/*[last()]/self::br[not(following-sibling::node()/normalize-space()!='')]
I'm adding content to a predefined layout that I cannot modify but allows any HTML. I wish to align a piece of text like a floating text box but due to the h4 and p classes that I can't change it is proving difficult.
What I'd like to see is:
But it currently looks like:
The resulting HTML is currently:
<div class="element property-line"><h4 class="property-name">Foo</h4>
<p class="p property-text">
BAR <div style="line-height: 90%;";>
<i> quite a long but of text that needs to wrap</i></div>
<p></p></div>
...where my content starts at BAR and ends with the i and div end tags.
I think I may be missing a formatting trick.
<div class="element property-line">
<h4 class="property-name">Foo</h4>
<p class="p property-text">
BAR
<span style="line-height: 90%;">
<i> quite a long but of text that needs to wrap</i>
</span>
</p>
</div>
That should be more what you're after, <span> tags are suited for changing/styling text within paragraphs because <div> tags are more for structural elements.
Your original code also had an extra opening <p> on the last line.
I used MS Word to create a document as I wanted it to appear and then tripped out all the extraneous twaddle it puts in; leaving me with:
<p style="margin-left:50pt; text-indent:-50pt">
then found a workaround to mimic the <h4 class= and <p class= sections so that it all fit into one <div> instead.
I have three sections of text in there own <p></p> and I need to bold just a couple of words in each paragraph. So my question is how would I properly bold "CLX Exchange Accommodators, Inc." using CSS without having the text that follows appear below the bold text. The reason I'm asking this is because whenever I try to isolate the text I want to bold in another div or p tag the remaining text appears below the bolded text.
Here is my html
<div id="content">
<p class="copy"> CLX Exchange Accommodators, Inc. have been proudly serving real estate investors nationwide since 1991.</p>
</div>
<!--End of content-->
Here is my current project on codepen if it helps http://codepen.io/Austin-Davis/pen/IpDLu.
To bold some text in a paragraph you could use the <b>, <strong> tag or a <span> with styling set. These options would look like this:
I want to <b>bold</b> a word.
This word is <strong>bolded</strong>.
The following word is <span style="font-weight: bold;">bolded</span>.
Note that your choice of tag has semantic implications. With the development of HTML5 there is a movement to make the tags that you're using carry meaning beyond just having them there for display purposes. You can read a bit about a few of the relevant meanings here.
Though I used inline styling in my code snippet above to style that span, I would probably use a stylesheet to set the style on an actual webpage. It's good practice to separate your HTML markup and the styling.
Oh, and one last thing: the reason that placing your text in a p or div tag moves it to the next line is because those elements are, by default, set to display: block;. If you want to use one of those tags (which you shouldn't for semantic reasons), you could set them to display: inline; or display: inline-block;. Read all about the display property here.
This can be achieved with a STRONG tag but I prefer to keep it flexible by using a SPAN. You can set the style for the SPAN (or for that matter the STRONG) in CSS.
<style>
#content p.copy span {font-weight: bold;}
</style>
<div id="content">
<p class="copy"> <span>CLX Exchange Accommodators, Inc.</span> have been proudly serving real estate investors nationwide since 1991.</p>
</div>
<!--End of content-->
<p class= "copy"> <b>CLX Exchange Accommodators, Inc.</b> have been proudly serving real estate investors nationwide since 1991.</p>
.copy b
{
font-weight:bold;
}
Try this.
Is there a reason you want to do it in CSS? The simplest way would be to put <b> </b> tags around the CLX Exchange Accommodators, Inc.
<div id="content">
<p class="copy"> <b>CLX Exchange Accommodators, Inc.</b> have been proudly serving real estate investors nationwide since 1991.</p>
</div>
<!--End of content-->
You could also use <strong> </strong> tags, however it might also italicize the text in some older browsers