I'm working on a page where I show an image and then have text at the bottom that's a link to a specific page.
By default the link is colored gray, but I want to override that and have the text picking up the h3 style.
Here's the CSS:
h3{
color: #a60000;
font-size: 20px;
font-weight: normal;
font-style: normal;
font-family: mpluslight;
}
a {
color: #CCC;
font-weight: normal;
}
Here's the HTML:
<h3>Personal Training</h3>
I tried by changing the h3 values to '!important' but that didn't work.
I'm trying to avoid using inline CSS. Trying to keep my code as clean as possible.
Any ideas?
You will need to do this:
h3 a { color: #a60000; }
... or possibly this:
h3 a { color: inherit; }
Related
I am trying to create some a links using css
this is my css code:-
#footer-links a:link {
font-size: 12px;
color: #ffffff;
font-weight: normal;
}
#footer-links a:hover {
font-size: 12px;
color: #73de52;
font-weight: normal;
}
here is how i am calling it:-
|<span id="filter-links">Privacy Policy</span>|<span id="filter-links">Terms and Conditions</span>|
the first link works fine. It has white text with a green hover. But the second link reverts to blue text with green hover.
What am I missing?
Use Class selector instead of Id, as Id is a unique selector and always effects over the first element having that Id.
Thanks
.filter-links a:link {
font-size: 12px;
color: #262;
font-weight: normal;
}
.filter-links a:hover {
font-size: 12px;
color: #73de52;
font-weight: normal;
}
<span class="filter-links">Privacy Policy</span>|<span class="filter-links">Terms and Conditions</span>
I dont know if you making a mistake here, because your ID definition is filter-links instead of footer-links which you are using in your CSS. Check my snippet below for the correct one.
#filter-links a {
font-size: 12px;
color: #ffffff;
font-weight: normal;
}
#filter-links a:hover {
font-size: 12px;
color: #73de52;
font-weight: normal;
}
<span id="filter-links">
Privacy Policy
</span>
|
<span id="filter-links">
Terms and Conditions
</span>
Hopefully this do the job for you!
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'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
some elements on my website display perfectly, while other elements of the same font look grainy and choppy. I can't figure out why since I specify the style in the same way.
Here's my website:
http://violetoeuvre.com/
The side bar navigation (me, about, writing contact) is totally fine while the paragraph, h2, and footer styles are grainy and look like a rough version of the same type face.
CSS:
/* Fonts */
#import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic);
Funky styles:
h2 {
font-family: 'Playfair Display', sans-serif, 20px;
font-weight: 100;
line-height: 2em;
color: #000000;
letter-spacing: -1px;
margin: 0;
}
h3 {
font-family: 'Playfair Display', sans-serif, 12px;
font-weight: 100;
line-height: 2em;
color: #000000;
letter-spacing: -1px;
margin: 0;
}
#foot a:link {
font-family: 'Playfair Display', sans-serif;
font-size: 15px;
font-weight: 100;
color:#000;
text-decoration: none;
letter-spacing:0.2em;
}
These are functioning fine:
#emma_home a:link{
font-family: 'Playfair Display', serif;
font-size: 75px;
font-weight: 200;
color:rgba(255,255,255,1);
text-decoration: none;
letter-spacing:-4px;
}
#nav_menu a:link{
font-family: 'Playfair Display', serif;
font-size: 30px;
font-weight: 100;
color:rgba (255,255,255,1);
text-decoration: none;
text-align: center;
letter-spacing:0.2em;
}
#side_wrapper_text a:link{
font-family: 'Playfair Display', sans-serif;
font-size: 32px;
font-style: italic;
font-weight: 100;
color:#000000;;
text-decoration: none;
text-align: right;
letter-spacing:0.2em;
}
Also, on a PC the top Emma and Navigation (writing, blog, contact) are about 20 pixels ABOVE the black line, but on my Mac, the letters touch the white like I want.
What gives with these discrepancies??
Thanks.
I think you should move font-size property from font-family tag
and add it
font-family: sans-serif;
font-size : 12px;
check this W3 Schools they define 2 properties
Browsers behave differently with css some adapt the error some not
EDIT
You can save yourself from repeating code by putting the selector that have same styles mostly and then you can overwrite that style. for ex
h2,h3 {
font-family: 'Playfair Display', sans-serif;
font-size : 20px;
font-weight: 100;
line-height: 2em;
color: #000000;
letter-spacing: -1px;
margin: 0;
}
h3 {
font-size: 12px;
}
I see your a link has font weight property double than you defined for other so that may be the case for a tags but i dont see any other significant difference
I was confused as to why Playfair Display appeared grainy in my headings and paragraphs, but NOT in my sidebar navigation.
After some frustration, I realized that the typeface just looks bad at a certain (small) font.
Search for Playfair:
http://www.google.com/fonts/
As you can see, Normal 400 looks very weird, but in larger, bold, or italic styles, it looks just fine. The only thing to do was to choose a similar typeface for smaller styles, so I'm using Jacques Francois.
I'm a designer that works mostly in web but occasionally print as well. I think your issue may actually be with the Playfair font itself which I have just discovered is missing certain font styles when it displays on PCs (Macs look fine). I would test with another font before losing much more time.
As far as I can see IE prefers ttf format over woff and that specific exports is wrong. I simply downloaded the google font mercurial repo any converted original (otf) files with font squirrel, now it works.