I have a problem with my CSS, when I'm trying to make links on my page, another color, when you put the mouse over it. The problem is, that I have 2 pages, and it works in one, but I can't get it to work in the other one. I have no idea why it is not working? Anyone have any idea?
I'm using this:
<style type="text/css">
font-weight: {bold}
A:link {text-decoration: bold; font-weight:bold}
A:visited {text-decoration: bold; font-weight:bold}
A:hover {color: #F91B27; text-decoration: bold}
A:active {text-decoration: bold; font-weight:bold}
</style>
I agree with the first answer... "look at the path" however if that does not work I would suggest you perform a simple test (it has always helped me to do stuff separately) doing a simple test always works for me, look... you need to do this:
Create simple css file with just the code you want:
font-weight: {bold}
a:link {text-decoration: bold; font-weight:bold}
a:visited {text-decoration: bold; font-weight:bold}
a:hover {color: #F91B27; text-decoration: bold}
a:active {text-decoration: bold; font-weight:bold}
Create a test page "With Out" referencing this css:
Page Without CSS
Without CSS no css
Create a second page (this will be [page1].html) that will add the reference to your css file:
Comment 1: Please Note that myCss is the name of the css file you created
Comment 2: in the href you need to replace with the file's current location
http://www.w3schools.com/tags/att_link_href.asp
<html>
<head>
<title> Page Referencing Css </title> <link rel="stylesheet" type="text/css" href="myCss.css">
</head>
<body>
link one
</body>
</html>
Repeat step 3, but name the page different to create a second page ([page2].html)
Put all files inside a unique folder.
Now, perform a simple test by opening all files and determine if the css is applied to the tags or not.
If this worked, then compare this test to what you are doing in your current project.
Hope it helps!!!
Related
If I add this CSS to the bottom of a page:
<style>
a:link {
font-weight: bold;
}
a:visited {
font-weight: normal;
}
</style>
I would expect it to make unvisited links (only) bold. But it's not.
Am I misunderstanding the purpose/use of these pseudo-classes?
Here's a full page example:
<!DOCTYPE html >
<html>
<head>
<style>
body {
font-size: 16pt;
}
a:link {
font-weight: bold;
}
a:visited {
font-weight: normal;
}
</style>
</head>
<body>
This link should not be bold
</body>
</html>
Making text bold changes its size. This moves everything around the page.
If you could stop links being bold when they became visited you could use JavaScript to measure their size or the position of things near them and determine if the user has visited that link or not.
This is an invasion of privacy (and has security implications as it could be used to tailor phishing attacks) and so it is forbidden.
See Privacy and the :visited selector.
I'm new to CSS and am trying to use a class in my style.css that I created and want to use across a <div> ...
My CSS class:
.dave {
font-size: 56px;
text-transform: capitalize;
font-family: Arial, sans-serif;
font-weight: bold;
color:red
}
My HTML:
<div class="dave">
TEST
</div>
But my text "TEST" doesn't change. I've tried saving and clearing cache but no luck.
Any ideas?
Did you link user css style file in header?
Example:
<head>
<title>Ajax Chat</title>
<link rel="stylesheet" href="css/style.css">
</head>
Its either you didn't link your style.css to your HTML file, or it could be due to other errors such as, placing <style>....</style> in your style.css
So I'm opening locally saved webpages .mhtml on my computer in webbrowser on WPF.
I wish to make text on that page plain,
I've tried adding
<style type="text/css">
<!--
a:link { color: #000000; text-decoration: none}
-->
</style>
Under <HEAD>...that made all my text black, but while viewing it in chrome, in wpf webbrowser is IE and in IE links are still blue. Any help?
try this:
a { color: #000000; text-decoration: none}
a:visited { color: #000000; }
This should work. :) a:visited defines the css that styles the links that have been clicked. As far as I have tested, it works on IE too.
I have followed the instructions on the google fonts website over an over and my webpage displays as it should on MY laptop, however, the fonts 'FJALLA ONE' does not load on any other computer or device.
Am I doing something wrong? Can I store the fonts in a folder and link them like a css file?
Here is my html - part 1:
head>
<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
part 2:
<div class="box">
<h1 class="animated bounceInDown">SHEREE WALKER </h1> </div>
My CSS
.box h1 {
font-family:'FjallaOne', sans-serif; !important;
font-size:45px;
text-align:center;
color:#FFF;
padding-top: 10%; }
Am I missing something? Any help would be amazing. I'm at my wits end.
Your problem probably exists in this piece of code:
font-family:'FjallaOne', sans-serif; !important;
it should be
font-family:'Fjalla One', sans-serif !important;
OR
font-family:'Fjalla One', sans-serif;
If that still does not fix it try removing , sans-serif
Your problem is not with your code. It is fine. I would remove the !important though, it's not necessary and the syntax is also not correct, but the code will still work even with wrong syntax.
What your real problem is: the text is white so you will never see it on a white background. You can see it here working with red text-> http://jsfiddle.net/sxntrvrj/1/
h1 {
font-family: 'Fjalla One', sans-serif;
font-size:45px;
text-align:center;
color:red;
padding-top: 10%;
}
My HTML:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* Make all anchors and variations plain black text color */
a,
a:link,
a:hover,
a:focus,
a:active,
a:selected,
a:visited
{
color:#000000;
}
</style>
</head>
<body>
This is a visited link that is puple
</body>
</html>
When I visit this page, and click on the link, the text color is purple like the default color of a visited link. How can this be? How can I make the <a> text black in all circumstances?
This reproduces in Chrome and IE9; haven't bothered to test anything else yet.
Remove a:selected from your css definition. That fixed it for me. Never heard of :selected. Is it documented anywhere?
Because a:selected doesn't exist. Remove it!
Removing the a:selected, seems to fix it. Not sure why as that is a valid option on the anchor tag.
Correction: a:selected isn't valid but a.selected is of course valid. Sorry about that, but either way removing a:selected will fix the issue.
Fiddler Example