I'm trying to style some links such that they appear bold if not visited before, and appear as normal if they have been visited before.
HTML:
Facebook<br>
A Random StackOverflow Question
CSS:
a {
font-weight: bold;
text-decoration: none;
color: #373837;
font-size: 16px;
}
a:visited {
font-weight: normal;
}
a:hover {
text-decoration :underline;
}
Fiddle.
For some reason, whether or not the links were visited before, they appear bold.
I also tried modifying the CSS:
a {
text-decoration: none;
color: #373837;
font-size: 16px;
}
a:visited {
font-weight: normal;
}
a:link {
font-weight: bold;
}
a:hover {
text-decoration :underline;
}
Fiddle. It still doesn't work.
Any idea how to fix this?
(I am using Chrome btw)
The reason is that not all attributes are allowed for the :visited pseudo selector. See MDN.
You could use other attirubtes, such as color: green.
It seems like a browsers limitation.
It seems like a browsers limitation.
"For many years the CSS :visited selector has been a vector for querying a user’s history. It’s not particularly dangerous by itself, but when it’s combined with getComputedStyle() in JavaScript it means that someone can walk through your history and figure out where you’ve been. "
read about it here
It's not font-weight: normal that don't work it's your browser.
Because if you add font-weight: normal on the hover property it will work.
Look at this answer
Related
I don't know why I am getting this 3d effect in words. How can I remove the effect and flatten the words?
The font family is Poppins
body {font-family: "Poppins";}
You can do any formatting with CSS.
a {font-style: normal;}
will make font style as normal
There may be a CSS conflict. Try this. Change class & the colors as suitable.
add
text-shadow: none;
.text-class
{
text-shadow: none;
background: #333;
color: #fff;
}
I'm trying to style the font in an input button as bold.
Here's my code:
<input type="submit" id="nm-match" class="nm-button" value="Match" />
Here's my CSS:
.nm-button {
text-transform: uppercase;
padding: 5px;
color: blue;
font-weight: bold;
}
All the styles are being applied apart from the bold.
Here's a JSFiddle showing the problem: http://jsfiddle.net/CJg43/1/
UPDATE: Why the close votes? Here's a screenshot of how it looks for me, in Chrome on MacOS:
UPDATE 2: ... and for comparison, here's how it looks with the solution (background-color: white) applied - http://jsfiddle.net/CJg43/23/
Are you using chrome for a MacOS? If so, try adding a background-color to the button to see if it fixes it. The default Aqua styles might be interfering. You can also try -webkit-appearance: none; or -webkit-appearance: button;.
When you use numeric values with the font-weight property and you want to use bold then use the value greater than or equal to 700
.nm-button {
text-transform: uppercase;
padding: 5px;
color: blue;
font-weight: 700;
}
Js Fiddle Demo
I have a client that has an existing blog through Squarespace. I am taking over the website, and am coming across some code I have never seen before. We have an issue with fonts rendering correctly across all browsers. When I inspect the elements in question, I find some very strange CSS code. I have noticed on many elements such as h1, that there are repeated rules in the CSS. See below for example:
#topNav nav, #topNav ul, #topNav li, #topNav a
{
font-family: Georgia,serif;
font-weight: normal;
font-style: italic;
line-height: 1.6em;
font-size: 13px;
text-transform: normal;
letter-spacing: 0px;
font-family: "Helvetica Neue","Arial","sans-serif";
font-size: 30px;
line-height: 4em;
text-transform: capitalize;
text-decoration: none;
letter-spacing: -1px;
font-weight: bold;
font-style: normal;
}
As you can see, there are several repeated rules. What are the consequences of this CSS code? Could this cause the code to be styled differently on different browsers?
This is an extremely large website, so I am hoping this wasn't a habit of the last developer to code like this. Should cleaning the styles up be my top priority? Any opinions would be fantastic!
Thanks!
I would have to say that it is just poor coding. As for the impact on rendering, I would think that the last instance of the style would take precedence since the whole nature of CSS is "cascading" inheritance.
A simple experiment or two should yield the answer to your question.
Is there a way to make the First letter a bit more thinner or vice verca? Please see the image and css provided.
css:
table.form td {
padding: 10px;
font-family: "Open Sans";
font-variant: small-caps;
font-size: 15px;
}
As you can see the first letter of each word which is capitalized is a bit more black/bolder
For the first letter of each word not.
But you can for the first letter in the td element using the :first-letter pseudo selector
For only enlarging the first letter of each word you could use the text-transform:capitilize
Demo with both tricks : http://jsfiddle.net/gaby/8KjT5/1
Alternatively if using jquery you could use the Lettering.js plugin
Calling it with
$(function(){
$('table.form td').lettering('words');
});
combined with the css
table.form td span[class^="word"]{
display:inline-block;
}
table.form span[class^="word"]:first-letter {
font-weight:bold;
font-size:17px;
}
you get the desired result as seen at http://jsfiddle.net/gaby/8KjT5/3/
Consider using a different (more thinner) font and then use the :first-letter CSS3 selector to make the first letter larger instead. There are a number of Open-Type fonts similar to the one you posted.
table.form td {
padding: 10px;
font-family: "Open Sans";
font-variant: small-caps;
font-size: 15px;
}
table.form td:first-letter {
font-size: 18px;
}
I think there is no way you can do it in css. You'll have to wrap the first letter of each word in an extra element and then style it
You need to have the first letter of each word capitalized, and then font-variant: small-caps would give you the result you are after. Luckily, we can do that using CSS too:
{
font-variant: small-caps;
text-transform: capitalize;
}
This works on Chrome 73 on MacOS. Didn't test on other browsers.
Here is my css about a element. All browser works well except IE8.
In IE8, all of my link's color change to $color-purple, no matter whether they are clicked or not.
a {
cursor: pointer;
text-decoration: none;
color: $color-blue;
&:hover, &:focus {
color: $color-blue-dark;
}
&:visited {
color: $color-purple;
}
}
Anyone know how to fix it ?
Thanks!
The :visited pseudo class has been disabled to prevent "sniffing" for which sites a visitor has been to in the past; this was regarded as a privacy concern.
You could check the computed styles for a link and look at the color, if it had the :visited color, you could infer that the user had been to that site before.
http://msdn.microsoft.com/en-us/library/ie/cc848869(v=vs.85).aspx
The problem might also be that you've visited the link destinations in the past? To test, clear your browser history.