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
Related
Good morning,
I would like to modify the CSS of my blog post pages, but if I do it, that change also the Woocommerce product pages description text, because both are identified as being "p".
p, ul, ol, pre, h1, h2, h3, h4, h5, h6, table, form {
margin-bottom: 20
px
;
line-height: 1.786em;
font-size: 16px;
color: #2f2b35;
}
Example of page where I like to change the text: https://librairiedamase.com/blog/quelle-bible-choisir/
Example of page where I like not to change the text (of description): https://librairiedamase.com/boutique/sainte-ecriture/bible-expliquee-et-commentaires/commentaire-des-psaumes-2/
Thank you in advance.
Try adding this to your css
#content > .entry > * {
margin-bottom: 20px;
line-height: 1.786em;
font-size: 16px;
color: #2f2b35;
}
You need to prepend a single post body class before your target tags.
Example:
body.single-post p {
margin-bottom: 20px;
line-height: 1.786em;
font-size: 16px;
color: #2f2b35;}
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 am writing an article on WordPress.
when i choose heading 6 font size "which is the smallest font i have those issues:
1: the font become Bold
2: when i use bullet-list the spacing between the lines is too big
i want to have regular font and normal spacing and the edit must be at style.css file
li > ul {
margin-bottom: 0;
margin-left: 24px;
}
li > ol {
margin-bottom: 0;
margin-left: 35px;
}
ignore this link.
http://www.abdorefky.com/heading-6-issue/
If you don't want the h6 inside an li to be bold (which it is by default), you have to override it.
li h6 {
font-weight:normal;
}
If you want ALL h6 not to be bold.
h6 {
font-weight:normal;
}
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.
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*/
}