On my website I have an <H1> (the first one) with a title in it but it is all cramped. I've checked the CSS and can't see why it is all squeezed together. Can you help me find the culprit?
Its because of this:
style.css(line 115)
body{
12px/1.5em sans-serif <===
...
}
You set line-height on the body, and you're surprised that the line height is messed up? Remove that style and you're all fixed.
set your line-height to 1 (default). line-height: 1;
Most likely this line:
.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6 { font-family: Arial, Helvetica, sans-serif; margin:0 0 0.5em; line-height:1.5em; }
Which is in swatch/styles.css.
That line-height property is probably the issue.
Specify line-height for your headings. By looking at the font, try a line-height: 1.1em. i.e.
h1{
line-height: 1.1em;
}
You need to set your line-height in your css. For example
h1
{
line-height: 30px;
}
Hope this helps
Whats messing your H1 is the font: 12px/1.5em sans-serif; in your body style in you style.css line 115.
The element enclosing the h1 element has its width set to 50%. This forces the long heading across several lines. Remove that setting and shorten the heading.
Another same answer, but necessary:
Somehow unset line-heights for h1..6 are inherited from parent elements if parent elements have set line-heights. Tested in Firefox 24, Chrome 30 and ie8.
So here is another line for the reset area of css, to reset h1..6 line-heights and to prevent inherit behaviour:
h1,h2,h3,h4,h5,h6 {
line-height:normal; /*otherwise line-height is inherited*/
}
Related
I have added a custom font for this code. I am trying to get my h1 tag to inherit the font-weight:bold; css attribute.
In my css I have added the font-weight bold in the body tag where it should affect all the text. I have also tried placing it in the h1 tag in css.
The font-weight is affecting everything but the h1 tag. What is going on?
#font-face {
src:url(fonts/kohm.otf);
font-family:'kohm';
}
body{
background-color:silver;
color:white;
padding:20px 20px 20px 20px;
font-family:"kohm";
font-size: 14px;
font-weight:bold;
}
h1{
background-color:#ffffff;
background-color: hsla(0,100%, 100%, 0.5);
color:#64645A;
padding:inherit;
}
Ignore the question I found out that heading tags are already made bold so the font-weight:bold; attribute will not affect it. font-weight:normal; to un-bold it and adjust is font-size.
However when I am trying to italicize the font or make it oblique font-weight:italic; font-weight:oblique; it will not affect any of the text in the body paragraph. Why might that be?
You are using the wrong CSS syntax. You are using font-weight whereas you should be using font-style instead.
If you want to make the body paragraph italic, the correct syntax would be
p {
font-style: italic;
}
If you are trying to make it oblique, the correct syntax would be
p {
font-style:oblique;
}
I hope that helps!
I run into a situation where I need to override font-weight property. However, even though I use !important to increase its priority, it still gets overridden by other styles. As you can see in the following example, I am expecting hello world to be bolded, but it is using font-weight: normal instead. Any ideas? Thanks
body {
font-weight: bold !important;
}
div {
font-weight: normal;
}
<div>Hello World</div>
You can consider the universal selector if you want to make your font-weight to apply on the div and also other tags. (as i suspect you want to make all the page bold)
In your case you are appling the style to body and not the div element and style of child element always override the parent style even with the use of !important. So this rule will only work with element that inherit the font-weight from the body.
body *{
font-weight: bold !important;
}
div {
font-weight: normal;
}
<div>Hello World</div>
This has to do with binding priority of the styles. A way to resolve this is to make the rule more specific, e.g. by targeting body div instead:
body div {
font-weight: bold !important;
}
div {
font-weight: normal;
}
<div>Hello World</div>
However, please don't do this unless absolutely completely unavoidable. !important is a hack at best. If you are in control of the HTML, just introduce a class or use a more relevant selector.
I am working on a website where I would like the paragraphs and h2 tags to have the same appearance visually.
I have looked through the code so many times but cannot see why they appear (ever so slightly) different.
I am hoping a fresh pair of eyes may be able to spot it. I want the h2 tag to be styled the same as the paragraphs.
The website is here.
h2{
padding-bottom: 5px;
color: #808080;
**letter-spacing: -1px;**
line-height: 1em;
font-weight: normal;}
have letter-spacing: -1px; for p element and it will appear the same
Your header tags have a letter spacing of -1px (defined in style.css on line 56):
h1, h2, h3, h4, h5, h6 { padding-bottom: 5px; color: #808080; letter-spacing: -1px; line-height: 1em; font-weight: normal; }
I was able to determine this using Chrome's developer tools by inspecting the h2 and the p tags in the Elements panel, and looking through the computed styles in the Styles tab to see what's different about them. I noticed the h2 has letter-spacing, whereas the p does not:
It's about CSS trick.
For example:
<style>
body {
font-size:12px;
line-height:1.100;
font-family:arial;
}
h2 {
font-size:12px;
font-weight:300;
line-height:1.100;
display:inline;
font-family:arial;
}
</style>
we need <h2>our product</h2>
The focus you should take notice is the size of font, font-weight and display. Hoe this helps
Demo here
If you need the h2 tag inside the p tag
DEMO
My knowledge of CSS is almost non-existent, but I'm trying to spruce up a Wordpress site and can't seem to get my text to be both a certain width and right aligned. Either one works on its own, but when I use
p{text-align: right;}
p {height:100px; width:300px;}
the width is correct but the alignment goes back to default (left). I'm sure this is not even how to make this effect work, but again this is pretty foreign to me and I appreciate any help.
The Wordpress theme has a box for custom CSS, and just for the sake of completeness this is everything I'm using:
body {color:#757575;}
h1.site-title {color:#ff0000;}
p{font-family: Verdana, Geneva, sans-serif;}
p{text-align: right;}
p {height:100px; width:300px;}
h1.site-title {
font-family: Century Gothic, sans-serif;}
h2{font-family: Century Gothic, sans-serif;}
h2{color:#000000;}
h2{text-align:right}
nav {font-family: Century Gothic, sans-serif;}
a:link {color:#000000;}
a:visited {color:#000000;}
a:hover {color:#000000;}
a:active {color:#000000;}
Maybe the Wordpress css has a css rule that overrides yours. Keep in mind that if the theme css have eg. this css rule:
.paragraph p{
text-align: left;
}
and below that you add this rule:
p{
text-align: right;
}
Even if you put your rule as the last one, it has lesser priority than the theme one so the css rule applied will be the theme one.
Try to add the modifier important! so you'll have:
p{
text-align: right !important;
}
First, I'd recommend organizing your CSS so that all the P tags and all the H2 tags are in one set like changing this:
p {font-family: Verdana, Geneva, sans-serif;}
p {text-align: right;}
p {height:100px; width:300px;}
to
p { font-family: Verdana, Geneva, sans-serif; text-align: right; height:100px; width:300px; }
Next, there could be a theme issue. If you do want all of your paragraphs to align right on the entire site, adding the "!important" as Erwin suggested most likely will fix that.
I used a CSS reset to reset some commonly-used items. The code is this:
html, body, div, h1, h2, h3, h4, ul, ol, li, form, input, fieldset, textarea {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
}
ul {list-style: none outside none;}
img, fieldset {border: 0;}
h1, h2, h3, h4 {font-weight: normal;}
em {font-style: italic;}
strong {font-weight: bold;}
I know there's YUI and Meyer's reset, but I use this one.
Now, the problem I'm experiencing is that I can't get the submit buttons to look normally again. I could ofcourse remove the input from the list and be done with it, but I'd like to know how to get it back, since I might need that in the future.
input[type="submit"]
{
background-color: buttonface;
border: 2px outset buttonface;
color: buttontext;
}
It might be a good idea to iterate through the properties you have changed using javascript or even just looking at it through something like firefox to get the right values, then you would be able to set them to the correct defaults.
From memory I think there are quite significant size differences in the default sizes of buttons between IE, FireFox and Safari - I dont really use opera but I assume there are size issues there - so if you were then to set a padding on the button in CSS it might not render correctly any more in Safari and firefox.