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>
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.
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 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.
.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.