I need to set the font to "strong", but can't work out how to do this with CSS? I tried
font-weight: 'Strong';
And I also tried it without the marks and it didn't work either. I'd like to set it to strong and not just bold as I've heard it helps disabled people while they are browsing your website (but that may be rubbish?!)
You probably mean:
font-weight: bold;
There is no strong weight, try bold (which is usually the default browser style for a <strong> element.
more about font-weight at MDN
I just solved this exact problem based off the post I read here. Bold is not what you want as bold is not the equivalent of strong.
For me using a polymer custom component.
Strong = font-weight: 400
Bold starts at font-weight: 500 or greater.
Looking into it a bit further reveals that this is dependant on browser version and display and sometimes things don't get rendered how you want.
More details can be found at the MDN link posted above by steveax and Ryan
bold is the only way. You're confusing the accessibility aspect with the HTML tags <b> and <strong>, which have a bold style by default.
<b> versus <strong> has less to do with accessibility, too, and more to do with semantics and the separation of styles from content. After all, you can style all <b> tags to be non-bold, and that’s just confusing.
font-weight:bold; is the equivalent of 'strong' font. You can also try
font-weight:900; (using numeric values).
strong is a html tag. css is for visual.
Related
i just change my font website to Questrial (Google font). And my language is Vietnamese, when i bold text it show smaller than normarl text.
Please help me fix that, thank a lot
Ex link : https://digitalbyrick.com/hieu-ve-edgerank-de-tang-toi-da-do-hien-thi-cua-fanpage/
enter image description here
Somewhere else in your CSS, you have:
b, strong { color: black; font-size: 18px; }
That’s being inherited by all those words in <strong> tags, while the paragraph font size is 21px.
It doesn’t appear related to the font, as that still happens if you change the font:
As Ali_k pointed out in the comment, Questrial doesn’t appear to have a bold style designed however, so if you try and change the font-weight, you may end up with faux bolding (depending on your other CSS).
I've browsed the other posts on this subject here, and still can't seem to figure this out. Why is this syntax showing up as invalid and being ignored in Chrome?
a, a:active, a:visited {
font: uppercase 400 1.175em "Lato", sans-serif;
}
From the W3 Spec
The 'font' property is, except as described below, a shorthand property for setting 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height' and 'font-family' at the same place in the style sheet. The syntax of this property is based on a traditional typographical shorthand notation to set multiple properties related to fonts.
I've tried almost every variation of this I can think of. I've tried simplifying it down to just 3 properties with no dice.
What's going on? I'd love to use the shorthand and save a little load time, but I'm starting to think it's a best practice to just avoid it altogether.
UPDATE: The problem was "uppercase". Can't set 'text-transform' properties in the font: shorthand. I confused 'font-variant' with 'text-transform'.
The quote from the W3C doesn't mention text-transform.
Remove the uppercase from the property and the syntax will be valid.
I have one word ONE_WORD and I would like to make it little big bigger, change text style and color it in red. How can I do that?
I tried with this code, but it doesn't work:
<font color="#B00000 ">ONE_WORD</font>
thx, D.
Font is deprecated.Use span instead
<span class="word">Your Word</span>
Then apply style to it.
CSS:
.word
{
font-size:20px;
color:Red;
//Other styles
}
Using inline styles is not recommended.
font is deprecated. Use <span> and CSS to apply specific styling:
<span style="color: #b00; font-size: 16px; font-style: italic;">ONE_WORD</span>
You can try this
HTML and INLINE CSS
<div class="text" style="color:red; font-size:20px;">ONE_WORD</div>
OR USE THE FOLLOWING CSS
.text{color:red; font-size:20px;}
Use attribute style to edit style properties:
<span style="color:#B00000;">This is dark red.</span>
More info: http://www.w3schools.com/html/html_css.asp (By popular demand: Use http://www.w3.org/Style/Examples/011/firstcss.en.html#colors and also https://developer.mozilla.org/en-US/docs/CSS/color instead. It may take a long search to find out what you're looking for in w3.org or MDN, but as pointed out they are definitely more reliable sources than w3schools.com)
<span style="font-size: 20px; font-style: italic; color: red;">ONE_WORD</span>
Define CSS property inside style. write like this:
<font style="color:#B00000">ONE_WORD</font>
First, think of your reason for wanting to increase it's size. If there's an HTML element that matches that reason (such as <em> for emphasis), then that's the element to use:
<em>ONE_WORD</em>
If you use the same element elsewhere but don't want those other uses to have the same appearance, then use it with a class. The class name should also reflect your thinking that led to you wanting it larger:
<em class="ourName">ONE_WORD</em>
If there's no natural match, use <span>.
<span class="ourName">ONE_WORD</span>
Then in your CSS you set the style to match. If you went with the first choice:
em
{
color: red;
font-size: 120%;
font-style: italic;/*em does this by default, but we'll include it anyway*/
}
If you went with the second choice or third choice, then either:
.ourName
{
color: red;
font-size: 120%;
font-style: italic;
}
Or to e.g. only apply this style to <em> elements with that class - and treating other elements you used the same class on:
em.ourName
{
color: red;
font-size: 120%;
font-style: italic;/*em does this by default, but we'll include it anyway*/
}
While more work for this one word that just putting the style straight on it, taking this approach to your entire site will make it simpler, faster, more logical for you to understand later, and quicker to change. It'll start paying off after just one document. Putting the CSS in a separate file will start paying off after the second page, and keep on giving.
you have to use style attribute to do that like:
<font style="color: #B00000>ONE_WORD</font>"
If the code posted does not set the text color, then the problem is elsewhere, possibly in a style sheet that overrides this setting, or in browser settings (browsers can be set to ignore colors suggested on web pages).
People and organizations have various opinions, but technically the font tag keeps working, and you can also set font family and size there, e.g.
<font color="#B00000" face="Verdana" size="4">ONE_WORD</font>
This is however rather inflexible, since here font sizes are expressed by numbers from 1 to 7, so that 3 is normal size and others are something different, in a browser-dependent manner. To get better control, you can add a piece of CSS, e.g.
<font color="#B00000" face="Verdana" size="4"
style="font-size: 135%">ONE_WORD</font>
To change text style to italic, you could wrap <i> and </i> around this; to get bold font, use <b> and </b> around.
And you can of course use semantically empty span markup and set everything in CSS, though there is little practical reason to do so for just styling an individual word.
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 don't make anything particular. I use Safari, and when I use <strong>blabla</strong> it doesn't work, but <b>blbla</b> does. any idea about what can be the reason?
Regards...
I use Yahoo Reset.css, if it may cause the problem.
sample code:
<p><strong>Address:</strong> bla bla bla blaabllb</p>
Yes, the Yahoo! CSS reset removes formatting from STRONG tags (as well as all other tags).
You'll need to explicitly declare the formatting as noted in the other answers...
strong { font-weight: bold; }
The Firefox plugin Firebug will let you right-click on an element and say "Inspect Element", which among other things displays what CSS has been applied to that element and from what stylesheet that CSS comes. Very helpful for running down what's causing an issue like this.
Yahoo's reset.css has this:
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
This indeed means that it won't be bold.
It can be that the browser has somehow lost default settings for the "strong" element.
Try to make it "recall" by specifying it explicitly in your CSS:
strong
{
font-weight: bold;
}
You shouldn't use the tags "strong" and "b" to achieve just bold text. Instead use stylesheets to make text appear bold and only use strong if you want to emphasize something. You can also use stylesheets to make strong appear bold in safari.
Well it all depends on what the CSS is doing.
strong {
font-weight:bold;
}
will make it appear bold. Some browsers will have that set as a default CSS rule, others might not. Have you set anything that says explicitly that strong or <b> will result in bold text?
Generally you shouldn't rely on the browsers to style elements on their own. For example, Safari might say:
strong {
font-weight:bold;
font-size: 1.2em;
}
while Firefox may have:
strong {
font-weight:bold;
color: #000000;
font-size: 18px;
}
or something like that. So when different users view your page, it may or may not look the same.
Investigate reset.css files (maybe here) and think about telling the browser WHAT you want it to look like via CSS.
Do you have strong declared in your css file? if you have a declaration:
strong{}
then nothing will happen.
You need to have:
strong{
font-weight:bold;
font-style: italic;
}
<strong> is a semantic element used to emphasize the enclosed text, while <b> (though "deprecated") is more of a typographic convention.
strong {font-weight:bold}