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;
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
Applying an enlarged font-size using em directly to a <p> tag and to the nested <span> tag are giving different results.
body {
font-size: 14px;
}
p {
font-size: 1.4em;
}
.enlarge {
font-size: 1.7em;
}
<p>Normal paragraph text</p>
<p class="enlarge">Enlarged text</p>
<p><span class="enlarge">This text comes out larger than the above.</span></p>
I was expecting both <p class="enlarge"> and <p><span class="enlarge"> to give me the same result.
Here is a working example: https://jsfiddle.net/huymo47b/
You can use rem (root em) instead of em
em is relative to the parent element, while rem takes reference from the root (html) value
The css code becomes
body {
font-size: 14px;
}
p {
font-size: 1.4em;
}
.enlarge {
font-size: 1.7rem;
}
The code can be tested here: https://jsfiddle.net/zrzahoro/
Update:
The rem takes reference from root, which it html tag. If you want to control the value of font being referenced in your css instead of letting it use the browser default value, give a fixed font-size to html tag too.
"The em unit is a relative unit based on the computed value of the font size of the parent element. This means that child elements are always dependent on their parent to set their font-size."
Reference: CSS-Tricks
Your <p> tag has already 1,4 of normal size and <span class="enlarge"> is 1,7 of its parent (which is already enlarged).
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;
}