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.
Related
(I think I should mention this, I've only recently started using Sass/SCSS)
http://jsfiddle.net/DriftingSteps/t6kLncfm/
You can see how <strong> is inheriting the properties of the global <a> as well as the properties from nested <a> tag.
a {
color: #09f;
text-decoration: none;
&:hover {
text-decoration: underline;
opacity: 0.6;
}
}
ul {
font-size: 0.85em;
a {
font-family: Georgia, Times, serif;
font-style: italic;
color: #0a3;
}
strong {
#extend a;
}
}
I have been going through http://sass-lang.com/ and I know I'm missing something.
What am I doing wrong? Is there a way to inherit properties from the nested <a> only, without the use of classes on either ul a and ul strong? Or is there a better way to do this?
You could use an extend-only selector (%), and extend both ul a and ul strong from that:
a {
color: #09f;
text-decoration: none;
&:hover {
text-decoration: underline;
opacity: 0.6;
}
}
ul {
font-size: 0.85em;
a {
#extend %a;
}
strong {
#extend %a;
}
}
%a {
font-family: Georgia, Times, serif;
font-style: italic;
color: #0a3;
}
You don't have to use that class and you don't have to apply it to your HTML, you can just define it and refer to it when inheriting:
a, .a {
font-family: Georgia, Times, serif;
font-style: italic;
color: #0a3;
}
strong {
#extend .a;
}
Demonstration
And of course, in this case you don't really need extend:
a, strong {
font-family: Georgia, Times, serif;
font-style: italic;
color: #0a3;
}
strong {
// other stuff
}
It seems to me that the real use case of extend isn't deep localized selectors defined together, but rather the extension of a selector defined elsewhere.
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'm having trouble with creating different font size to a span element inside p. The p is supposed to be a larger heading text and the span comes right after it with no extra spacing and the span text will be much smaller with a lighter color.
I can't get the span text to be smaller. It just stays the same size as the p text. Also there's too much space in between them and I'l like these too text lines to be very close each other.
HTML:
<p class="this-p">Hello<br><span class="this-span">Some text here</span></p>
LESS:
.this-p {
font-size:1.6em;
font-weight: bold;
.this-span {
font-weight: lighter;
font-size:0.9em !important;
color: #gray;
}
}
Your LESS works as intended, seen here: http://jsbin.com/mohur/1
But there's still a quite big space between these too lines of text.
This is due to the lack of line-height. Its either inheriting from the body or the browser defaults. To work around this: http://jsbin.com/mohur/2
.this-p {
font-size:1.6em;
line-height: .75em;
font-weight: bold;
.this-span {
font-weight: lighter;
font-size: 0.9em;
color: gray;
}
}
Be careful with ems they can be tricky to deal with nested sizes.
Be careful with line-height. If the text goes on to two lines, you may run into issues.
I would imagine a better way of doing this would be: http://jsbin.com/mohur/3
This way you have totally control of both elements and neither inherits from the other.
Change your CSS like this
.this-p
{
font-size:1.6em;
font-weight: bold;
}
.this-span
{
font-weight: lighter;
font-size:0.9em !important;
color: gray;
}
DEMO
just take out the branched span from inside the p block...
.this-p {
font-size:1.6em;
font-weight: bold;
}
.this-span {
font-weight: lighter;
font-size:0.9em !important;
color: #gray;
}
i might be wrong, but there is not branching such as this in CSS...always have the elements styled separately...except for SASS, of course...
You cannot nest these css unless you are using SASS model.
Keeping them separately would help.
.this-p {
font-size:1.6em;
font-weight: bold;
}
.this-span {
font-weight: lighter;
font-size:0.9em !important;
color: #gray;
}
You are doing it wrong in css. Make it as follows and also make sure to close <p> tag
.this-p {
font-size:1.6em;
font-weight: bold;
}
.this-span {
font-weight: lighter;
font-size:0.9em !important;
color: #gray;
}
Take a look at FIDDLE
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 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;
}