When i click on "live sever" from visual studio it opens Google Chrome but my css is not working. When i copy the link on Brave it works...
[This is the CSS]
* {
color: green;
}
#parrafo {
color: blue;
}
p {
color: red
font-size: 24px;
}
Here is how the html shows in Chrome. And the devs console. It's all in green!
Brave. There is not green at all and i think this is the right html.
Even the console styles is different...
"inherited from p" says in chrome.
Why is not working correctly? I'm new at this.
i'd like to know if the live server is not working or if my css styles sheet is wrong.
The problem in the code shown is that the text is within a font HTML element.
You have set everything to have color green except for p elements.
So the font element is correctly picking up the green setting.
Here's a simplified example:
* {
color: green;
}
p {
color: red;
}
<p>
<font>this is within a font element</font>
</p>
Nowadays the font tag is deprecated (see MDN) but if you for some reason need to keep it then you want in this case for the font element to inherit the p color.
However, you might like to take this opportunity to change the font element to something else (e.g. span, it depends on your use case) and make p span inherit the p color.
Related
One of the weirdest CSS issues I've seen. The .product-bottom and .product-title classes have the font-family: Roboto. This displays fine in IE and Chrome. Inspecting the elements in Firefox, the font is apparently used on the element and is successfully used throughout the site in other elements.
Editing the font-family attributes when inspecting the element has no affect on it. The computed css values show !important is not used. When used in the inspector on font-family, it has no affect. There are no jQuery or CSS errors, though there are plenty of CSS warnings.
The site is [removed after fix].
Screenshot of the font issue in FF. Problem text is: "Grey Hair Color Body Wave Human Hair Weave"
Disable
.product-title {
text-transform: full-width;
}
and it looks fine. The full-width value is only experimental and mainly supposed to be used with square letters like in Chinese.
Replease this css:
.product-title {
text-transform: full-width;
}
with this:
.product-title {
text-transform: capitalize;
}
Really small thing, but I've got these calendar icons on my Joomla front-end edit page, on publishing buttons. I'm using the Unicode character U+1F5D2 for this, but I can't seem to change its color with CSS. I'm trying to make it white, the browser inspector says it's white, but it's clearly not.
See example here
I don't know if Unicode is supposed to do this, and I've never had a problem with it until I used this particular character.
The character is called by a :before on a span element with class="icon-calendar". I've tried changing the color attribute on several different levels of the element, including the :before and the span itself, but none of them take effect.
#adminForm a.btn,
#adminForm button.btn {
background-color: #0e71b8;
color: #ffffff;
}
#adminForm button.btn:before {
color: #ffffff;
}
Anyone know if this is supposed to happen and/or how to get around it?
I had a similar problem. Looks like some unicode characters have the color, and outlines baked into them and can't be changed by css.
So the options are:
Find alternative unicode character that can be changed in CSS
Use font icons
Use an image
Seems to work using the HTML Entity.
* {background: #000; font-size: 1.4em;}
.cal {color: #fff;}
<span class="cal">๐
</span>
Updated for :pseudo
You should have mentioned the pseudo in your question.
Looking at your CSS you arn't targeting the :before pseudo
#adminForm a.btn:before,
#adminForm button.btn:before {
color: #fff;
}
Bart,
Problem without font-family or depend your Base CSS Normalize, but you can try ur code "Fonts Googleapis" is work font-face to change a color. Sorry bad english.
See:
http://codepen.io/KingRider/pen/QGeMoQ
Why not try plugin 'Font Awesome' is best
http://fontawesome.io/examples/
I have a blog but most text seems to get underlined automatically. I am trying to find the text-decoration: underline but I can't seem to locate it. This is my blog
www.latestforpc.com
This is the line that causes the underline but I can't find it in style.css
a:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
Web browsers are designed to add default styling to page elements even without that styling being explicity mentioned in the page's stylesheet. In order to change this default behavior, you have to add this code to style.css:
a { text-decoration: none; }
This will overwrite the browsers default styling for your links, and in this case, remove the underline.
If you inspect a link in your browser, like you did, you can find that style, and it also shows you in which CSS file the style is declared.
In this case it says 'User agent stylesheet'. That actually means that it is a default style in your browser (the stylesheet that is built in into your user agent). So that's why you cannot find it.
Now, to fix it, you can add a rule to style.css that overrules this default style:
a {
text-decoration: none;
}
That should be enough. The styles in your css file have higher priority than the defaults of the browser.
Just add the following at the bottom of your CSS;
a {
text-decoration: none;
}
and if you want your links to appear underlined when hovering over them, also add;
a:hover {
text-decoration: underline;
}
Done!
It looks like you have multiple style sheets on your site, so that style could be in any of the style sheets. You might try adding the following in your master css file to override the other style sheets:
a { text-decoration: none !important;}
There are many "browser stylesheets" in browsers like user agent stylesheet in chrome. They are pretty good but sometimes we need to get rid of them. So we use "reset.css"
Or you can only add
* {text-decoration:none;}
if you just want to get rid of the underline
Is there a way to reset visited and unvisited link colours to the browser default after they have been changed?
In my specific situation, I have a main style file containing:
a:link { color: black; }
a:visited { color: black; }
And I would like to have a few specific links rendered with the default colours.
EDIT: Here is a jsFiddle to play with. I would like a style for the default class that makes it match the browser default.
Edit:
Another way is avoiding the problem from the beginning. Give the special links you want to be with the default style a special class (let's call it .default), and instead of:
a:link { color: black; }
a:visited { color: black; }
Use the not pseudo class and write:
a:not(.default):link { color: black; }
a:not(.default):visited { color: black; }
Notice that this pseudo class doesn't work on IE 8 and lower. For them you can use a special CSS (I don't like it, but it'll work).
It is different for each browser.
What you would have to do is get a stylesheet from the browser you are trying to reset (Gecko, WebKit, or Trident) and make that the new default.
Source: Browsers' default CSS for HTML elements
What you're looking for is revert keyword, but it's not yet implemented in most browsers, currently only Safari supports it. The links to track the development per browser are listed in the Browser compatibility section on MDN.
Some day this should work everywhere:
a { color: red; }
a.reverted { color: revert; }
red <a class="reverted" href="#">default</a> red
But for now think about a workaround. The feature is just not there yet.
If that is the only css controlling your a tags then just remove those and that will take off any styling. You could also just change the color?? Like so...
a:link {color: blue;}
a:visited {color: purple;}
Nowadays we can do something like this:
<head>
<style>
:link { color: black; }
:visited { color: black; }
.default-color :link { color: LinkText; }
.default-color :visited { color: VisitedText; }
</style></head>
<body>
<a href='#'>link</a>,
<span class='default-color'>
<a href='#'>link</a></span></body>
The second link renders with default colours.
See: CSS Color Module ยง System Colors
You can only fiddle with the URL. Browsers record the URLs they've visited. If they're rendering a page, and a particular URL appears in that list, then url is colored as "visited".
You can't force a browser to treat a URL as visited, unless they've actually been there. But you CAN make a visited URL appear as "new" by adding something different to the url, so that it APPEARS new to the browser. e.g.
example.com/foo.php
example.com/foo.php?random=value
both point at the same script, but the browser will treat both as "different". If that random value changes each time, the the browser will effectively think each time it's a brand new url and color it as "new".
I guess one question to ask here is: why? Why would you want to do that in the first place? To my knowledge, there's no W3C standard delineating what default link colors should be, anyways. A value (such as default) for color wouldn't make sense at all, seeing as that the isn't a default value.
With that being said, the most logical way to go about this would to just style things yourself. I'm not sure what situation your in, but whatever the case is, I'm pretty sure you're doing something wrong if you're asking how to restore colors to the browser default. So, before I give you a rather dry solution, I'll ask: can you give us some context? In the case that you're making something like menu bar links and you don't want the same styling for those menu bar links to leak into your normal links, you should really be using some kind of container to select those links in.
Anyways, here comes that dry solution. Most browsers use blue for links, purple for visited links, and red for active links. So, something like the following would work for browsers that go by these colors (assuming that the user hasn't modified the browsers' styling sheet, in which case you may want to learn about that or use something like initial, examined in Itay's answer).
a:link, a { color: blue; }
a:visited { color: purple; }
a:active { color: red; }
enter code herea.class{
color:inherit;
}
Specifies that the color should be inherited from the parent element.
so if your body was color:blue; then followed by a.class{color:inherit} then those examples would be blue. at the same time, you could just use a.class:link{color:blue}. and another for when you visit the link.
Your best with just customizing classes of links of special interest and leaving the rest by default.
No, you cannot set any CSS property to the browser default if it has been changed (i.e., if there is any style sheet being applied that assigns a value to the property. This follows from basic principles of CSS.
So consider asking a different question. There are ways to limit the effect of CSS rules to specific elements, instead of e.g. preventing all links from looking like links.
Just style the ones you want to style by setting a class on them.
.class:link{}
.class:visited{}
Then leave the others default.
You can use this:
a {
color: inherit;
}
That will inherit, and as there is no other link color so the browser will give the link its own style!
I was wondering if there is a way to give a page title a different color and font in the page tab. Something like:
title{ color: red; font: 12px tahoma;}
Just thought it would be fun to add into sites. I tried the above and it didn't work in my CSS file. Also tried giving it a class="title"giving it a CSS style of .title{ color: red; font: 12px tahoma;} but that didn't work either.
Answer is NO you cannot do that in any way....you cannot apply any styles to page title, btw you can just blink the titles
Blinking Titles
More Info On CSS Which You Are Using:
If you are declaring something like this
title{ color: red; font: 12px tahoma;}
You don't need to define any class as you are targeting specific title tag which is only 1 in your whole document
And if you are using .title than your CSS should be
.title{ color: red; font: 12px tahoma;}
The previous answers are correct, but, you can sort of get different fonts if they are defined in unicode. I don't know how to explore this, but, for example, there's the regularly written word javascript and then there's this title I coped from reddit.com/r/javascript source code: ๐๐๐๐๐๐๐๐๐๐ - notice how they are slightly different.
Regular without code delimiters: javascript
Reddits title without code delimiters: ๐๐๐๐๐๐๐๐๐๐
You can copy past these characters anywhere and they are going to look different, because they are technically _different characters. There's a and then there's ๐ - I grabbed this from the javascript word I previously pasted.
I don't know where these characters came from. I don't know how to type them. I don't know where one could copy paste them from.
But it proves an interesting point - any emoji can be used in these titles, you can copy paste from https://www.emojicopy.com/
If you are talking about the <title></title> section then no you can't style it.
If you are talking about the title of a page as in a header tag such as h1 or h2 then yes you can style those using normal CSS styling techniques such as
.title { color: #1A1A1A }
<h1 class="title">My Awesome Title</h1>
You can style the <title> tag, just add "display:block" or "display:inline" to it.
title {
display:block;
color:red;
font:12px tahoma, serif;
}
that way it should appear inside your page with the same content of the tab on the browser, for instance.
As for the Page Title, i have seen that it is possible to style it, someway. probably with shadow dom.