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}
Related
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.
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.
I've just learned how to make a text to blink (<div style="text-decoration:blink">text</div>).
How about the other decoration modes such as color changing? Are they available in CSS?
Thanks.
Nothing too interesting with text-decoration. A good resource is always the w3:
http://www.w3schools.com/Css/pr_text_text-decoration.asp
h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}
Regarding your second question - of course. CSS can (and should) be used to style almost anything, though blinking text is an extreme example, most rules are much more useful.
Yes, color changing is available in CSS. Use
<div style="color:red">foo</div>
for example. You probably want to check out a good CSS introduction or the official standard:
http://www.w3schools.com/css/css_text.asp
http://www.w3.org/TR/CSS2/
The available text-decoration values are:
blink
line-through
none
overline
underline
See http://reference.sitepoint.com/css/text-decoration for more details.
Yes, you can use the following:
color: #FFFFFF; (which would make your text white in color)
font-weight:bold;
text-decoration:underline;
etc.
You should really Google this.
I suppose that by color changing you don’t mean just to set the text color as color does but more complex animations.
There are some experiments like WebKit’s -webkit-animation, -webkit-transform or -webkit-transition. But those properties are proprietary.
Nowadays such effects are done with the help of JavaScript. There are plenty JavaScript frameworks you can use like jQuery, mootools, Prototype, Script.aculo.us, etc.
No, these are generally programmed using JavaScript.
If you are referring to link color changing on hover, that is done with css.
a:link { color: blue; }
a:hover { color: green; }
There are four currently-supported text decorations. (Blink is no longer supported in most browsers.)
Draws a line over the text
h1 {text-decoration:overline;}
Draws a line under the text
h1 {text-decoration:underline;}
Strike through. (Draws a line through the text.)
h1 {text-decoration:line-through;}
No decoration.
h1 {text-decoration:none;}
NEVER USE BLINK, it has little browser support, it is useless, and has severe accessibility issues. It was made as a proprietary attribute during the browser wars between IE and Netscape, and most browsers never supported it, IE, who copied it from Netscape, has deprecated it, and Netscape, has been dead for almost 6 years.
(Feel free to correct my little history lesson.)
CSS text-decoration property is used to decorate the text or remove the decoration for the text. CSS text-decoration property is mostly used to set or remove the underlines on the web page.
In many case, when you wish to have no decoration for the text you can simply say text-decoration: none;. That makes the text have no decoration.
See the below example for more understanding
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
Reference: http://www.snoopcode.com/css/css-texts
I have the following CSS fragment:
INPUT{ font-family: Raavi; font-size: 14px;}
Which works fine when the textbox contains some Punjabi script like this: ਪੰਜਾਬੀ
But the user might enter English instead, and I would rather use the Verdana font with a different size, since the English letters in the Raavi font are real funky and the size is wrong.
So my question could be stated as:
Is there any type of conditional font-family and size selection within CSS based on the input
Is there anyway for CSS to know about the input language?
So I could create the following PSEUDO_CSS:
INPUT{ EN-font-family: Verdana; EN-font-size: 12px; PA-font-family; Raavi; EN-font-size: 14px;}
or
INPUT.EN{ font-family: Verdana; font-size: 12px;}
INPUT.PA{ font-family: Raavi; font-size: 14px;}
This is addressed in CSS3, and that's not going to help for compatibility with old browsers, but it works for me when mixing Greek and Latin text with different fonts for each. Here's an example taken from the CSS Fonts Module Working Draft:
#font-face {
font-family: BBCBengali;
src: url(fonts/BBCBengali.ttf) format("opentype");
unicode-range: U+00-FF, U+980-9FF;
}
The unicode-range bit is the magic key: that tells the browser to use this font-face statement only for this particular block of Unicode characters. If the browser finds characters in that range, it uses this font; for characters outside that range, it falls back to the next most specific CSS statement following the usual pattern of defaulting.
input { font-family: Verdana, Raavi, sans-serif; font-size: 14px;}
This should work for your purposes:
If the text is English, both fonts should contain the glyphs, and Verdana will be preferred
If the text is Punjabi, Verdana should not contain the glyphs, so the browser should fall back to Raavi
I'm not positive if all browsers will behave correctly, but that's what they should do according to the CSS spec.
A pure CSS solution might be as easy as:
input[lang=en] {
font-family:Verdana;
font-size:12px;
}
input[lang=pa] {
font-family:Raavi;
font-size:14px;
}
But it's still up to you to set the lang attribute of the input element.
Unfortunately, as with most fancy CSS features, attribute selectors are not 100% working across the array of browsers today. Your best bet in my opinion is to use a class per language and assign it to the input element.
Update:
Per your request, here's an example of a naive way to do it with vanilla JavaScript. There are certainly improvements to be made, but this "works".
<style type="text/css">
.lang-en {
font-family:Verdana;
font-size:12px;
}
.lang-pa {
font-family:Raavi;
font-size:14px;
}
</style>
<form>
<input type="text" onkeyup="assignLanguage(this);" />
</form>
<script type="text/javascript">
function assignLanguage(inputElement) {
var firstGlyph = inputElement.value.charCodeAt(0);
if((firstGlyph >= 65 && firstGlyph <= 90) || (firstGlyph >= 97 && firstGlyph <= 122)) {
inputElement.setAttribute('lang', 'en');
inputElement.setAttribute('xml:lang', 'en');
inputElement.setAttribute('class', 'lang-en');
} else {
inputElement.setAttribute('lang', 'pa');
inputElement.setAttribute('xml:lang', 'pa');
inputElement.setAttribute('class', 'lang-pa');
}
}
</script>
This example fires after a character has been typed. It then checks if it falls between a range considered "English" and assigns attributes accordingly. It sets the lang, xml:lang, and class attributes.
In your html tag you have that lang property.(just lang='en' or lang='en-EN')
We can use this in CSS.
If we want to give particular CSS for p tag for different language,
p:lang(en-EN){
}
The respective style we need to add.
This is the way that we can give particular css for different languages.
example
html{font-family: Raavi; font-size: 14px;}
html:lang(en-EN){font-family: Verdana; font-size: 12px;}
It is common practice when maintaining multi-lingual websites to use separate CSS files for each language. This is desirable because you will need to adjust more than the font. You will often need to adjust spacing to match the length of strings in the language. Also, you may need to adjust some of the basic formatting of the page in order to make it more natural to users of the language.
The robust answer is to internationalize and not to just settle for a different font because eventually you will find that font selection will be insufficient.
How could CSS know about the input language?
I'm afraid the only solution is to find a unicode font which looks pretty for both character sets. Which is far from perfect if your remote reader has not installed it. Maybe Arial Unicode MS.
The only reliable solution for now is to list the fonts in the desired order, as Miles indicated.
Hopefully the (correct) solution indicated by Zack might be properly supported by more browsers.
But even then it will be your responsibility to tag the various sections with the proper lang attribute.
Nothing can reliably detect the language of any text.
I am trying to combine some of my CSS and it is kind of an easy questions but I am kind of having some trouble, i have this code:
h2.post-title, h2.post-title a{
display:block;
background-color:#000;
padding:3px;
color:#ffffff;
text-decoration:none;
text-transform:uppercase;
font:lighter 130% Georgia, Arial;
}
Do I need to have both of those selectors there? The only time I will be using the h2.post-title it will be a link. Any suggestions, I tried removing the first one, but it made it HUGE.
Thoughts?
If you remove the h2 font styling, it will revert to its default font size which is pretty big. You could set it up separately:
h2.post-title {
font-size:130%;
}
But it will take up more space than simply setting both selectors to the same style. My advice — leave it as it is unless you have a good reason to change it.
The thing is that "h2.post-title a" only applyes to the <a>-element of your code. The browser uses standard css on the <h2>-tag!
Lets have a look on your HTML:
<h2 class="post-title">Clickable title</h2>
You need rules to both the <h2> and the <a>-tag. To do that, you need do include both h2 and a in the stylesheet (as you described).
A solution might be to remove the default styling of <h2>, by some of the many reset css-rules you'll find on the Internet.
An other solution would be to move the class-spesification from "h2" over to "a" (and style just the "a.post-title" attribute in CSS):
<h2><a class="post-title" href="#">Clickable title</a></h2>
Or maybe you can remove the <h2>-tag completely, just print out <a>. But this might break your semantic.