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
Related
currently, i am working on an assignment for web development course.
these are the instructions:
First Line and Drop Cap Styles
Jakob wants the first line from the article to be displayed in small capital letters. Go to the First Line and Drop Cap Styles section and create a style rule for the first paragraph of the article element and the first line of that paragraph, setting the font size to 1.25em and the font variant to small-caps. (Hint: Use the first-of-type pseudo-class for the paragraph and the first-line pseudo-element for the first line of that paragraph.)
Jakob also wants the first letter of the first line in the article’s opening paragraph to be displayed as a drop cap. Create a style rule for the article’s first paragraph and first letter that applies the following styles:
sets the size of the first letter to 4em in a serif font and floats it on the left,
sets the line height to 0.8em, and
sets the right and bottom margins to 5 pixels.
(Hint: Use the first-letter pseudo-element for the first letter of that paragraph.)
this is the code that i've put:
/* First Line and Drop Cap Styles */
p:first-of-type:first-line {
font-size: 1.25em;
font-variant: small-caps;
}
p:first-letter {
font-size: 4em;
line-height: 0.8em;
margin-right: 5px;
margin-bottom: 5px;
}
I get it to work since I get error message over and over. I need help on this.
thanks.
Have you tried
p:first-of-type, p:first-line {
//styles
}
article p:first-of-type::first-line {
font-size: 1.25em;
font-variant: small-caps;
}
article p:first-of-type::first-letter {
font-size: 4em;
font-family: serif;
float: left;
line-height: 0.8em;
margin-bottom: 5px;
margin-right: 5px;
}
Okay, I have one <h1> in my <header> , and one <h1> in my <section>. The first question is why the size of this both <h1> different? I assume that they have their own size depends on their parents tags, which is I'm not certain of it. The second is I have styling this <h1> with external CSS, like:
h1{
font-size:2em;
}
tutorial
but, the <h1> inside the <header> won't change, only the <h1> inside the <section> make sense. I'm still beginner even in html, so please explain nicely. Thanks in advance.
Issue demo: http://jsfiddle.net/c06tpb3u
You're not using any CSS reset, which means you're at the browser's mercy and the default Stylsheet.
h1 {
display: block;
font-size: 2em;
font-weight: bold;
margin: 0.67em 0;
}
are the default styles set for h1 heading element
while for section things are getting salty:
h2, *:-moz-any(article, aside, nav, section) h1 { /*<<<< note h1 here*/
display: block;
font-size: 1.5em; /*<<<< and the new value*/
font-weight: bold;
margin: 0.83em 0;
}
h1 {
/*display: block;*/
/*font-size: 2em;*/
/*font-weight: bold;*/
/*margin: 0.67em 0;*/
}
so as you can notice (the above is inspecting in FF) that h1 is getting overwritten for h1 being inside section. <heading> element is omitted from that group leaving heading1 at the 2em default font size.
Browsers' default CSS for HTML elements
https://developer.mozilla.org/en/docs/Web/CSS/length
em This unit represents the calculated font-size of the element. If used on the font-size > property itself, it represents the inherited font-size of the element.
This unit is often used to create scalable layouts, which keep the vertical rhythm of the page, even when the user changes the size of the fonts. The CSS properties line-height, font-size, margin-bottom and margin-top often has a value expressed in em.
To override any CSS add the !important notation to the style..
h1{
font-size:2em !important;
}
This will override any of the browsers default CSS.
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;
}
Ok here is the thing. I need 2 different font sizes in my <h1> heading.
The text after the <br> need to be larger than the text before.
<h1>Welcome text from<br>Name</h1>
So I tried it with
h1 {
color: #c3c2c2;
font-size: 35px;
}
h1 br:after {
font-size: 50px;
}
But this doesn't work, any ideas or suggestions?
If you don't want or cannot change the markup, you could use the :first-line selector from CSS3. Something like this:
<h1>Welcome text from <br/> Name</h1>
h1 {
color: #c3c2c2;
font-size: 50px;
}
h1:first-line {
font-size: 35px;
}
According to Quirksmode the compatablity is quite okay, especially if you use the one-colon syntax over the ::first-line syntax (all good browsers support it, and IE from 5.5 and up as well).
See a jssfidle for a working demo.
If you are able to edit the markup, wrap "name" in a span and target the span with your selector.
Here is one way of doing it:
HTML:
<h2>Heading<br><span class="name">Name</span></h2>
CSS:
.name {
font-size:200%;
}
Example:
http://jsfiddle.net/ghWKm/
However, its more common to keep the heading to one line and put the subheading as a new element (h3 for example) underneath it.
you can use
`<h1>`Welcome text from`<span class="abc">Name</span></h1>
instead of
<h1>Welcome text from<br>Name</h1>
And give style to .abc
Why not wrap each side in a span and then set the sizes differently there, this will also mean that you do not need the br.
<h1>Welcome text from<span class="size2">Name</span></h1>
h1 {
color: #c3c2c2;
font-size: 35px;
}
h1 .size2 {
font-size: 50px;
}
Does anyone have any explanation for this? I've tried setting a width on #menu_wrapper ul li to no avail.
sIFR is limited in width to the width of the element you're replacing. If this element is floated, the width is the actual width of the HTML text. If the Flash font is wider than the HTML font, this means the Flash text won't fit in the allowed width and splits into multiple lines.
Possible solutions:
Specify letter-spacing for the list items, such that the HTML text is as wide as the Flash text
Set forceSingleLine parameter for sIFR.replace() to true, with as downside that the Flash movies will show horizontal resizing as they are initialized
Combine the two solutions to get better initialization performance, and the security that the text will never split
sIFR calculates the dimensions of the element you're applying it to. Floated elements are shrinkwrapped and take up only the width in which its necessary for the text inside to display.
I suggest you give an id to each of those lis, something like
li#nav-blog { width:200px; }
This will give you finer control over how much area each of those nav list elements take up, and more space for sIFR to use.
My solution:
sIFR.replace(gothic, {
wmode: 'transparent',
forceSingleLine: true,
selector: '.quick-access li h2 a',
css: [
'.sIFR-root { background-color: transparent; font-size:24px; color: #abaaab; text-align: center; cursor: pointer;}',
'a {background-color: transparent; font-size:24px; color: #abaaab; text-decoration:none; text-align: center; cursor: pointer;}',
'a:hover {background-color: transparent; font-size:24px; color: #77b100; text-decoration:none; text-align: center; cursor: pointer;}'
],
});
And CSS:
h2 {
font-size: 18px;
font-weight: normal;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.35;
margin: 0 0 5px;
}
*{
margin: 0;
padding: 0;
}