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.
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
Bit of a strange occurrence with my web page, currently trying to resize the font of a facebook like button I have on my website.
Currently the HTML I'm targeting is:
<span id="u_0_3">2.1k people like this. Be the first of your friends.</span>
In the google chrome console adding either of the following will change the font
1.
#u_0_3 { font-size: 14px }
2.
span#u_0_3 { font-size: 14px }
but adding either of these lines of code to my web pages stylesheet has absolutely no effect. No clue how to proceed from here as it works in one stylesheet and not the other?
The reason the styles aren't updating when adding the code to your stylesheet as opposed to in the browser is because you're trying to a stylesheet on an iframe, which isn't possible. You can however add the styles using jQuery or something along those lines.
Try this...
$("iframe#idhere").contents().find("span#u_0_3").css('font-size', '14px');
Ensure that you have added CSS file reference in your HTML.
Also, clear browser cache and load the page.
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'm working on a web page in Google Chrome. It displays correctly with the following styles.
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
It is important to note that I didn't define these styles. In Chrome developer tools, it says user agent stylesheet in place of the CSS file name.
Now if I submit a form and some validation error occurs, I get the following stylesheet:
table {
white-space: normal;
line-height: normal;
font-weight: normal;
font-size: medium;
font-variant: normal;
font-style: normal;
color: -webkit-text;
text-align: -webkit-auto;
}
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
The font-size from these new styles is disturbing my design. Is there a way to force my stylesheets and if possible, completely overwrite Chrome's default stylesheet?
What are the target browsers? Different browsers set different default CSS rules. Try including a CSS reset, such as the meyerweb CSS reset or normalize.css, to remove those defaults. Google "CSS reset vs normalize" to see the differences.
If <!DOCTYPE> is missing in your HTML content you may experience that the browser gives preference to the "user agent stylesheet" over your custom stylesheet. Adding the doctype fixes this.
Regarding the concept “user agent style sheet”, consult section Cascade in the CSS 2.1 spec.
User agent style sheets are overridden by anything that you set in your own style sheet. They are just the rock bottom: in the absence of any style sheets provided by the page or by the user, the browser still has to render the content somehow, and the user agent style sheet just describes this.
So if you think you have a problem with a user agent style sheet, then you really have a problem with your markup, or your style sheet, or both (about which you wrote nothing).
Marking the document as HTML5 by the proper doctype on the first line, solved my issue.
<!DOCTYPE html>
<html>...
A user agent style sheet is a ”default style sheet” provided by the browser (e.g., Chrome, Firefox, Edge, etc.) in order to present the page in a way that satisfies ”general presentation expectations.” For example, a default style sheet would provide base styles for things like font size, borders, and spacing between elements.
It is also common to use a CSS Reset to normalize or remove inconsistencies between browsers due to differences between which base styles are applied by each browser.
From the specification...
A user agent's default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language. ~ The Cascade.
For more information about user agents in general, see user agent.
Answering the question in title, what is the user agent stylesheet, the set of default styles in the browser: Here are some of them:
Chromium (Chrome): https://chromium.googlesource.com/chromium/src/third_party/+/master/blink/renderer/core/html/resources/html.css
WebKit (Safari): https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Gecko (Firefox): https://searchfox.org/mozilla-central/source/layout/style/res/html.css
Serenity: https://github.com/SerenityOS/serenity/blob/master/Userland/Libraries/LibWeb/CSS/Default.css#L4
Mozilla Servo: https://github.com/servo/servo/blob/master/resources/user-agent.css#L9
Personal opinion: Don't fight with them. They have good default values, for example, in rtl/bidi cases and are consistent nowadays. Reset what you see irrelevant to you, not all of them at once.
Define the values that you don't want to be used from Chrome's user agent style in your own CSS content.
Some browsers use their own way to read .css files.
So the right way to beat this:
If you type the command line directly in the .html source code, this beats the .css file, in that way, you told the browser directly what to do and the browser is at position not to read the commands from the .css file.
Remember that the commands writen in the .html file is stronger than the command in the .css.
I had the same problem as one of my <div>'s had the margin set by the browser. It was quite annoying but then I figured out as most of the people said, it's a markup error.
I went back and checked my <head> section and my CSS link was like below:
<link rel="stylesheet" href="ex.css">
I included type in it and made it like below:
<link rel="stylesheet" type="text/css" href="ex.css">
My problem was solved.
I just wanted to expand on the response from #BenM based on what I read here from Ire Aderinokun. Because the user-agent stylesheet provides helpful default styling, think twice before overriding it.
I had a dumb error where a button element didn't look right in Chrome. I had partially styled it because I didn't want it to look like a traditional button. However, I left out style elements like border, border-color, etc. So Chrome was stepping in to supply the parts that it thought I was missing.
The problem went away once I added styles like border: none, etc.
So if anyone else is having this problem, make sure you are explicitly overriding all the applicable default user-agent styles for an element if you notice it looks wonky, especially if you don't want to reset the user agent styles completely. It worked for me.
Each browser provides a default stylesheet, called the user agent stylesheet, in case an HTML file does not specify one. Styles that you specify override the defaults.
Because you have not specified values for the table element’s box, the default styles have been applied.
I ran into this same issue, it was because I was working with non-semantic html
<!--incorrect-->
<ul class="my-custom-font">
<button>
<a>user agent styles applied instead of my-custom-font</a>
<button>
</ul>
<!--correct-->
<ul class="my-custom-font">
<li>
<a>now inherits from from my-custom-font</a>
</li>
</ul>
Once the HTML was updated, styles were applied correctly
Every browser will have a rendering engine responsible for converting HTML document to web page.
The rendering engine will have a stylesheet of its own for all the HTML elements, a kind of default stylesheet for all the HTML elements and this stylesheet is called user agent stylesheet.
The rules of user agent stylesheet can be overwritten by author stylesheet.
The rendering engine for google chrome browser is called 𝐛𝐥𝐢𝐧𝐤. And if you look through its source code you will be able to find the default stylesheet.
check this https://www.linkedin.com/posts/smruti-sagar-pattanaik-a3a000195_html-css-chrome-activity-7027888128115847168-USil?utm_source=share&utm_medium=member_desktop
I have a solution. Check this:
Error
<link href="assets/css/bootstrap.min.css" rel="text/css" type="stylesheet">
Correct
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
Put the following code in your CSS file:
table {
font-size: inherit;
}