<div class="entry"> is the root div.
Page CSS:
.entry h3 {
font-family: Helvetica
font-size: 30px
Now the problem is I have another div
<div class="widget">
<h3 class="widget-title"</h3>
I want to change font size and font family of the above h3 (.widget-title) but I cant as I have to delete the font size and family of .entry h3. I don't want to delete .entry h3
UPDATE:
I fixed the issue by adding !important. I hope this post helps someone else.
You don't have to delete anything. That's not how stylesheets work. Define your .entry h3, then just provide your widget title css after that. Stylesheets cascade, remember.
Also your H3 in your code example is missing a >.
.entry h3 {
color: blue;
font-size: 16px;
font-family: serif;
}
h3.widget-title {
color: red;
font-size: 32px;
font-family: sans-serif;
}
<div class="entry">
<h3>Entry Title H3</h3>
<div class="widget">
<h3 class="widget-title">
Widget Title H3
</h3>
</div>
</div>
It should not be an issue if you specifically target that element like below:
.entry h3 {
font-family: Helvetica;
font-size: 30px
}
.widget-title h3{
font-family: serif !important;
font-size: 30px
}
Use !important in front of css styles
.widget-title{
font-family: Helvetica !important
font-size: 30px !important
}
Related
very new to this and have tried several fixes without success.
Inside h1, my fonts are all correct and reacting as expected:
h1 {
position:relative;
left: -10px;
top: -16px;
padding: 2em;
height: 3em;
width: 100%;
background: #545454;
font-family: "Avenir Light", sans-serif;
font-size: .7em;
text-align: center;
color: darkgray}
h1 p {
font-weight: 30;
word-spacing: 30px;}
But the text isn't responding anywhere else on my page, even when inserted under body, body p, into each individual element... It's driving me nuts!
body {
margin: 0, 0;
padding: 0, 0;
overflow-x: hidden;
background: #765264;
color: white;
font-family: "Avenir Light", sans-serif;
font-size: 16px;
line-height: 1.5;
}
body p {
font-size: 1em;
font-family: "Century Gothic";
font-weight: 30;
letter-spacing: 1px;
}
Weirdly, inserting letter-spacing above seemed to make the spacing larger.
Here's my HTML, for reference:
<head>
<div class="header" id="myHeader">
<h1>
<link rel="stylesheet" href="peytonsite.css">
<p>
<img src="https://static.wixstatic.com/media/058e45_e590acfd22c440f4b5c89450738f321d~mv2.png/v1/fill/w_100,h_100,al_c,q_85,usm_0.66_1.00_0.01/058e45_e590acfd22c440f4b5c89450738f321d~mv2.webp">
<a>HOME</a>
<a>SKILLS</a>
<a>PORTFOLIO</a>
<a>EXPERIANCE</a>
<a>CONTACT</a>
</p>
</h1>
</div>
</head>
<article>
<section id="LANDING">
<img id="LongLogo" src="https://static.wixstatic.com/media/058e45_0291502c1e424532bbd24f9cfd50fd1e~mv2.png/v1/fill/w_1466,h_348,al_c,q_90,usm_0.66_1.00_0.01/Long%20Logo.webp">
<p>PASSIONATE DESIGN</p>```
Please help!
Update:
30 isn't a valid font-weight, and, your font may not necessarily have a boldness available to it.
Try: font-weight: bold;
or: font-weight: 300; (300 is usually non-bold)
A few other ideas:
You probably want a comma between h1 p { in your second CSS block.
Secondly- Is your target text within a <p> block?
For debugging purposes, what happens if you append !important to your styles? Does that show what you want?
What happens if you delete the h1 p { ... block, and add this in at the bottom of your CSS?
p {
font-weight: 300!important;
word-spacing: 30px!important;}
If nothing changes, I suspect you don't have the right CSS selectors.
Here is a CodePen of your CSS correctly applying
I learned to change the font family of text in the body by doing <p style="font-family:;></p>, but how would I do it for the title? Also, is there a way to fixing a font family for the entire document?
You want to use (html{}) in your style.css Therefore, it will apply to any element inside your (HTML). unless you explicitly specify otherwise.
Further on the matter, on the example, I gave you if you are to remove the child1 or child2 font-family it will default to whatever is in the body section if you are to remove the font-family from the body it will default to the HTML.
[
/*Change the font style on the Entire Document */
html{
font-family: "Montserrat", sans-serif;
font-size: 1rem;
color: Gray;
}
/*Change on the Body*/
body{
font-family: "Montserrat", sans-serif;
font-size: 2rem;
color: white;
background-color: #333;
text-align:center;
}
/*Change on a specific elements*/
#container .child1{
font-family: cursive;
font-size: 2rem;
color: white;
text-align:center;
background-color: blue;
}
#container .child2{
font-family: cursive;
font-size: 2rem;
color: white;
background-color: green;
text-align:center;
}
footer{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
<header>
<p>I am the Header</p>
</header>
<div id="container">
<div class="child1">
<p>I am a Body Child</p>
</div>
<div class="child2">
<p>I am another body Child</p>
</div>
</div>
<footer> I am the Footer</footer>
]1
If you REALLY wanted to set the entire document you could use the below noting that more specific selectors will over-ride it unless you specify !important (though I strongly recommend against using !important on a selector this vast):
body {
font: normal 10px Verdana, Arial, sans-serif;
}
You can code a style element within the head element your HTML file to apply styles globally throughout your document:
<style>
title {
font-family:; /* usually the name of your font goes here */
}
</style>
New to HTML and CSS and trying to replicate sites to get some practice. I'm having some trouble replicating a section on the airbnb website where it lists the explore, contact and book. For some reason, I float the image to the left and my h3 and p tags should not overlap the image. I've made sure to display the image as a block, but the h3 and p tags overlap and my margins won't work. Not sure what I'm doing wrong.a
Thanks
Here's the css
.feat-box {
background-color: red;
float: left;
margin-top: 20px;
width: 282px;
}
.feat-box h3 {
font-size: 22px;
font-family: Shift, 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: rgb(57, 60, 61);
margin-left: 10px;
padding-top: 10px;
}
.feat-box p {
font-size: 17px;
font-family: Shift, 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: rgb(57, 60, 61);
margin-left: 10px;
}
.feat-box img {
float: left;
display: block;
}
.feat-box-container {
margin: auto;
width: 900px;
}
Here's my html
<div class="feat-box-container">
<div class="feat-box">
<img src="http://www.somanyfoods.com/wp-content/uploads/2014/05/contacts.png"/>
<h3>Explore</h3>
<p>Find the perfect place.</p>
</div>
<div class="feat-box">
<img src="http://www.somanyfoods.com/wp-content/uploads/2014/05/contacts.png"/>
<h3>Contacts</h3>
<p>Message hosts.</p>
</div>
<div class="feat-box">
<img src="http://www.somanyfoods.com/wp-content/uploads/2014/05/check-mark.png"/>
<h3>Book</h3>
<p>View your itinerary.</p>
</div>
</div>
Try adding
display:inline
to your
.feat-box p
you might have to play around a little with the margins to get the text to align, but it fixed it for me.
If your learning CSS I'd advice installing firebug, it's an add-on that will help you better understand how CSS works.
This is the main code,
<div id="text-12" class="widget widget_text">
<div class="heading">
<h3>
title
</h3>
</div>
<div class="textwidget">
text
</div>
</div>
And I added this CSS rule,
#text-12 {
font-family: "courier new" !important;
direction: rtl;
}
Unfortunately, the font-family only work for the class textwidget and I can not apply font-family to heading class with any trick. What is wrong?
One thing more, Page address: http://sciself.com/?page_id=4766 (Right Sidebar)
Maybe your overwriting the font-family of H3 later in your css file?
Edit: I'm quite sure since everything seems the work fine.
<div id="text-12" class="widget widget_text">
<div class="heading">
<h3>
Heading
</h3>
</div>
<div class="textwidget">Textwidget</div>
Note, I've changed the text to made it easier to read (for me)
Jsfiddle example
I inspected your page. You may use some rule more specific to override the parent CSS file. For example,
#sidebar #text-12 .heading h3 {
font-family: "courier new" !important;
}
Try adding this into your css
#text-12 {
font-family: "courier new" !important;
direction: rtl;
}
#text-12 h3 {
font-family: "courier new" !important;
direction: rtl;
}
try to put
.heading h3{
font-family: "courier new" !important;
}
It should work.
Maybe it looks different to you because the h3 are bold by default. Try changing the font-weight setting to see if that is what you are looking for.
#text-12 h3 {
font-family: "courier new";
font-weight: normal;
direction: rtl;
}
You shouldn't have to use the !important - as that is normally bad practice.
I have noticed when I have a <h2> tag directly below an <h1> tag there is a large gap between the two. No padding or margin is set and I've normalised the css using normalize.css. Why does this gap exist?
Fiddle here: fiddle
Here is a screen shot:
html (normalize.css is active on this html)
<div class="header">
<div class="wrapper">
<h1>Portfolio of...</h1>
<h2>Jing Xue</h2>
</div>
</div>
css
.wrapper {
width: 940px;
margin: 0 auto 0 auto;
}
/* header ------------------------------------------------------------------ */
.header {
text-align: center;
padding: 40px 0 0 0;
margin-bottom: 40px;
}
.header h1 {
font-family: 'Delius Swash Caps', cursive;
font-size: 250%;
color: rgb(200,50,50);
/* margin-bottom: -50px; */
}
.header h2 {
font-family: 'Playfair Display SC', serif;
font-size: 450%;
color: rgb(59,67,68);
}
Further Question
For what ever the reason for this big gap between "portfolio of..." and "Jing Xue", is the correct way to reduce the gap to give a negative top/bottom margin on the corresponding <h..>?
h1 through h4 tags have a default margin. You need to remove that margin in your CSS.
.header h1 {
font-family: 'Delius Swash Caps', cursive;
font-size: 250%;
color: rgb(200,50,50);
margin:0;
}
.header h2 {
font-family: 'Playfair Display SC', serif;
font-size: 450%;
color: rgb(59,67,68);
margin:0;
}
This is normal behaviour for these elements..
You forgot to take the default margin-top off of your h2 element. Simply add margin-top:0px; to your h2 class.
Here is a working jsFiddle.
Your class should now look like below:
.header h2 {
font-family: 'Playfair Display SC', serif;
font-size: 450%;
color: rgb(59,67,68);
margin-top:0px;
}
Here is an image from W3 regarding some default styles of elements:
See more about default styles of elements here on W3.org.