I can't make the text bold
I tried this, but it does not work:
.auth_subm {
height: 20pt;
width: 130pt;
font: 10pt Arial, Helvetica, sans-serif, bold;
margin: 2pt;
margin-right: 0px;
text-align: center
}
<input value="how get answers" type="button" class="auth_subm" />
You've placed bold in your comma-separated list of font names, so if there isn't a generic sans-serif font available it will look for one named bold.
See the documentation for font. Order matters.
Put bold at the front of the list of properties in the shorthand.
.auth_subm {
height: 20pt;
width: 130pt;
font: bold 10pt Arial, Helvetica, sans-serif;
margin: 2pt;
margin-right: 0px;
text-align: center
}
<input value="how get answers" type="button" onclick="location.href='otv.html'" class="auth_subm" />
Instead of using font-weight bold on input field, you should change your input field to a button field.
However don't forget to say it's a submit button in type!
Example
<button type="submit">
<b>Bold text!</b>
</button>
Add a class with font weight like below
.auth_subm {
height: 20pt;
width: 130pt;
font: bold 10pt Arial, Helvetica, sans-serif;
margin: 2pt;
margin-right: 0px;
text-align: center;
text-transform: uppercase;
font-weight:700;
}
Check this http://jsfiddle.net/c8kdhbmy/2/
Related
So I'm not unable to use margin that consists of three texts. I tried adding it both in html and css, none of them worked. Am I supposed to format it in a different way?
.middlelectureread {
margin-left: 740px;
font-family: Arial, Helvetica, sans-serif;
font: bold;
font-size: 20px;
}
.middlecaptivityread {
margin-left: 210px;
font-family: Arial, Helvetica, sans-serif;
font: bold;
font-size: 30px;
}
.middleprotestread {
margin-left: 210px;
font-family: Arial, Helvetica, sans-serif;
font: bold;
font-size: 30px;
}
<span class="middlelectureread">READ MORE</span><span class="middlecaptivityread">READ MORE</span><span
class="middleprotestread">READ MORE</span>
Like Neffy wrote you shouldn't use span here. Span element is inline and shouldn't be a container to postion elements. For such things we have divs or HTML5 semantic elements like Section, Header, Footer etc. span can be useful when we want to style for example a part of some text, paragraph.
<p>If you do it you will see a <span class="warning">warning</span>sign</p>
And if we apply color to this span it will work.
in above image you can see text "acceptable".
i want to change this font as text "contact us" font which is present below.
we are using
font-family: 'Roboto Condensed', sans-serif;
but it didt worked for us.
Well according to your code, you just have to change the font-size of p tag and you are done. To check the changes try to add Contact us next to acceptable and then you will see both are same. Happy to help :)
Use <span class="red">text</span> and some basic CSS like .red { color: red; }
lOOK AT THIS EXAMPLE
HTML
<span class="red">acceptable</span>
</p>
CSS
p {color: black;
font-size: 13px;
line-height: 26px;
text-align: justify;
}
.red { color: red;
font-family: 'Roboto Condensed', sans-serif; }
Constraints:
1. This is for an HTML newsletter (no HTML5 or JS)
2. Font-family is {Lucida Sans, Lucida Grande, Lucida San Unicode, serif}
I need to match an existing PDF newsletter mast head (rather improve it but it's not in the brief) with text not Image (since many email clients don't load images automatically and it's the masthead)
The code I have so far (adapting a free theme from campaign monitor called Classic by 45royale) is:
<h1 style="color: #fff; font: normal 33px Lucida Sans, Lucida Sans Unicode, Lucida Grande, sans-serif; margin: 0; padding: 0; line-height: 33px; letter-spacing: 16px; font-variant: small-caps;">Teeᴇᴇ</h1>
<p style="color: #dfa575; font: normal 11px Georgia, serif; margin: 0; padding: 0; line-height: 11px; letter-spacing: 2px">NEWSLETTER …</p>
Note the first two `e's have been small capped and are noticably thinner in stems than the 'T' and are much smaller than the small caps in the PDF.
The second two 'E's are small cap Unicode characters I found in the phonetics section of Unicode. They have equivalent stems but are still a little too low in terms of height above baseline.
EDIT: I just checked 3 Lucida Faces on OS X in suitcase fusion and Small Caps for full alphabet doesn't exist in any of the Lucida family of fonts I'm looking at.
All the letters including the 'T' and 'P' seem thicker than the PDF version too but that's only a second order issue.
What manual options are available. I'm inside an <h1> tag which means if I make a new tag to set a different font-size after the 'T' for 'ERRA' I get a LineFeed for free :-/
How can I set multiple font-sizes on the same line, should I just be using a <p> tag and custom classes to set CSS and inline font sizes?
Thanks for reading :-)
You can set multiple font sizes on the same line with an inline element like <span></span>. So in your example...
<style>
h1 { color: #fff; font: normal 33px Lucida Sans, Lucida Sans Unicode, Lucida Grande, sans-serif; margin: 0; padding: 0; line-height: 33px; letter-spacing: 16px; }
h1 span { font-variant: small-caps; }
.newsletter { color: #dfa575; font: normal 11px Georgia, serif; margin: 0; padding: 0; line-height: 11px; letter-spacing: 2px }
</style>
<h1>Tee<span>ee</span>EE</h1>
<p class="newsletter">NEWSLETTER …</p>
EDIT: Here's an updated snippit that may help:
<style>
body { background:#658290 }
h1 {
color: #fff;
font: normal 33px Lucida Sans, Lucida Sans Unicode, Lucida Grande, sans-serif;
margin: 0; padding: 0;
line-height: 33px; letter-spacing: 16px;
}
h1 span { font-variant: small-caps; letter-spacing:0.3em }
h1 span.upper { font-size:130%; }
</style>
<h1><span class="upper">ee</span><span class="lower">ee</span></h1>
Check out this web page: http://www.premierleague.com/en-gb/clubs/profile.overview.html/tottenham
Why is word "Lilywhites" displayed as uppercase in web page?
I believe it is simply the font:
font-family: 'PremierLeagueRegular';
within:
.clubheader ul.stats p
{
font-family: 'PremierLeagueRegular','Lucida Grande','Lucida Sans Unicode';
font-size: 18px;
color: white;
padding: 0;
margin: 4px 0;
}
If you were to remove the 'PrimierLeagueRegular' font from the font-family property, you would notice that it changes away from being an uppercase font.
in
<link rel="stylesheet" href="/etc/designs/premierleague/clubs.css" type="text/css">
find
.clubheader ul.stats {
display:block; float:right;
font-family: 'PremierLeagueRegular','Lucida Grande','Lucida Sans Unicode';
color:#fff;font-size:18px;font-weight:normal;line-height:18px;
width:165px;vertical-align:top;position:absolute;top:0;right:0;
}
PremierLeagueRegular font is the reason
I have 2 paragraphs as
<p style="color:#333333; line-height: 20px; font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight:bold; margin:0; padding:0; text-align: left;">Title of para</p>
<p style="color:#767676; line-height: 20px; font-size: 12px; font-family: Helvetica, Arial, sans-serif; text-align: left; margin-bottom: 1cm; margin-top:0; padding:0;">Text</p>
I want to have 0 space between the 2 paragraphs but at the same time have some fixed space at the top of the 1st paragraph and at the bottom of the second paragraph.
I am creating an html email, hence the inline styles.
It works fine in some clients. But in entourage and gmail, the space between the 2 paragraphs does not go away. :(
http://jsfiddle.net/jnuHD/
I've added
height:12px;
to the first paragraph. Seems to work.
I'm guessing that some built-in styles in Gmail are overriding the margins and paddings you've set. Have you tried adding the !important flag to their values and seeing if that helps?
Adding some background color shows that the problem is within the p tags not between them
http://jsfiddle.net/hs3A2/
Do you need the line height styling? if not the following reduces the spacing:
http://jsfiddle.net/UTZ8y/
You can also use line height to reduce the spacing further:
http://jsfiddle.net/99zcM/1/
Maintaining the line-height you can use positioning to adjust the "spacing":
<div style="position:relative;">
<p style="line-height: 20px; font-size: 16px;
font-family: Helvetica, Arial, sans-serif; font-weight:bold;
margin:0; padding:0; text-align: left;">Title of para
</p>
<p style="color:#767676; line-height: 20px; font-size: 12px;
font-family: Helvetica, Arial, sans-serif; text-align: left;
margin-bottom: 1cm; margin-top:0; padding:0;
position:relative;top:-5px;">Text</p>
</div>
See it working here: http://jsfiddle.net/Md9Na/
I'm not sure how well this will work on various email clients and beware of overlap