I've downloaded a big webtemplate with many different css and js files. Now my website looks good but there still some little things I want to change. Like the font-style, colors and other things.
Now my problem is that I'm not able to overwrite the css from another files.
I want to change the font-family of my webpage. Now the normal content inside my tags, the navbar and and and... they all got the new font-family. But every tag still got the old font family. I tried it with:
font-family: 'Roboto', sans-serif !important;
but this haven't changed a thing and I don't really want to overwrite the css files that came from the template.
is there a way that my custom.css gets more important then the other files? Or any other trick?
Change your selector to
* {font-family: 'Roboto', sans-serif !important;}
If you do not want to overwrite the css file, you have to find the class or the id of the elements you want to change in the css file of the template that you downloaded, then you can change it.
Related
on my wordpress website theme, there is a CSS property (font-variant-ligatures) by default added that I cannot find and remove but I need to disable or bypass this property using any other css file with !important.
Actully, this property is creating chaos in my font that font characters gets smashed in each other. When I turn off this CSS property in Chrome Browser's Inspector, then font looks good.
Currently it is written as in Wordpress CSS:
font-variant-ligatures: none;
I cannot delete this property, but I can override it with a better one by adding some other line in another CSS file. Can you resolve it?
I resolved this issue by adding this line into another new CSS file for overriding:
font-variant-ligatures: normal !important;
Hi I have a CSS file that holds all my css code for ten or so pages.
I am having issues with CSS classes being ignored.
I have p tags in the body that belong to their own class.
When testing on my local machine they work good and follow their own classes CSS.
However once I upload the site to my host the p tag's class is ignored and it follows the body's CSS.
Can someone please show me what I'm missing.
(Note I tested in Chrome and Safari)
HTML for p tag:
<p class="tinyText">Sample text here</p>
CSS:
body {
background: black;
font-family: Papyrus;
font-size:20px;
color:white;
}
.tinyText{
font-family: Times New Roman, Times, serif;
font-size:20px;
}
EDIT:
On hosted version, inspected element and followed CSS path. It is reading an old version of the CSS file. But the hosted version is the most updated, I double checked. I tried clearing cache and other data but its still getting that old version. How can I force it to get the new version?
CSS Specificity is the answer (as to why your style is being overridden). An ID in the selector adds a higher specificity than your two-class style.
You need to either be more specific on your style (maybe add more classes or add more root elements to increase its value) or (as you mentioned) create an ID that would out-weigh the current stylesheet.
You can also use !important, but many would argue that as hack-ish considering it's primary intent is for client-side customizations (for accessibility).
You should add more css to the p element and see if it gets applied as now only there are two properties, one is font-size which is same as body and other is font-family which you have set to Times New Roman, Times, serif. If these font is not available than it will take body font as fallback.
.tinyText{
font-family: Times New Roman, Times, serif;
font-size:30px;
color: red;
text-align: center;
/*add more css rules here*/
}
Also do a hard refresh or open in incognito mode and do inspect element and see what all elements are coming and what rules are applied.
Also make sure css is called properly in header.
Also avoid using !important and use of ID.
Thanks
first thing you want to do is Create or use a CSS Reset sheet. here is a popular one.
http://meyerweb.com/eric/tools/css/reset/
and add this to the top of your css file.
Some browsers have their own settings for CSS so you always want to take this into account. Now what you want to do is always use inspect element and see if you can see any styles or CSS properties being applied to it. Also use codepen.io this is a great website to link people to your issues and also use to see what things will look like
try avoiding capital in class Name .. jus keep it as tinytext.. at css and class declaration in html
I'm trying to create a website via semantic-ui, and my editor is Sublime Text 2, and my virtual server ix XAMPP.
I need to use a custom font for whole body text.
i have created a main.css file (which is linked in head of course), and i have put the fontface like this:
#font-face {
font-family: "Dinar One Medium_MRT";
src:url('../fonts/Dinar One Medium_MRT.ttf') format('truetype');
}
i have created another snippet called body and it's like:
body{
font-family:'Dinar One Medium_MRT';
margin: 0;
padding: 0;
}
but when i run the website, my font isn't applied to texts. i have tried many things but didn't work.
i appreciate any help.
tnx for your time!
Following are the generic approaches that can help you to resolve this issue:
a. First check whether semantic-ui.css files load before your custom css file. Your custom css file must load after semantic to have higher precedence.
b. Font property is an inheritable CSS property. It means that if you have applied it on the body tag then all the html elements will inherit it from body tag provided no intermediate element have different value of font-family property specified. Make sure that no such element exists in your DOM. Also, your font-file should show up in the network tab with 200 status.
c. Calculate the specificity of the font family property of the elements. Sometimes, we do not get expected results even after downloading of the new fonts because our font-family has lower specificity(precedence).
Since you want to override all the font in the body, you just need to use the site.overrides file alongside the site.variables file located in src/site/globals
In the site.variables, set the #fontname variable
#fontName : fontname;
In the site.overrides file, insert your #font-face css rule
#font-face {
font-family: fontname;
src:url('/link/to/font/fontname.ttf');
}
You of course need to have gulp-watch running in node.js and save these changes
I have read a lot about the CSS priorities and !important declarations, but still I see something strange happening in this site.
The theme came with one main style.css file and several other .css files, that basically change only the colors. So that one theme could be in yellow, pink, white, etc.
Since I don't need all of them, I am trying to merge the file bianco.css with the style.css in order to have only 1 file.
I have already merged (deleted from bianco.css) a lot of classes, and all is working fine. But still I need to merge a lot of them.
Now I am struggling with the following.
In the main style.css I have
body{font-family: pt-serif, sans-serif, Georgia, Helvetica, Arial;font-size:13px;background:#fff;line-height:154%!important;}
And in the bianco.css I have
body{background-color:#FFF!important;font-size:13px;line-height:154%;}
I know that if a specific property is selected in two different files, then the latest one is the one that will be applied. But if there is only 1 property declared, then only this one will be chosen and applied. It doesn't matter in which file it is, the important is for the filed to be loaded.
So if I try to remove that whole line from the bianco.css file, then the fonts in the site get bigger. This is strange. The file style.css is loaded and I can see the font-size:13px; loaded in the Chrome developers tool, but it's ignored for some reason. And I don't see any other style rool that may be overriding the font size.
Does anybody know what's going on here? What is making the style.css rule to be ignored?
If you remove the 13px from bianco.css it takes style from some slideshow.css and this is the corrosponding line
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,nav,section
{ margin:0;
padding:0;
border:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}
this is the reason why fonts get bigger try editing/removing this. it will accept style.css 13 px font size
I want to use a single font named "Algerian" across my whole website. So, I need to change all HTML tags and I don't want to write different code for different tags like:
button{font-family:Algerian;}
div{font-family:Algerian;}
The method written below is also highly discouraged:
div,button,span,strong{font-family:Algerian;}
Put the font-family declaration into a body selector:
body {
font-family: Algerian;
}
All the elements on your page will inherit this font-family then (unless, of course you override it later).
*{font-family:Algerian;}
better solution below
Applying a single font to an entire website with CSS
The universal selector * refers to all elements,
this css will do it for you:
*{
font-family:Algerian;
}
But unfortunately if you are using FontAwesome icons, or any Icons that require their own font family, this will simply destroy the icons and they will not show the required view.
To avoid this you can use the :not selector, a sample of fontawesome icon is <i class="fa fa-bluetooth"></i>, so simply you can use:
*:not(i){
font-family:Algerian;
}
this will apply this family to all elements in the document except the elements with the tag name <i>, you can also do it for classes:
*:not(.fa){
font-family:Algerian;
}
this will apply this family to all elements in the document except the elements with the class "fa" which refers to fontawesome default class,
you can also target more than one class like this:
*:not(i):not(.fa):not(.YourClassName){
font-family:Algerian;
}
* { font-family: Algerian; }
The universal selector * refers to any element.
Ensure that mobile devices won't change the font with their default font by using important along with the universal selector * :
* { font-family: Algerian !important;}
As a different font is likely to be already defined by the browser for form elements, here are 2 ways to use this font everywhere:
body, input, textarea {
font-family: Algerian;
}
body {
font-family: Algerian !important;
}
There'll still have a monospace font on elements like pre/code, kbd, etc but, in case you use these elements, you'd better use a monospace font there.
Important note: if very few people has this font installed on their OS, then the second font in the list will be used. Here you defined no second font so the default serif font will be used, and it'll be Times, Times New Roman except maybe on Linux.
Two options there: use #font-face if your font is free of use as a downloadable font or add fallback(s): a second, a third, etc and finally a default family (sans-serif, cursive (*), monospace or serif). The first of the list that exists on the OS of the user will be used.
(*) default cursive on Windows is Comic Sans. Except if you want to troll Windows users, don't do that :) This font is terrible except for your children birthdays where it's welcome.
Please place this in the head of your Page(s) if the "body" needs the use of 1 and the same font:
<style type="text/css">
body {font-family:FONT-NAME ;
}
</style>
Everything between the tags <body> and </body>will have the same font
Ok so I was having this issue where I tried several different options.
The font i'm using is Ubuntu-LI , I created a font folder in my working directory. under the folder fonts
I was able to apply it... eventually here is my working code
I wanted this to apply to my entire website so I put it at the top of the css doc. above all of the Div tags (not that it matters, just know that any individual fonts you assign post your script will take precedence)
#font-face{
font-family: "Ubuntu-LI";
src: url("/fonts/Ubuntu/(Ubuntu-LI.ttf"),
url("../fonts/Ubuntu/Ubuntu-LI.ttf");
}
*{
font-family:"Ubuntu-LI";
}
If i then wanted all of my H1 tags to be something else lets say sans sarif I would do something like
h1{
font-family: Sans-sarif;
}
From which case only my H1 tags would be the sans-sarif font and the rest of my page would be the Ubuntu-LI font
in Bootstrap,
web inspector says the Headings are set to 'inherit'
all i needed to set my page to the new font was
div, p {font-family: Algerian}
that's in .scss
*{font-family:Algerian;}
this html worked for me. Added to canvas settings in wordpress.
Looks cool - thanks !