This question was probably asked tons of times already, and i know that photoshop renders text completely differently from browsers, but perhaps some css guru could help me get this text to looks as much close to how it looks in PS as possible:
The most closest i got is:
color: #666;
font-size: 11px;
font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
font-weight: bold;
But it looks to bold, and if i remove bold it's to thin...
Try using text-shadow property to anti-alias your font and can give boldness a lil without using font-weight: bold; and you can add letter-spacing too like this : My Fiddle
HTML
<div class="demo">Music 1</div>
CSS
.demo {
color: #515151;
font-size: 11px;
font-family: arial,sans-serif;
text-shadow: 1px 1px 1px #515151;
letter-spacing: .1em;
}
In order to create a less shadowy, more bold/sharp effect, you could try using multiple short-distance shadows as an alternative:
text-shadow: 0 0 .1px, 0 0 .1px, 0 0 .1px;
However, this will most likely be a performance hog when used on larger piles of text.
Related
I'm using Wordpress with a custom genesis theme (and Bootstrap) with Google fonts (Open Sans).
Within the styling of my H2 tag I've added: font-weight: bold; however I'd like to increase the thickness of the bold whenever I use the font-weight: bold tag.
URL: https://www.moneynest.co.uk/how-to-budget/
Example H2 text (How to Budget - Table of contents).
You can use multiple text-shadows to make text bolder even if the font doesn't support the higher font-weights:
h2.section {
text-shadow: 0px 1px, 1px 0px, 1px 1px;
font-weight: bolder;
}
You can use font-weight: 800 or font-weight: 900 which are the only values bolder then font-weight: bold
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
Back to basics, I have neglected my CSS skills thus my CSS is a bit (very) rusty I'm working on a wordpress theme. The style.css themes default H2 style is coded as follows:
h2 {
font-size:1.7em;
background:url(images/heading_bg.gif) repeat top;
color: #fff;
padding:6px;
border-bottom:3px solid #e40001;
text-transform:uppercase;
font-family: 'Oswald', sans-serif;
font-weight:normal;
}
This result in any <h2> tag inserted into a post looking like this:
This provides a nice look in the theme however in certain situations I would just like to have a basic unstyled <h2> tag thus I created the following class:
.normal{
font-size:1.4em;
font-weight:bold;
color="red";
font-family: 'Oswald', sans-serif;
}
MY Problem - What I want to Achieve
I would like to overwrite the default <h2> style of the theme in certain situations however if I add the above class to any <h2> tag the .normal class is ignored and it keeps on displaying the normal h2 rule....why is this? What am I missing? How can I overwrite the default h2 style at certain types?
This the snippet I worked out. Doesn't seems a problem to me. Go through this code carefully.
PS: color="red"; is wrong. Use
when you want to override some element, you gotta look at the rules used in that element. ie, you gotta remove the background if any, change margin, paddings etc.
color:red;
h2 {
font-size: 1.7em;
background: url(http://i.stack.imgur.com/pOVzy.jpg) repeat top;
color: #fff;
padding: 6px;
border-bottom: 3px solid #e40001;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
font-weight: normal;
}
.normal {
font-size: 1.4em;
font-weight: bold;
color: red;
font-family: 'Oswald', sans-serif;
background: none;
}
<h2>
hello
</h2>
<h2 class="normal">
Hello World
</h2>
You should mention all css properties of h2 in your .normal class, thus it will be something like this:
.normal {
font-size:1.4em;
background:none;
color: #FF0000;
padding:0px;
border-bottom:none;
text-transform:initial;
font-family: 'Oswald', sans-serif;
font-weight: bold;
}
you can use the below code:
h2.normal{
font-size:1.4em;
font-weight:bold;
color="red";
font-family: 'Oswald', sans-serif;
}
which means h2 has a class normal then overwrite the styling
You may do one of these:
use .normal selector after h2 in your css file (assuming they have same specificity)
use !important in your .normal decleration
.normal{ propert: value !important; }
add some specifity to the .normal selector like:
h2.normal{ bla bla ...}
All, I was confused by the CSS specificity when encountered with the below code .
Say we have below two css file defined.
In the A.css file
#BizIdName
{
font-family: Arial;
font-size: 13 px;
font-weight: normal;
color: #333;
text-decoration: none;
}
In the B.css file
A {
font-size: 1em;//browser setting is 16px.
}
The Html is below.
<a id="BizIdName" href="#">xxxx</a>
Based on the CSS specificity, the class in A.css is higher specificity than the one in the B.css .
So I think if both files are linked in a single Html page. the higher specificity class would overwrite the lower one.
But I don't know why the font-size: 13 px; doesn't work. It shows in 16px instead of 13px. I don't know if I missed something . If I did, Please kindly tell me why. thanks.
The problem is the whitespace between the 13 and the px. Remove it, then it should work:
#BizIdName
{
font-family: Arial;
font-size: 13px;
font-weight: normal;
color: #333;
text-decoration: none;
}
Yahoo keeps inserting blue dotted links within our HTML emails on plain text within a <p> tag. It seems to be doing this to locations mostly.
I've tried to override this using inline styles like:
style="font-family: arial, helvetica, sans-serif; color: #808080; font-size: 8pt; text-decoration:none; outline: none; -moz-outline-style: none;"
I've done a bit of research on this and it seems like it may not be possible to remove them, but I'm just looking to confirm that.
Have you tried adding the following to the CSS before </head>:
.yshortcuts {border-bottom: none !important; color: #000000 !important}
There is a little bit more info on this over at Exact Target's blog.
I'm trying to make a pseudo link class with the CSS3 text-shadow for both navigation and normal use of links.
The problem is that the state "a:hover" is overruling "a:visited" so when doing a mouseover on the link that previously has been visited, it outputs different that it should.
If the a:visited state isn't present in the CSS the color of the visited links will turn into the standard purple color, which I don't like it to.
Have a look at the site: www.sayhi.dk
The code looks like this:
HTML
<a class="lnk" href="http://www.twitter.com/sayhidk">#Sayhi.dk</a>
CSS
a.lnk:link {
font-size: 12px;
font-weight: bold;
font-family: Myriad Pro;
text-shadow:1px 1px #ffffff;
color:#7c7565;
text-decoration:none;
}
a.lnk:hover {
font-size: 12px;
font-weight: bold;
font-family: Myriad Pro;
text-shadow: 1px 1px #7c7565;
color:#ffffff;
}
a.lnk:visited {
font-size: 12px;
font-weight: bold;
font-family: Myriad Pro;
text-shadow:#ffffff 1px 1px 1px;
color:#7c7565;
text-decoration:none;
}
a.lnk:active {
font-size: 12px;
font-weight: bold;
font-family: Myriad Pro;
text-shadow:1px 1px #ffffff;
color:#7c7565;
text-decoration:none;
}
Hope that you guys can help me out.
In your example, specifying 'color' in the :visited style is sufficient.
Edit: the solution was to put a.lnk:visited before a.lnk:hover.
This may or may not help, but I never define a:link styles. I instead define an "a" style (no pseudo class), and styles get inherited nicely. Then I define :hover, :active, etc... And if I do not define one for a particular style, the catch-all "a" style gets applied.
It is also good practice to define a :hover as well as a :focus. They can be the same style if you like. The :focus is used in a limited way by the iOS and handicapped users who don't use a mouse but use a keyboard to navigate.