I am trying to highglight part of a title, as you can see above. It doesn't seem to have any effect, how can I achieve what I'm after?
<h1> <strong>BOLD</strong>NOTBOLD</h1>
You could do it by setting the font-weight to normal instead of large which is the default font weight. Here's a snippet.
h1 { font-weight:normal; }
<h1><strong>Bold</strong>Not Bold</h1>
Reset the font-weight of your h1 tag
h1{
font-weight: normal;
}
<h1><strong>BOLD</strong>NOTBOLD</h1>
A header is bold by default, you have to "unbold" it:
h1{
font-weight: normal;
}
<h1>Hello normal <strong>and then bold</strong></h1>
<h1>Bold<span style="font-weight: lighter">Not Bold</span></h1>
Header tags already have made bold, if you still want to highlight it you can use some other properties like make it Italic, set font-color, etc.,
Related
How do you make the h1, h2 seem like standard text?
For example, I want the word 'standard' in the sentence above be a H1 on my page... I can make it the same size, issue is it makes a new line and margin etc...
set this in your CSS file (or tag).
play with the font sizes and such in order to set proper text size and color.
h1 {
font-weight: bold;
color: #fff;
font-size: 32px;
}
h2 {
font-weight: bold;
color: #fff;
font-size: 24px;
}
Both the <h1> and <p> elements are block level. Change them to inline so they don't occupy full width.
p, h1{
display:inline;
font-size:1em;
font-weight:normal;
}
<h1>hello</h1>
<p>there</p>
Just style it in CSS:
.your_class h1{
font-size:20px;
font-weight:400;
margin:0; // if You use for example bootstrap
padding:0; // if You use for example bootstrap
}
Let's pretend your font-size is 14px for the entire page. Change the h1 font-size to that and apply 0px line-height. This is the closest I was able to get.
h1 {
font-size: 14px;
line-height: 0px;
}
Edit: I didn't add bold because I am assuming you wish to keep the default font-weight applied by h1.
If you are wanted to make the word "standard" a different size to the rest of the text try wrapping it in a span and then give the span an id and edit it from CSS to be a larger size
So I have this form, and inside it's got a div with a paragraph. The paragraph belongs to the class "create-account". But inside create-account in my CSS, where I set the font-size and font-style. The code doesn't affect my paragraph. And I literally have no clue why. Any help would is greatly appreciated.
.create-account {
font-size: 24;
font-style: arial;
}
<form>
<div>
<p class="create-account">Create your account here</p>
<hr/>
</div>
</form>
You are missing some units to your font-size property, and you also would need to use font-family instead of font-style
.create-account {
font-size: 24px;
font-family: Arial;
}
The font won't apply because you set it on font-style. You need to use font-family: arial;
I've been trying to figure out how to make h2 used for the text, "Tennis in Toronto" at look like the h2 used for the text, "Summer Camp" (in the main content area) at. I think that there is a font-weight: bold; that is causing the problem, but I can't find it at all in any of the css files. Here's the CSS for "Tennis in Toronto".
#wrap h2.title a, #wrap h2.title {
font-family: "Open Sans", arial, serif !important;
letter-spacing: .02em;
color: #999999;
font-size: 140%;
}
Here's the HTML:
<h2 class="title">
Tennis in Toronto
</h2>
Can someone please help me out? I would really appreciate it.
try setting it to normal weight. headers are bold by default
h2{ font-weight:normal; }
The h2 element with the text "Summer Camps" has a class named .pagetitle, which sets the font weight to 300.
If you want to use this style on all your h2 elements, then use:
h2 {
font-weight: 300;
}
But it's probably a better idea to style just the .title class:
.title {
font-weight: 300;
}
Also, make sure you've included this style in your Google Fonts collection.
Look at the CSS and the elements class:
Notice that the bold title "Tennis in Toronto" has the class title. While "Summer Camp" has the class pagetitle. So if you want "Tennis in Toronto" to look like "Summer Camp" then change it's class from title to pagetitle.
Update
To un-bold your item like you said, remove font-weight: bold in it's CSS. Specifically from the item #wrap a.forumtitle, #wrap a.topictitle{ ... }. Also note that "Summer Camp" is an <h2> element while "Tennis in Toronto" is not. So be sure to take into consideration the CSS of <h2> elements on the page.
I am not 100% sure about this but I think h2 is automatically bold just like < a > is automatically underlined. try this in the style sheet:
h2.title{
text-decoration: none;
}
I have a HTML page which includes some text and formatting. I want to make it have the same font-family and the same text-size ignoring all inner formatting of text.
I want to set a global font format for the HTML page.
How can I achieve this?
You should be able to utilize the asterisk and !important elements within CSS.
html *
{
font-size: 1em !important;
color: #000 !important;
font-family: Arial !important;
}
The asterisk matches everything (you could probably get away without the html too).
The !important ensures that nothing can override what you've set in this style (unless it is also important). (this is to help with your requirement that it should "ignore inner formatting of text" - which I took to mean that other styles could not overwrite these)
The rest of the style within the braces is just like any other styling and you can do whatever you'd like to in there. I chose to change the font size, color and family as an example.
Best practice I think is to set the font to the body:
body {
font: normal 10px Verdana, Arial, sans-serif;
}
and if you decide to change it for some element it could be easily overwrited:
h2, h3 {
font-size: 14px;
}
Set it in the body selector of your css. E.g.
body {
font: 16px Arial, sans-serif;
}
Use the following css:
* {
font: Verdana, Arial, 'sans-serif' !important;/* <-- fonts */
}
The *-selector means any/all elements, but will obviously be on the bottom of the food chain when it comes to overriding more specific selectors.
Note that the !important-flag will render the font-style for * to be absolute, even if other selectors have been used to set the text (for example, the body or maybe a p).
Try this:
body
{
font-family:your font;
font-size:your value;
font-weight:your value;
}
I've tried this:
#ambrosia h3
{
font: 12px/18px Arial,Verdana,sans-serif;
font-color: red;
font-weight: bold;
}
and this:
#ambrosia h3
{
font: 12px/18px Arial,Verdana,sans-serif;
color: red;
font-weight: bold;
}
but I still end up with a gray font on my H3 text.
Why?
Either you have another color set for the id #ambrosia and that is taking precedence over the generic selector, or you have another tag inside the h3 which has a color assigned to it.
Or, in your html you have the #ambrosia applied to the h3 tag, but in your css, you have specified an h3 element which is inside an #ambrosia element. If you are wanting to use <h3 id="ambrosia">, your css should be
h3#ambrosia { color: red; }
You likely have other CSS that has a more specific selector that's giving your <h3> that font color, identifying that selector and/or posting your markup would help us provide a more specific selector that would override the font color.
You should use Chrome's "Inspect Element" option.
Right click on the line and choose Inspect Element and it will show you the path of the CSS evolution of your element.
the color: red; syntax is correct. however it is possible that you have some other styles in your css file that are conflicting.
you might try using the "firebug" firefox plugin. it will allow you to select the element and see exactly which style is applied to the element and if your class is being overridden