I am reading the Java Tutorials Online, and sometimes you can find snippets of code declared with the pre tag. These snippets include plain text and some of it is in bold. I can't really differentiate normal text from bold text, so I'm using my browser's Stylish extension to create a CSS style that will modify the page's look and feel replacing the original.
My goal is to change the color of the bold text inside the pre element to a color slightly different than black, like a very dark blue.
What CSS selector can I use to select only bold text in a pre tag. Thanks!
To select bold text within the pre element you need to write the following CSS rule:
pre b{
color:blue;
}
Related
i want to change the color of only one word in string of text using stylus i.e.
#copy
h1 Our new site will be ready soon..
the stylus code is
h1
font-weight bold
color white
i just want to change the color of the first letter in the h1 phrase "Our" into yellow
how could i achieve that in stylus, thanks :)
The css selector "first-letter" selector is a good option.
If you want to change other letters or parts of text as per your example, use a span with its own style, e.g.
<h1><span style="color:yellow">O</span>ur <span style="color:blue">new</span> website</h1>
You can try the :first-letter selector:
h1:first-letter
color: yellow
Here's a fiddle with an example.
This could be done by making use of Pseudo-elements
Fiddle
is it possible to pick out and style a particular word in a paragraph using just css? So for example in the sentence "hello my name is nick, hello to you all", would it be possible to target the word "hello" wherever it appears and to add a rule, such as changing the color of hello anytime it appears? I don't want to have to add a span tag around every hello that appears.
I would like to do this in only css if possible. css3 is fine to use.
CSS has 2* Pseudo-Elements:
::first-line and ::first-letter. These are the only possibilities to target only a part of the innerhtml of a Tag.
(*ofc it has more, i mean for the purpose of selecting only a part of the innerhtml.)
No, you'd need to use javascript for that. Or, if you're using PHP/ASP...etc, you could add spans around any designated word(s) automatically before the page renders.
If you know the contents of the para and have patience you can wrap each of those words that you need to highlight in a span tag. Assign them the same class and then style it.
For fine control over any particular word, or fragment, you'd have to wrap it into a span and style the span, as others said.
However, there are also the :first-line and :first-letter pseudo-elements, available since CSS2. So, for example, you can have the first letter have a different font-size, and the whole first line have a different color, like this:
p:first-letter {font-size: 30px;}
p:first-line {color: #FF0000;}
What I know its not possible to target textnode, you can do it by using Javascript. Wrap the Hello word with a span tag and set the properties to the SPAN tag
CSS selectors work on tags or pseudo clases, not querying your text. Check the reference http://www.w3.org/TR/selectors/, maybe you can find something useful here.
Some questions about using CSS to specify the color of selected text:
Imagine that a rule like the following exists in the default CSS that's implemented by the browser:
::selection { background-color: Highlight; color: HighlightText; }
Further imagine that a rule like the following is defined in any site-specific authored stylesheet:
body { background-color: white }
Given these rules, what would the background-color of the selected body text be? Would it be white, or Highlight?
Perhaps the rule in the author stylesheet should override the default rule: because according to specificity, body is just as specific as ::selection and is specified later (and should therefore override the previous entry).
On the other hand, that would result in text being invisible when it's selected (because if Highlight is blue and HighlightText is white so that selected text is white-on-blue, then overriding the background-color of selected text so that it's white would result in its being white-on-white).
Assuming that the behaviour in step 2 is undesirable, how to avoid it?
Say that it's a bug in the user stylesheet, which shouldn't ever specify background-color without also specifying color?
Say that body isn't a match for selected body text except when the ::selection pseudo-element is specified as part of the selector?
Type selectors (e.g. body) and pseudo-element selectors (e.g. ::selection) do indeed have the same specificity, but specificity only comes into play when two selectors select the same element.
The body selector doesn’t select selected text, or any text at all — it selects the <body> element. It’s the element, and not its text, that has the background-color.
Whereas ::selection selects an imaginary element that surrounds currently selected text on the page. So there’s no conflict between styles set on body and ::selection, because the selectors select different things.
Example
Imagine you had the following HTML:
<body>
I am some body text.
<p>I am some text in a paragraph.</p>
</body>
And the following CSS:
p {
background-color: red;
}
body {
background-color: white;
}
Both selectors have the same specificity, but the <p>’s background will still be red, because it’s not the <body> element.
The same is true if you replace p with ::selection — selected text’s background will be red, because text within the <body> element is not the <body> element.
So, basically, what you said here:
body isn't a match for selected body text except when the ::selection pseudo-element is specified as part of the selector
The following style:
body { background-color: white }
applies to background color of your page.
On the other hand, this rule:
::selection { background-color: Highlight; color: HighlightText; }
applies styles when you select text on your page.
So they do completely different things and there is no question of collision between them.
Why was it removed?
Well that would be a question you would have to ask of the W3C committee that removed it from the draft. My understanding is there has been a lot of internal turmoil within the W3C community since they began writing the HTML5 and CSS3 drafts. Certain individuals that run projects developing the browsers (and I wont go into names) wanted it done one way, and developers be damned. The developer community wanted it done another way, and so began feud over who should control the W3C.
Given these rules, what would the background color of selected body text be: would it be white, or Highlight?
Sarfraz hit it on the head here, the :selection pseudo-class will only effect selected text. So in your example when you highlight something the background color changes to Highlight, when it is unselected it returns to white.
I haven't tested this particular example but here is what I understand of it
::selection will override the background color once the selection is made, and will bring it back to the body{background-color: white;} once the text is deselected.
we just have to make sure to always give a proper color and background values to both the selection and the main style.
After referring these two links (font properties and text properties), I have a doubt.
What is font? and what is text?
http://www.w3schools.com/CSS/css_reference.asp#font
http://www.w3schools.com/CSS/css_reference.asp#text
For example both color, font-size describes typography but why they placed in two different categories?
I'm missing some thing basically. What is it? Thanks for any help in advance.
Font is purely for control of Font related attributes whereas Text controls things that go beyond just the Font (such as alignment, etc).
Font is somehow like properties of the text, like :
Font-size:15px;
Font-Family: Sans Serif;
Font-Color: Red;
Text are the one that you will print on the browser,
Font is the CSS Property.
For more info refer this link : CSS Text & Font Properties
Font is how the letters look like. Text is where to place them...
I'm trying to make some text bold using HTML, but I'm struggling to get it to work.
Here's what I'm trying:
Some <bold>text</bold> that I want emboldened.
Could someone tell me what I'm doing wrong?
use <strong> or <b> tag
also, you can try with css <span style="font-weight:bold">text</span>
HTML doesn't have a <bold> tag, instead you would have to use <b>. Note however, that using <b> is discouraged in favor of CSS for a while now. You would be better off using CSS to achieve that.
The <strong> tag is a semantic element for strong emphasis which defaults to bold.
The Markup Way:
<strong>I'm Bold!</strong> and <b>I'm Bold Too!</b>
The Styling Way:
.bold {
font-weight:bold;
}
<span class="bold">I'm Bold!</span>
From: http://www.december.com/html/x1/
<b>
This element encloses text which should be rendered by the browser as boldface. Because the meaning of the B element defines the appearance of the content it encloses, this element is considered a "physical" markup element. As such, it doesn't convey the meaning of a semantic markup element such as strong.
<strong>
Description This element brackets text which should be strongly emphasized. Stronger than the em element.
In Html use:
Some <b>text</b> that I want emboldened.
Some <strong>text</strong> that I want emboldened.
In CSS use:
Some <span style="font-weight:bold">text</span> that I want emboldened.
Could someone tell me what I'm doing wrong?"
"bold" has never been an HTML element ("b" is the closest match).
HTML should contain structured content; publisher CSS should suggest styles for that content. That way user agents can expose the structured content with useful styling and navigational controls to users who can't see your suggested bold styling (e.g. users of search engines, totally blind users using screen readers, poorly sighted users using their own colors and fonts, geeky users using text browsers, users of voice-controlled, speaking browsers like Opera for Windows). Thus the right way to make text bold depends on why you want to style it bold. For example:
Want to distinguish headings from other text? Use heading elements ("h1" to "h6") and suggest a bold style for them within your CSS ("h1, h2, h3, h4, h5, h6 {font-weight: bold;}".
Want to embolden labels for form fields? Use a "label" element, programmatically associate it with the the relevant "select", "input" or "textarea" element by giving it a "for" attribute matching an "id" attribute on the target, and suggest a bold style for it within your CSS ("label {font-weight: bold;"}).
Want to embolden a heading for a group of related fields in a form, such as a group of radio choices? Surround them with a "fieldset" element, give it a "legend" element, and suggest a bold style for it within your CSS ("legend {font-weight: bold;}").
Want to distinguish a table caption from the table it captions? Use a "caption" element and suggest a bold style for it within your CSS ("caption {font-weight: bold;}").
Want to distinguish table headings from table data cells? Use a "th" element and suggest a bold style for it within your CSS ("th {font-weight: bold;}").
Want to distinguish the title of a referenced film or album from surrounding text? Use a "cite" element with a class ("cite class="movie-title"), and suggest a bold style for it within your CSS (".movie-title {font-weight: bold;}").
Want to distinguish a defined keyword from the surrounding text defining or explaining it? Use a "dfn" element and suggest a bold style for it within your CSS ("dfn {font-weight: bold;}").
Want to distinguish some computer code from surrounding text? Use a "code" element and suggest a bold style for it within your CSS ("code {font-weight: bold;}").
Want to distinguish a variable name from surrounding text? Use a "var" element and suggest a bold style for it within your CSS ("var {font-weight: bold;}").
Want to indicate that some text has been added as an update? Use an "ins" element and suggest a bold style for it within your CSS ("ins {font-weight: bold;}").
Want to lightly stress some text ("I love kittens!")? Use an "em" element and suggest a bold style for it within your CSS (e.g. "em {font-weight: bold;}").
Want to heavily stress some text, perhaps for a warning ("Beware the dog!")? Use a "strong" element and suggest a bold style for it within your CSS (e.g. "strong {font-weight: bold;}").
… You get the idea (hopefully).
Can't find an HTML element with the right semantics to express /why/ you want to make this particular text bold? Wrap it in a generic "span" element, give it a meaningful class name that expresses your rationale for distinguishing that text ("<span class="lede">Let me begin this news article with a sentence that summarizes it.</span>), and suggest a bold style for it within your CSS (".lede {font-weight: bold;"}. Before making up your own class names, you might want to check if there's a microformat (microformats.org) or common convention for what you want to express.
The HTML element defines bold text, without any extra importance.
<b>This text is bold</b>
The HTML element defines strong text, with added semantic "strong" importance.
<strong>This text is strong</strong>
Another option is to do it via CSS ...
E.g. 1
<span style="font-weight: bold;">Hello stackoverflow!</span>
E.g. 2
<style type="text/css">
#text
{
font-weight: bold;
}
</style>
<div id="text">
Hello again!
</div>
You're nearly there!
For a bold text, you should have this: <b> bold text</b> or <strong>bold text</strong> They have the same result.
Working example - JSfiddle
It’s just <b> instead of <bold>:
Some <b>text</b> that I want bolded.
Note that <b> just changes the appearance of the text. If you want to render it bold because you want to express a strong emphasis, you should better use the <strong> element.
I think the real answer is http://www.w3schools.com/HTML/default.asp.