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;
}
Related
I have a div which contains the page's title. Is it possible to set all text to the h1 style without using tags?
For example:
<div id="title-div" style="h1">My Title</div>
Or maybe something like:
#title-div {
style: h1; //Imports all styles from h1
}
Is this kind of thing possible?
No.
Extensions to CSS such as SASS tend to have features like #mixin which can define a set of rules once and then apply them in different places but:
CSS itself has nothing like that
The styles have to be explicitly defined as a mixin
Find the css for your h1 tag and just add your div id (assuming you have control over that css and its not coming in from a 3rd party, in which case you will likely just have to copy it)
h1, #title-div {
// styles
}
You can use class or id to style your page's title.
CSS example for styling with "id":
#title-div {
//add your styling here
}
The other option is a "class", so in the "div" open tag, you should have "class" HML example:
<div class="title">
<h1>My Title</h1>
</div>
CSS example for class styling:
.title {
//add your styling here
}
Also, I think you should add in the div container h1 to understand and clear it.
You can use the default style of h1
-webkit-text-size-adjust: 100%;
line-height: 1.5;
color: #000!important;
box-sizing: inherit;
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
margin: 10px 0;
font-size: 42px;
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.,
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;
This is a pretty basic thing, but something that has always seemed weird to me. I develop sites for content management systems where I cannot always reliably expect a content author to use the correct markup. Many times, they do not even know what a p tag is.
So let's say I have a description element that should be styled a certain way, separate from my global paragraph styles. Inside of it will be text, ideally in a paragraph tag, but who knows, maybe it won't be. To work around this, I add the styles both to the parent and to the paragraph tag:
.description {
font-family: $LatoLight;
color: white;
font-size: 16px;
line-height: 1.25;
p {
font-family: $LatoLight;
color: white;
font-size: 16px;
line-height: 1.25;
}
}
This seems like repetative and overkill, but if I only add the styles to the p, the author may not use a p tag, and if I only apply the styles to the parent, global or other paragraph styles will overtake the styles of the parent. I also generally do the same thing with anchor tag colors. Sometimes I can enforce the tag with my backend code, but I'm really more interested in the solution from purely styling architecture.
What do other people do? Is this a bad strategy? To date, the above styling has been the most reliable for me.
You can try with this:
.description {
font-family: $LatoLight;
color: white;
font-size: 16px;
line-height: 1.25;
*{
font-family: inherit;
color: inherit;
font-size: inherit;
line-height: inherit;
}
}
Can you safely assume that the author (or whatever WYSIWYG is being used) will insert an element at all? Be it a p or div, span, blockquote, article, main, section basically the most commonly used text-containing elements.
A few options would be:
Make sure the output is always going into a container with an id and/or a class (to make it the styles harder to override).
Make sure what ever WYSIWYG editor (if using one) will only output a handful of controllable elements
Ask the authors to only use a handful of elements
There aren't really that many HTML elements to choose from anyway.
The CSS:
.description,
.description p,
.description span,
.description td,
.description article,
.description main,
.description blockquote,
.description section,
.description any_selector_here,
.description div {
font-family: $LatoLight;
color: white;
font-size: 16px;
line-height: 1.25;
}
This way you are only writing your styles once.