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.
Related
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;
}
When I have an a tag within a div whose font-family is specified, the font-family seems to affect only the text within the div, but not the text within the a tag. Why is that, and how can it be fixed?
<div style="font-family: 'Times New Roman', Times, serif"> Hello world! Click here! </div>
As #John mentions in comment; you might have some other CSS linked file which is overriding your font-family. You can use inherit property inline, as your div also has style defined inline.
Click here!
The problem described is not caused by the code posted, i.e. the cause is in the part of code that was not disclosed. Generally, setting e.g. font-family on an element affects as such only the text directly in the element, not text wrapped in an inner element. However, if there is no CSS rule (in author, user, or browser style sheets in use) for an inner element, then an inner element inherits font-family from its parent. But in this case there apparently is a CSS rule that sets font-family on the a element.
The fix depends on what other CSS code is used. This does not seem to be a real-life case but just as an exercise, so it’s better to use a different approach, e.g.
<div class="foobar"> Hello world! Click here! </div>
with the following CSS code in a linked external style sheet or within a style element on the page:
.foobar, .foobar a { font-family: 'Times New Roman', Times, serif }
Replace foobar by a name that reflects the meaning or role of the element, just to make the code more readable to humans.
However, depending on the other CSS code that sets font-family on the a element now, you may need to use a more specific selector, or the !important specifier, or both.
I just wanted to know why font: inherit; is used in Cascading Style Sheets.
Like the other answers have said, it’s to inherit a CSS property from the parent element.
What the other answers have failed to say is why you’d need this. Because, after all, CSS properties are inherited anyway, right?
Well, no. Most are, by default (but link colour isn’t inherited from the parent element, for instance). But consider this case:
p { color: blue; }
div.important { color: red; }
<div class="important">
<p>This is a text</p>
</div>
Now the text will be blue, not red. If we want the <p> to have its parent’s styling rather than its default styling, we have to override its CSS. We could of course repeat the property value (red) but that violates DRY (don’t repeat yourself). Instead, we inherit it:
div.important p { color: inherit; }
The declaration font:inherit is used in many “CSS Reset” stylesheets, which have often been copied into various libraries and frameworks. The original Reset CSS by Eric Meyer has font:inherit. No specific motivation is given. The overall rationale is said to be “to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on”. But Meyer links to a previous post of his where he explains the idea, saying, among other things: “I want all this because I don’t want to take style effects for granted. This serves two purposes. First, it makes me think just that little bit harder about the semantics of my document. With the reset in place, I don’t pick strong because the design calls for boldfacing. Instead, I pick the right element—whether it’s strong or em or b or h3 or whatever—and then style it as needed.”
Several HTML elements have a default rendering in browsers as regards to font properties: headings, form fields, table header cells, some phrase elements, etc. Using CSS Reset, or specifically font: inherit means that on browsers supporting the inherit value, all such elements are rendered in copy text font, unless otherwise specified in a style sheet.
So this is about a particular methodology (or, as some people might say, ideology or religion) of authoring and design. It has gained popularity and often applied routinely.
The font CSS property is either a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height, and font-family; or a way to set the element's font to a system font, using specific keywords. -MDN
By using font: inherit;, it tells an element to inherit those relevant values from its parent container. See the examples below:
In the 1st group: you can see there are some special style set by default from the browser, h1 is bolder and larger it also inherits the relevant values from body automatically. However, for the input element, it doesn't inherit any of those values, since it's a replaced element and serves its unique purpose.
In the 2nd group: It forces those elements to inherit those values from body by using font: inherit;.
Now, you see what it does. It's entirely up to you when to use it, for instance you might want to use <h1> tag for the site logo in the home page, and you probably want to make it look no difference than it appears on other pages. And of course, it's commonly being used in CSS reset frameworks.
body {
font-family: "Comic Sans MS", "Comic Sans", cursive;
font-style: italic;
}
.inherit {
font: inherit;
}
<h1>Heading</h1>
<input type="button" value="Button">
<hr>
<h1 class="inherit">Heading</h1>
<input class="inherit" type="button" value="Button">
Not all browsers inherit font properties on all elements. Netscape 4.x was notoriously bad about about inheritance. Consider the following style:
body { background: black; color: white }
In Netscape 4.x, the color was not applied to table elements, so you would end up with the default black text inside the table on a black background.
Font properties have the same kind of deal for some elements, particularly form elements (and table elements for older browsers). It's not uncommon to see a definition like this:
table, form { font: inherit }
The inherit is used to get the properties from the parent element. In other words, inherit the properties of parent element.
The default property is inherit, it means, say you have div and a p.
<div>
<p>Hello World!</p>
</div>
Now you give a style:
div {font-famlily: Tahoma;}
p {font-family: inherit;}
That font-family is inherited to the p from its parent element div.
Using {font:inherit;} in CSS makes sense because various user agents (a.k.a. browsers) have user agent stylesheet (read: default stylesheet) with something like
body
{
font: -magic-font-from-user-preferences;
}
textarea, input
{
font: monospace;
}
The {font:inherit;} is used to workaround the special case where font or font-family is not inherited by default due to user agent stylesheet but the author of the content wishes the font family to be inherited.
The actual user agent behavior with the value inherit differs due to various bugs, unfortunately. Resulting behavior may be closer to author intent than the default value, though.
inherit in CSS simply means it inherits the values from parent element, so for example:
<div style="font-family: Arial;">
<p style="font-family: inherit; /* This will inherit the font-family of the parent p*/">
This text will be Arial..And inherit is default behavior of the browser
</p>
</div>
Here <p> inherits the font-family: Arial; from it's parent div
You need to use inherit for example in the case of anchor elements,
the color property is commonly set to blue in the user agent style
sheet. If you wanted to reinforce the importance of the inherited
value, you could use the value inherit in an author or user style
sheet, overwriting the user agent style sheet declaration.
More Reference
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.
Is there a way to style the first word in tag differently than the other words in that tag? For example, say I had this snippet of code:
<h4>Worpress Quick Tip Of The Week</h4>
Is there way I could style the word "Wordpress" differently than the other words using css? I know I could just put a span with a unique class around the word Wordpress, but is it possible without doing that?
No you can't.
You would need to use another tag.
CSS uses selectors which target tags. However, as you will notice, text inside the tag is not anything that could be targetted by even any selector. You target the tag which contains the text.
If you can wrap anything around it then you could. For example, just add a span, and then you can:
p:first-child {font-size:2em}
Because the first child of the p will be the span.
You could use the :first-letter pseudo-tag if you wanted to style the first letter but I'm unaware of a first-word tag.
h4:first-letter {
font-size: larger;
}
Have a look at this please.
There is first-letter and first-line but not first-word, however you can achieve this with the help of javascript.
Demonstration.
There is no :first-word selector unfortunately. You can take a look at this script though that implements it by adding the firstWord class to, well, the first word.
span.firstWord {
font-weight:bold;
text-decoration: underline;
}