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.
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 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
Even though I have set text-decoration to none, an underline is still showing on the h1 element. If you want to see the full css, go here. I am new to css, and this is just an adapted version of some code I found on the internet, sorry if the problem is obvious. If the problem isn't with the bellow code (which is where I think it probably is) then I will add in other relevant code.
You can see the page this is working on here
#pagetop h1 , a:visited
{
display:block;
float:left;
line-height:90px;
color:#FFFFFF;
text-align:left;
font-size:27px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
float:left;
margin-left:23px;
text-decoration:none;
}
There is text decoration in your link in the h1 tag.
Add this style:
h1 a
{
text-decoration:none;
}
Your CSS selector #pagetop h1 , a:visited states that you would like to apply those styles to an h1 and also an a in its visited state.
The comma in your code represents a list of separate selectors rather than a combined selector. In your case you don't need to separately specify the same styles for both the h1 and the a.
What you want to select is an a that is a descendant of an h1 within #pagetop (so that it isn't applied to all h1s):
#pagetop h1 a { text-decoration: none; }
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*/
}
I'm guessing not because I've been trying it with examples and nothing works...
I'm curious why not? And how can I set this?
Thanks
Sure you can. Just as for any other HTML element.
ul li { font-family: Arial, Sans-Serif }
Note that if the li contains other elements, and those elements have their own font-family settings, the value may get overridden. In that case, you'll have to specifically target the elements inside the li, e.g. for links:
ul li a { font-family: Arial, Sans-Serif }