I tried many css from other places and stackoverflow, but somehow I can not make it done.
I'm very new to css, and using Joomla and a template. I'm using custom.css folder for certain customizations on style. Here is I want to do:
I want to style h5 when it is a link.
For example, I'm creating a custom html module, have a list in the content. And in the content I'm giving each, h5 style, and a link to it to a certain page in the site.
What I want to achieve is to have this list with color blue. And when mouse over-hover to have underline and still the same color. And when clicked back to the original position with no underline and no color change. (the same color in every situation, just underline when you are over it.)
I tried these h5, h5 a, h5 a: hover, h5 .contentheading a, and so on...
In one instance, it was working with :
h5 {
font-family: arial, sans-serif;
font-size: 1.3em;
font-weight: bold;
}
h5 a {
color: #0088CC;
}
h5 a: hover {
color: #0088CC;
text-decoration: underline;
}
As I read I should use 'a' when the heading is a link.
But now something is overriding it, I'm completely lost now.
I see a:hover style in the inspection.
I want to use this h5 in several content (in custom modules) when I want to style a content as a list to links. And I thought it will be practical to have one heading with a certain style so that I can use it with flexibility.
Thanks a lot, any help will be great : )
It looks like you have a space betwen a: and hover. Try:
h5 {
font-family: arial, sans-serif;
font-size: 1.3em;
font-weight: bold;
}
h5 a {
color: #0088CC;
}
h5 a:hover {
color: #0088CC;
text-decoration: underline;
}
As it was already pointed out by JSK NS, there should be no space between a: and hover. And if you want the link to be underlined only on mouse hover, you should add
text-decoration: none
in the h5 a section. You can also remove the repeating color in h5 a:hover as it is redundant. Final CSS would be like so :
h5 {
font-family: arial, sans-serif;
font-size: 1.3em;
font-weight: bold;
}
h5 a {
color: #0088CC;
text-decoration: none;
}
h5 a:hover {
text-decoration: underline;
}
There is an error in your syntax. Space between a:hover, this should be written as one.
h5 {
font-family: arial, sans-serif;
font-size: 1.3em;
font-weight: bold;
}
h5 a {
color: #0088CC;
}
h5 a:hover {
color: #0088CC;
text-decoration: underline;
}
Related
Is there a way to structure a css-file in a way like this?:
a:link {
color: red;
font-weight: bold;
a:hover {
text-decoration: none;
font-weight: normal
}
}
So I want a normal link to be underlined and bold, but when I hover over it, it shouldn't be underlined and bold, but it should still have the same color. (This is a simple example just for explanation)
EDIT: I am/was looking for a way without sass or less
a {
color: red;
font-weight: bold;
}
a:hover {
text-decoration: none;
font-weight: normal
}
All a elements will be red and bold. Specifically a:hover elements will also have no text-decoration and the font-weight is overridden to normal. You're not trying to deal with "parents and children" where, just with more specific states of an element.
There is no such thing as inheritance in CSS, but you can do :
a:link, a:hover {
color: red;
font-weight: bold;
}
a:hover {
text-decoration: none;
font-weight: normal;
}
This was partially mentioned in the comments but I believe it deserves its own post.
You'd use SASS (or LESS, but I find the former much easier) to write out your code and then a compiler like Koala to compile it into regular CSS.
This way your code becomes:
a:link {
color: red;
font-weight: bold;
&:hover {
text-decoration: none;
font-weight: normal
}
}
And it will work as intended.
I'm having one very difficult time getting :link and :visited to work on my links. I have been searching online for literally hours and read over 20 different instances of the same problem. Bizarrely enough, :hover and :active are working. What is going on?
Here's the code lines in my stylesheet:
H1 { text-align: center; width:1000px; font-size: 30pt; font-weight: bold; }
a.artlinks:link {color:#40C0FF; text-decoration: none; font-family: Cambria, Arial; }
a.artlinks:visited { color:#FF00FF; text-decoration: none; font-family: Cambria, Arial; }
a.artlinks:hover {color:#98D7F6; text-decoration: none; font-family: Cambria, Arial; }
a.artlinks:active {color:#FF0000; text-decoration: none; font-family: Cambria, Arial; }
and when I call it in my .html the code is:
<h1>Hello World!</h1>
Does anyone have a solution and also, a more efficient way to give the common a.artlinks parameters simultaneously? Thanks
Your code needs a bit of a tidy up, but this is how I would do it (edit I removed the width property from the h1 for demonstration purposes).
H1 {
text-align: center;
font-size: 30pt;
font-weight: bold;
}
a.artlinks {
text-decoration: none;
font-family: Cambria, Arial;
color:#40C0FF;
}
a.artlinks:visited {
color:#FF00FF;
}
a.artlinks:hover {
color:#98D7F6;
}
a.artlinks:active {
color:#FF0000;
}
See this jsfiddle: http://jsfiddle.net/lharby/zkb8thck/
As the a class has the same properties, you can define those once in a.artlinks (font-family, text-decoration). The other elements that are unique can then be defined for :hover, :active etc.
I need to change a color of a title of a blog entry in a teaser (Drupal views). Here is my CSS:
.blog-title h2 a,a:visited,a:link,a:active {
color: #505556;
font-size: 1.7em;
font-weight: bolder
}
Any help is highly appreciated!
It is very difficult to help without seeing your HTML code. As a assumption try like this way.
.blog-title h2 a,
.blog-title h2 a:visited,
.blog-title h2 a:link,
.blog-title h2 a:active {
color: #505556 !important;
font-size: 1.7em;
font-weight: bolder;
}
It was resolved by:
.blog-title a,a:visited,a:link,a:active {
color: #405c77;
font-size: 1em;
font-weight: bolder
}
My CSS has the following code for links for the whole website:
#mainpanecontent A:link {
FONT-WEIGHT: bold; COLOR: #6a0a0a; TEXT-DECORATION: none
}
I want to change a header that is also a link to be a different color using the code below but it doesn't enforce it. My code is inside a div that uses the "mainpanecontent" :
Header code
.contact
{
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-weight: bold;
padding-left: 50px;
background-position: 25px 14px;
padding-top: 13px;
}
.contact a:link, .contact a:visited
{
color: #1F507F;
}
.contact a:hover
{
color: #1F507F;
}
.contact a:active
{
color: #1F507F;
}
#mainpanecontent A:link has a higher specificity than any of your .contact a:somethings. The best way to solve this is probably to give your header an ID and use that. If you can’t, and it’s only in #maincontent, #maincontent will suffice, even if it’s not entirely appropriate. (Depends on the situation.)
#mainpanecontent .contact a:link {
color: #1f507f;
}
Also, just drop the :link, especially if you’re going to specify the same thing for all of them. (The only consideration there, <a name>, isn’t used these days.)
CSS has a system of priority for handling what gets what tags :: Give this a read
Here is a simple rewrite of your code that should work :)
Everything higher on the list should overwrite things lower of the list of the same type
.contact a:active
{
color: #1F507F;
}
.contact a:hover
{
color: #1F507F;
}
.contact a:link, .contact a:visited
{
color: #1F507F;
}
.contact
{
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-weight: bold;
padding-left: 50px;
background-position: 25px 14px;
padding-top: 13px;
}
CSS Rules are sometimes not enforced due to how explicit the previous rule was, in the rule you list above it references an ID, which is more explicit than a class.
The other issue of course can be that your "overrides" are defined BEFORE the other rule, therefore they are overwritten.
In the first case you can use !important to force the override of the rule.
e.g.
.contact
{
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-weight: bold;
padding-left: 50px;
background-position: 25px 14px;
padding-top: 13px;
}
.contact a {
color: #1F507F !important;
}
Note I removed the other rules, because you are only setting the link color to the same color in each case, so there's no need to define the pseudo-classes :hover, :active etc. with the same constant.
I am trying to make some small adjustments to a very big website (not did by me).
The main colors of the site are red and black.
Now there are many css classes to define the appareance of the links, however some links are still with the default blue color (without classes applied).
I have tried adding this to the main css file:
a:link {
color: #900;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: underline;
}
a:hover {
color: #000;
}
but this change the appareance of the links with the right colors too. For instance: below, in the same css file there are these classes:
.linkCat {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
text-decoration: none;
}
.linkCat:hover {
color: #900;
text-decoration: underline;
}
My changes will override the behaviour of these classes too.
I would like to know if there is some way to change the style only to the links without style already applied.
I repeat: the website is really big, i don't like to modify every single page to add a class to the links.
Thank you.
put the following at the top of the css file
a {
color: #900;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: underline;
}
a:hover {
color: #000;
}
If that does not help, use a web inspector to see what overrides the problematic styles.