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.
Related
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>
<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
}
in above image you can see text "acceptable".
i want to change this font as text "contact us" font which is present below.
we are using
font-family: 'Roboto Condensed', sans-serif;
but it didt worked for us.
Well according to your code, you just have to change the font-size of p tag and you are done. To check the changes try to add Contact us next to acceptable and then you will see both are same. Happy to help :)
Use <span class="red">text</span> and some basic CSS like .red { color: red; }
lOOK AT THIS EXAMPLE
HTML
<span class="red">acceptable</span>
</p>
CSS
p {color: black;
font-size: 13px;
line-height: 26px;
text-align: justify;
}
.red { color: red;
font-family: 'Roboto Condensed', sans-serif; }
On this page: https://www.nycofficesuites.com/new/offices/, I want to change the font size on red bar across the top (where it says "Office Space"). I've entered this code but it's not working.
.page-title h1 {
font-size: 35px !important;
}
Thanks!
If you can't update the existing rule, your new rule will need to appear after the existing rule as they are both marked as "!important".
The existing rule is showing in "custom.css":
.page-title h1 {
font-size: 46px !important;
font-weight: normal;
}
In custom.css you have,
.page-title h1 {
font-size: 46px !important;
font-weight: normal;
}
Either edit that file or add/load your overriding css after custom.css (order of load matters, the last one is considered).
Side note: Try to avoid using !important as much as you can.
If this is something you are just messing with you can declare it inline.
<h1 style="font-size: 35px !important;">Office Space</h1>
Or
.header {
font-size:35px;
font-weight:bold;
font-family: 'Pontano Sans', Arial, sans-serif;
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
<span class="header">Office Space</span>
Just figured this out, thanks for your help everyone. The person who wrote the theme put this in a file called custom.css.php. So this was overriding the place where I was entering CSS. (This is a Wordpress site.)
I've got this HTML:
<article class="smallCaps">
Cap Anson <span><em>my</em></span> outboard<br />
Anyway...the reign in Spain falls mainly on the common folk<br/>
Note: This is a big secret. Don't tell <em>them</em>
</article>
<p> </p>
<hr />
...but the HR displays to the right of "Don't tell them" instead of on a separate line.
Here's the CSS:
<style type="text/css">
.smallCaps {
font-variant: small-caps;
font-family: "Segoe UI", sans-serif;
}
.comicSansLarge {
font-size: 32px;
font-family: "Comic Sans", Consolas, serif;
color: hsl(30, 100%, 50%);
}
</style>
Add this to your css:
hr {
clear:both;
display: block;
}
One possible cause would be that the article is floated. like this:
http://codepen.io/seraphzz/pen/jyngu
Something in your CSS is causing it but it's impossible to say what it is without seeing your css.