.pitch h1
{
FONT-FAMILY: "HelveticaNeue-Bold", "HelveticaNeue", Helvetica, Arial, Sans-serif; MARGIN-BOTTOM: 40px; LETTER-SPACING: -0.03em; FONT-SIZE: 60px; FONT-WEIGHT: bold; WORD-SPACING: -0.04em; color:#FFFFFF;
LETTER-SPACING: -0.05em;
}
the html:
<h1 class="pitch">
Best way to increase client's<br>
confidence and boost your sales</h1>
what is wrong here?
why is this class not applied? Insteed of applying class .pitch , it applies the frmat of the body text to the text inside h1
.pitch h1 means "find an element of type h1 that is a child of an element with class 'pitch'".
What you want is h1.pitch.
The h1 isn't in some other element with the class pitch, which is what your CSS is trying to apply the rule to. Instead, the h1 has that class.
If you want to select the h1 with the class, use h1.pitch.
Just do the attributes for h1 that belongs to .pitch class like -
.pitch h1{ ... }
<div class="pitch">
<h1> </h1>
</div>
Instead of .pitch h1 { ... }, i think it should just be .pitch.
Related
div.entry-content:not(body.single div.entry-content)
{
font-family: 'Droid Sans', sans-serif;
margin-top:10px;
line-height: 114%;
font-size:15px;
}
the above css doesn't effect any elements at all ....I want div.entry-content elements that exist inside a body with the class single to be styled differently from the rest div.entry-contentelements ..
body.single div.entry-content
{}
and
div.entry-content
{}
do seem to work just fine .. but
div.entry-content:not(body.single div.entry-content)
{}
doesn't seem to
You need to rewrite the selector line to work the way you intend it to:
body:not(.single) div.entry-content {
font-family: 'Droid Sans', sans-serif;
margin-top:10px;
line-height: 114%;
font-size:15px;
}
This CSS Tricks page elaborates on the fact that you may only use a simple selector within a :not pseudo-class, which they define as follows in the footnote:
A simple selector is classified as a Type Selector, Universal Selector, Attribute Selector, Class Selector, ID Selector, or Pseudo Class Selector.
I want div.entry-content elements that exist inside a body with the
class single to be styled differently from the rest
div.entry-content elements
If you really want to use the :not() selector then you need to do something like this:
body:not(.single) div.entry-content {
font-family: 'Droid Sans', sans-serif;
margin-top: 10px;
line-height: 114%;
font-size: 15px;
/* demo*/
background: red
}
<body>
<div class="entry-content">test
</div>
</body>
with class single in body
body:not(.single) div.entry-content {
font-family: 'Droid Sans', sans-serif;
margin-top: 10px;
line-height: 114%;
font-size: 15px;
/* demo*/
background: red
}
<body class="single">
<div class="entry-content">test
</div>
</body>
See more info in MDN about :not
The negation CSS pseudo-class, :not(X), is a functional notation
taking a simple selector X as an argument. It matches an element that
is not represented by the argument. X must not contain another
negation selector.
body:not(.single) div.entry-content {
font-family: 'Droid Sans', sans-serif;
margin-top: 10px;
line-height: 114%;
font-size: 20px;
color:white;
background:green;
}
<div class="single">
this is the single div
<div class="entry-content">
write some text inside entry content
</div>
</div>
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
I have the following html5 code. I expected the style for the text Business Ads to be italic and color in yellow. But it comes in red.
Can only certain styles be applied to the aside element?
CSS:
aside h4 {
font-style: italic !important;
color: yellow;
}
article h4 {
font-style: normal;
color: red;
}
HTML:
<div>
<article>
<aside>
<h4>Business Ads</h4>
</aside>
</article>
</div>
This is a result of the way CSS specificity works. The page here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
provides a good explanation. In this case, since both style declarations refer to an h1 within a larger element, they have equal specificity, and the latest declared style takes precedence. You can override this with !important, but it's usually considered bad style because it breaks the "cascading" nature of CSS. Instead, use a more specific selector:
article aside h1 {
//style goes here
}
You override the rules the way you have set your CSS. Both rules target same element, so the second one will override the first one and apply to the element.
For example if you set the oppossite order to your rules like this :
article h4 {
font-style: normal;
color: red;
}
aside h4 {
font-style: italic !important;
color: yellow;
}
the second one will aply and h4 will be yellow an italic
So if you have an h4 also inside article you can use this:
article aside h4 {
font-style: italic !important;
color: yellow;
}
article h4 {
font-style: normal;
color: red;
}
DEMO
You must be more specific with the selector so that the rule it is assigned to overrides the "default" one. You can the remove the !important which isn't the best way to override existing rules when you can use other techniques.
DEMO
article aside h4 {
font-style: italic;
color: yellow;
}
article h4 {
font-style: normal;
color: red;
}
You're targeting the same h4 element but you gave it with different styles
and the last one was read. Just delete
article h4 {
font-style: normal;
color: red;
}
and remove the !important in the first selector.
And if you're targeting different h4 tags inside an article or aside tag, what you can do is put classes or span on them.
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 have a headline:
<h1>THIS IS A HEADLINE</h1>
How do I make the phrase "THIS IS..." not to be bold and the rest without a change?
I couldn't find any relevant tag in text-decoration.
The heading looks bold because of its large size. If you have applied bold or want to change behaviour, you can do:
h1 { font-weight: normal; }
More: 3.2. Font weight: the font-weight property
Try font-weight:normal;
h1 {
font-weight: normal;
}
<h1><span style="font-weight:bold;">THIS IS</span> A HEADLINE</h1>
But be sure that h1 is marked with
font-weight: normal;
You can also set the style with a id or class attribute.
You want font-weight, not text-decoration (along with suitable additional markup, such as <em> or <span>, so you can apply different styling to different parts of the heading)
style is accordingly vis CSS. An example:
<h1 class="mynotsoboldtitle">I'm not bold</h1>
<style>
.mynotsoboldtitle { font-weight: normal; }
</style>
<h1><span>This is</span> a Headline</h1>
h1 { font-weight: normal; text-transform: uppercase; }
h1 span { font-weight: bold; }
I'm not sure if it was just for the sake of showing us, but as a side note, you should always set uppercase text with CSS :)
For "THIS IS" not to be bold, add <span></span> around the text:
<h1>><span>THIS IS</span> A HEADLINE</h1>
And in style
h1 span{font-weight: normal}
You can simply do like that in the HTML part:
<span>Heading Text</span>
And in the CSS, you can make it as an h1 block using display:
span{
display: block;
font-size: 20px;
}
You will get it as a h1 without bold.
If you want it bold, just add this to the CSS:
font-weight: bold;
You can use font-weight:100 or lighter: this is working with i.e. Opera 16 and older, but I do not know why the h1 tags in Firefox are bolder, sorry.
If you want to remove the bold, you can use the code below,
h1 {
font-weight: normal;
}
But for "THIS IS" not to be bold, add <span></span> around the text,
<h1><span>THIS IS</span> A HEADLINE</h1>
And in style,
h1 span {
font-weight: normal;
}
Code example result,
h1 span {
font-weight: normal;
}
<h1><span>THIS IS</span> A HEADLINE</h1>