I've got this html:
<p>
<span class="fancify">Parting is such sweet sorrow!</span><span> - Bill Rattleandrollspeer</span>
</p>
...and this css (added to the bottom of Site.css):
.fancify {
font-size: 1.5em;
font-weight: 800;
font-family: Consolas, "Segoe UI", Calibri, sans-serif;
font-style: italic;
}
So, I would expect the quote ("Parting is such sweet sorrow!") to be italicized, and of a different font than the name of the quotee (Bill Rattleandrollspeer), since its span tag has the class "fancify" attached to it. The class should certainly be seen, as the file in which it appears references the layout file which uses the Site.css file.
What rookie mistake am I making now?
UPDATE
I thought maybe the problem was that I had added the new class in Site.css following this section in that file:
/********************
* Mobile Styles *
********************/
#media only screen and (max-width: 850px) {
...but I moved it above there, and it is still not working, and not seen via F12 | Inspect element for the label in question.
I moved the reference to Site.css below the bootstrap.css file, which does indeed change the appearance of that text, but still not italicized, and still not seen in the element inspector...
UPDATE 2
Here's how the HTML is coming down:
<p>
<span>
<label class="fancify">Parting is such sweet sorrow!</label>
...and here's my css rule in Site.css:
p span label .fancify {
font-size: 1.5em;
font-weight: 800;
font-family: Consolas, "Segoe UI", Calibri, sans-serif;
font-style: italic;
display: inline;
}
...but it's not being recognized. I consider this a breech of css/html protocol, and should be adjudicated by some world body. Then again, I could be making some silly mistake somewhere.
There could be an error earlier in the CSS file that is causing your (correct) CSS to not work.
Have you tried forcing the selectors to be in the front of the class?
p span label.fancify {
font-size: 1.5em;
font-weight: 800;
font-family: Consolas, "Segoe UI", Calibri, sans-serif;
font-style: italic;
}
Usually it will add more weight to your CSS declaration.
My mistake ... There should be no space between the selector and the class.
The same goes for the ID. If you have for example:
<div id="first">
<p id="myParagraph">Hello <span class="bolder">World</span></p>
</div>
You would style it like this:
div#first p#myParagraph {
color : #ff0000;
}
Just to make a complete example using a class:
div#first p#myParagraph span.bolder{
font-weight:900;
}
For more information about pseudo-selectors and child selectors : http://www.w3.org/TR/CSS2/selector.html
CSS is a whole science :) Beware that some browsers can have incompatibilities and will not show you the proper results. For more information check this site: http://www.caniuse.com/
Posting, since it might be useful for someone in the future:
For me, when I got here, the solution was browser cache. Had to hard refresh Chrome (cmd/ctrl+shift+R) to get the new styles applied, it seems the old ones got cached really "deep".
This question/answer might come in handy for someone. And hard refresh tips for different browsers for those who don't use Chrome.
I was going out of my mind when a rule was being ignored while others weren't. Run your CSS through a validator and look for parsing errors.
I accidentally used // for a comment instead of /* */ causing odd behavior. My IDE said nothing about it. I hope it helps someone.
Maybe your span is inheriting a style that forces its text to be normal instead of italic as you would like it. If you just can't get it to work as you want it to you might try marking your font-style as important.
.fancify {
font-size: 1.5em;
font-weight: 800;
font-family: Consolas, "Segoe UI", Calibri, sans-serif;
font-style: italic !important;
}
However try not to overuse important because it's easy to fall into CSS-hell with it.
For me, the problem was incorrect content type of the served .css file (if it included certain unicode characters).
Changing the content-type to text/css solved the problem.
I know this is an old post but I thought I might add a thought for people who come across a similar problem. I'm assuming that you are using ASP.NET MVC since you mentioned site.css. Check your Bundles.config file to see if you have BundleTable.EnableOptimizations = true; If you don't, then it can be your problem since this allows the program to be bundles and "minified". Depending on if you run in debug mode or not this could have an effect.
In addition to the solutions posted above, having gone through the exact same problem, make sure you check your HTML. More specifically whether you've properly labelled your elements, as well as class and id selectors. You can do this either manually or through a validator (https://validator.w3.org/).
For me, I missed the equal sign next to the class (<div class someDiv> vs <div class = "someDiv">, hence why no CSS property was applied.
I had a similar problem which was caused by a simple mistake in CSS comments.
I had written a comment using the JavaScript // way instead of /* */ which made the subsequent css-class to break but all other CSS work as expected.
Reasoning for my CSS styles not being applied, even though they were being loaded:
The media attribute on the link tag which was loading the stylesheet had an incorrect value. I had inadvertently set it to 1 instead of all. This meant the browser was ignoring those styles in that linked stylesheet.
Broken:
<link rel="stylesheet" type="text/css" href="css/style.css" media="1" />
Corrected:
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
For me, it was the local overrides in Sources -> Overrides.
A file gets saved locally whenever you change the styling of a page and chrome uses that file to override the server's css.
Clear the cache and cookies and restart the browser .As the style is not suppose to change frequently for a website browser kinda store it .
I also faced this issue. And this how it got resolved!
My css filename was gt.css. I was working on Visual Studio (eg.2017).
I went to solution explorer (press Ctrl+Alt+L) and searched gt.css
(enter your css filename). Right click on your css filename and then
on Bundler and Minifier (4th option curently) and then Re-Bundle file
(or directly press Shift+Alt+F).
Save any unsaved file, then empty cache and hard reload your web browser.
You can learn more about Bundler and Minifier here.
I had custom styling applied only on some elements (rows of table). I use Bootstrap. This was caused by having "table-striped" class. Once removed, all required rows had the custom class applied correctly.
A key point, here, may be the way the CSS rules propagate. Some rules are more important than others, so CSS rules do not always "cascade" in the way you might imagine that they ought to. This precedence of CSS rules is known as specificity - see (for example) description at w3schools.com
So, if you have a P element inside a DIV, you can control the font color with, say,
DIV P.highlight { color: red; }
If you have a later CSS instruction, like
.highlight { color: green; }
then it will NOT override the earlier instruction. This has confused me greatly, especially when loading multiple CSS files and naively thinking that I could override the earlier CSS.
I'm too used to setting the className attribute in JSX with React, but not too used to setting the class attribute in plain old HTML. So my mistake when spinning up a quick CodePen was setting a classname attribute, which sets no actual class whatsoever in plain HTML. The correction was, of course, to give the element a class instead.
Hard reload your chorome Shift+F5
Look at the spacing between selectors.
p span selects all span in p
span label selects all label in span
p span label selects all label in span in p
so label .fancify selects all .fancify in label
there is nothing of class fancify in label. label is on the same level, not above
so label.fancify
Related
In my codepen I placed <strong></strong> tags within a paragraph, but I noticed no emphasis being displayed. Chrome developer tools shows the user agent stylesheet for strong has a line through it. What could possibly be disabling this setting as I do not override strong myself or change any font-weight within my code?
I am using chrome version 56.
<p id="p10">offset() - Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document. <strong>[returns: object]</strong>
</p>
Your codepen calls this reset stylesheet (the classic "Eric Meyer Reset"):
https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
This resets all internal browser styles (i.e. it overwrites them), so you have (among many others) to add your own CSS for the strong tag with a rule like
strong {
font-weight: bold;
}
Or you just erase the reference to that reset style sheet...
Just as a reaction to the downvote: what do you think this is:
Is it possible that you are setting the font-weight or calling font: inherit on the <p> tag or possibly from the id?
As other answers have stated, you are probably overwriting this in your css reset file:
https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
You could redeclare it as follows:
strong {
font-weight: bold !important;
}
Is it possible that you are setting the font-weight or calling font: inherit on the tag or possibly from the id? I think that might be overwriting the tag. You could redeclare it as follows:
strong { font-weight: bold; }
If the above solution does not work, try using it with !important, like this:
strong { font-weight: bold !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 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;
}
As I mentioned in the title, when using css font-family, custom font (font-face), it messes up (black background, black text (I guess)) auto complete drop down list in Opera.
input[type='text'], input[type='password'], input[type='email'], input[placeholder] {
font-size: 1.2em;
font-family: sans-serif;
color: #2A873A;
padding-left: 25px;
}
Code above works fine, but if I replace "font-family: sans-serif;" with some font-face font (google web fonts too), then problem starts.
Here is the screenshot of "bug" in action.
P.S. I should mention that that is Opera's native autocomplete, not custom js, dropdown list.
EDIT:
http://jsfiddle.net/burCR/
Have you tried specifying the font directly in your css? for example:
div.magicsomething {font-family:CustomFont,Customfont2,sans-serif;}
Keep in mind nested elements get stuck with custom fonts, so if you don't do the above, you may also very well need font-family:inherit in your 'nested elements'.
For extra help, please mention the name of the custom font, your full css and a live link to your site
Although this may be something obvious, check to make sure that your font is compatible with Opera. Here is a list of some web safe fonts.
http://www.w3schools.com/cssref/css_websafe_fonts.asp
And if that doesn't work try taking the font you want from microsoft word and use #fontface to insert you custom font instead of using a websafe one.
And finally try using your font-family on the form and have the input inherit the font.
Hopefully this helped.
Ditto to specifying the font directly. You may also want to try using base64 encoding, which in my experience works beautifully and with great cross-browser compatibility.
You can specify colors for both the background and the text individually.
input {
background-color: white;
color: black;
font-family: "My Fontface Font", Verdana, ms serif;
}
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 !