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; }
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.
What I am trying to do is create a <pre> tag that will look like a bash terminal - black background and white letter, mono spaced font.
pre.bash {
background-color: black;
color: white;
font-size: medium ;
font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
display: inline;
}
<pre class="bash">
-bash-3.2$ groups
unixuser feegroup figroup fogroup fumgroup
</pre>
Use display: inline-block; to make the background a rectangle, instead of just going behind the text.
And if you want it to fill the full width of the page, instead of just the longest line, use width: 100%;
pre.bash {
background-color: black;
color: white;
font-size: medium ;
font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
width: 100%;
display: inline-block;
}
<pre class="bash">
-bash-3.2$ groups
unixuser feegroup figroup fogroup fumgroup
</pre>
You can remove the display-inline:
pre.bash {
background-color: black;
color: white;
font-size: medium ;
font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
}
<pre class="bash">
-bash-3.2$ groups
unixuser feegroup figroup fogroup fumgroup
</pre>
All you need to do is change your display from display: inline to display: inline-block :)
This is because when you set the background color to black, it is going to paint the background of the element. An element specified as inline will only be as large as the content of that line. By changing it to inline-block the element will take up the full space of that line as given by the characteristics of a block-level element. If you would like to know more, here is a link to w3's explanation of the display property.
Try changing display: inline; to display: block;
I have the following css that is used to make one link coloured but it applies to all of the links I have. Is there any way to stop this.
This is my css that is getting applied to the links:
a:visited {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #FFF;
text-decoration: none;
background-color: #F00;
display: block;
border-radius: 5px;
z-index:10;
}
a:link {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #FFF;
text-decoration: none;
background-color:#F00;
display: block;
border-radius: 5px;
z-index:10;
}
a:hover {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #CCC;
text-decoration: none;
background-color: #C00;
display: block;
border-radius: 5px;
z-index:10;
}
This is the link that it is suppose to get applied to:
<td>Food</td>
This is the link that I don’t want it to get applied to:
<td class="footer"><b>Top Attractions</b>
You could select your a tag by the href like this:
JSFiddle - DEMO
a[href="Food.html"] {
color: red;
}
Updated: DEMO (with your codes)
Working JSfiddle: demo
I gave the link you wanted to style a class and gave the class a style.
a.food :visited
instead of a:visited
Try this
HTML
<td><a href="Food.html" class="colored>Food</a></td>
CSS
.colored{
color:red;
}
One thing you could do, would be to give the tag an id/class and then refer to that in your css.
You could add a class to the link you want different and style it separately.
HTML:
<td class="footer"><b>Top Attractions</b>
CSS:
a.rides {...}
Apply a class to the links you want to effect:
<a href='food.html' class='apply_to_this'>Food</a>
Then in your CSS:
a:link.apply_to_this{
// your styles
}
You can add a class to the links you wan't to apply this rule, or you can use this rule :
a:not(.footer):link {...}
Rather than stopping it being applied to one link, you need to add a class to that link with additional CSS that overrides the styles you want to change, or (though this is bad practice...) use inline styles on that one link.
Proper solution:
In your CSS
.exception {put css here that will override the general link css, using !important to override it ifnecessary}
In your html
Content here
Quick and dirty solution
Content
Though this way will work, it is rightly frowned upon for accessibility issues.
You can just create a class and apply it to that link like mentioned above or you can just follow through your selectors to tell CSS to apply that link code to only a:links within those selectors like I've posted below:
#mainContainer #footer #etc #etc a:link {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #FFF;
text-decoration: none;
background-color:#F00;
display: block;
border-radius: 5px;
z-index:10;
}
PS - Inline styles are very bad practice. It adds tons of extra code that will reduce your rankings for Google, Yahoo, MSN, etc. Not to mention it makes code harder to read and more clunky.
My html:
<div id="unsurpassed">
<p>
<span>FIRE </span>| Unsurpassed Efficacy
</p>
</div>
My CSS:
#unsurpassed {
margin-top: 20px;
font-size: 32px;
font-family: "Myriad Pro";
}
#unsurpassed p {
color: #77787B;
font-weight: 300;
}
#unsurpassed span {
color: #1D74B6;
font-weight: 400;
}
I want the phrase "| Unsurpassed Efficacy" to have a much lighter weight that "FIRE" currently that isn't happening, not really sure why.
Try using normal and bold for font-weight instead of numbers.
Demo: http://jsfiddle.net/8rHbv/2/
CSS:
#unsurpassed {
margin-top: 20px;
font-size: 32px;
font-family:"Myriad Pro";
}
#unsurpassed p {
color: #77787B;
font-weight: normal;
}
#unsurpassed span {
color: #1D74B6;
font-weight: bold;
}
Use bolder or bold value along with 300 or 400 value and check this work perfect...
#unsurpassed {
margin-top: 20px;
font-size: 32px;
font-family: "Myriad Pro";
}
#unsurpassed p {
color: #77787B;
font-weight: bolder !important;
}
#unsurpassed span {
color: #1D74B6;
font-weight: 400;
}
Also use important word.
Check this DEMO jsFiddle
Do you have all the font weights installed on your computer?
Try add important! after your css code here:
#unsurpassed {
margin-top: 20px;
font-size: 32px;
font-family: "Myriad Pro";
}
#unsurpassed p {
color: #77787B;
font-weight: 300;
}
#unsurpassed p span {
color: #1D74B6;
font-weight: 900 !important;
}
Take a look at this jsFiddle: http://jsfiddle.net/GeUj3/1/
What you are using is valid CSS and should work if the system contains both regular and light typeface of Myriad Pro. Most computers do not contain either of them; this is a different topic, but may affect the analysis of this problem, since you might be looking at the rendering in some other font (the browser’s fallback font) if Myriad Pro is not available.
I cannot test the exact code since my system lacks Myriad Pro, but testing with DejaVu Sans instead, with no other change to the code, on Win 7, I noticed that IE 11 shows “| Unsurpassed Efficacy” in DejaVu Sans Light but Chrome and Firefox use DejaVu Sans (regular) instead, even though developer tools show that the CSS rules are being applied. You may have encountered a similar browser problem.
In general, typefaces lighter than normal (400) often work poorly even in modern browsers. A workaround is to use a light typeface as if it were a font family, with normal font-weight. This works on the browsers tested for DejaVu Sans.
So the following may work in your situation: in the rule for #unsurpassed p, replace font-weight: 300 by font-family: "Myriad Pro Light".
You are visually not going to notice a difference between font-weight 300 and 400
You can do something like this
#unsurpassed {
margin-top: 20px;
font-size: 32px;
font-family: "Myriad Pro";
}
#unsurpassed p span {
color: #1D74B6;
font-weight:bold;
}
#unsurpassed p {
color: #77787B;
}
You can check the different font weights here
Its because your not putting the class IDs in your html, if you don't then the CSS does not know what to do.. and you cant conflict the class id elements.
<div class="unsurpassed">
<p>
<span class="unsurpassed span">FIRE </span><span class="unsurpassed p">| Unsurpassed Efficacy<span>
</p>
</div>
Remember that css class elements are global, so label were you want the css to work in the proper place and don't have then conflict.
I have a list in my sidemenu, the settings don't seem to read past the css of the .body class in stylesheet -
ul.develop
{
list-style-type:square;
color: #FFF;
margin:0;
padding:0;
margin-top:0.6cm;
}
li.develop
{
font-family: 'Arial', sans-serif;
font-size: 11px;
font-weight: normal;
color:#fff;
}
My body class is -
body {
font-family: 'Arial', sans-serif;
font-size: 12px;
font-weight: normal;
}
The list then is defaulting to body class 12px, if I change body to 11px, the list is fine but I want to keep 12px for actual body of main content of copy on site.
I tried using !important but unsure that is correct?
Thanks
I think you may have .develop on ul not li, try putting your font rules on the ul.develop rule as they will apply to the li's underneath.
ul.develop
{
list-style-type:square;
color: #FFF;
margin:0;
padding:0;
margin-top:0.6cm;
font-family: 'Arial', sans-serif;
font-size: 11px;
font-weight: normal;
}
Put your 'body' related CSS above/ before the other styles. It reads it top down. Hope that works!