In CSS, how can I bold only the phone number so it will inline with the rest of the statement but the number is bold?
Instead of doing it in HTML as:
<div class="bubbleContent">› Start posting jobs today–
<strong> 01234 567 890</strong></div>
HTML:
<div class="content">› Call me – 01234 567 890</div>
CSS:
div.bubbleContent
{
font-size: 11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin-top: 15px;
}
Thanks.
You can use <span> as in example shown below:
HTML:
<div class="content">› Call me – <span class="highlight">01234 567 890</span></div>
CSS:
div.content
{
font-size: 11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin-top: 15px;
}
span.highlight
{
font-weight:bold;
}
You can also use <div> element with property display:inline, so it will be inline with the rest of the text.
You can’t. You cannot style a piece of text in CSS without making it an element one way or another (unless it can be referred to as a pseudo-element, but this currently works for first letter and first line only).
There are many HTML elements that you could use (such as strong, b, span), but the point is that you need some element. You can use an element that is displayed in bold by default, or you can style it with CSS.
You could generate the element with JavaScript client-side, though. For this, you would need to specify the syntax of phone numbers to be recognized, making sure that only phone numbers will match it in the content that will be used.
Related
I have added a custom font for this code. I am trying to get my h1 tag to inherit the font-weight:bold; css attribute.
In my css I have added the font-weight bold in the body tag where it should affect all the text. I have also tried placing it in the h1 tag in css.
The font-weight is affecting everything but the h1 tag. What is going on?
#font-face {
src:url(fonts/kohm.otf);
font-family:'kohm';
}
body{
background-color:silver;
color:white;
padding:20px 20px 20px 20px;
font-family:"kohm";
font-size: 14px;
font-weight:bold;
}
h1{
background-color:#ffffff;
background-color: hsla(0,100%, 100%, 0.5);
color:#64645A;
padding:inherit;
}
Ignore the question I found out that heading tags are already made bold so the font-weight:bold; attribute will not affect it. font-weight:normal; to un-bold it and adjust is font-size.
However when I am trying to italicize the font or make it oblique font-weight:italic; font-weight:oblique; it will not affect any of the text in the body paragraph. Why might that be?
You are using the wrong CSS syntax. You are using font-weight whereas you should be using font-style instead.
If you want to make the body paragraph italic, the correct syntax would be
p {
font-style: italic;
}
If you are trying to make it oblique, the correct syntax would be
p {
font-style:oblique;
}
I hope that helps!
In CSS, I am trying to style an ordered list so that the contents are one font, but the the numbers are another font.
How can I target the list-numbers, which aren't html elements and part of the list-style ?
The only thing that I can think of and have tried is making the list an unordered list. Setting the list-style to none and then manually having numbers inside the list that are wrapped in 's where I style them differently.
But that seems highly inefficient.
HTML
<ol>
<li><p>Hello</p></li>
<li><p>World</p></li>
</ol>
CSS:
ol{
font: italic 1em Georgia, Times, serif;
}
ol p{
font: normal .8em Arial, Helvetica, sans-serif;
}
JSFiddle of the example above
using jquery-1.6.1.min.js and jquery-ui-1.8.13.min.js.
I have a textbox sitting inside a jquery dialog
<div class="chat-response">
<input class="chat-response-textbox" name="chat-response-textbox" placeholder="Type message here">
</div>
I have some associated css which I have made the font size intentionally large:
.chat-response-textbox
{
font-size: 20px;
font-family: Arial;
}
However when running in Chrome/IE the font size doesn't come out as 20.
In Chrome I can see the style is being taken from jquery.ui.theme.css
Elements Window
Styles Window
Why is this occurring given I explicitly assign a class to the input element?
It's all about the selector specificity. The most-specific selector wins; in this case that's .ui-widget input.
Just make your selector more specific than that one, and it'll work:
.ui-widget input.chat-response-textbox
{
font-size: 20px;
font-family: Arial;
}
Try changing it to
input.chat-response-textbox
That makes your style more specific, which should override JQuery UI.
I need to format HTML similar to below. Basically a quote is optional, and I need to dropcap the first letter of the body paragraph.
<article>
<p class="quote"> <!-- quote is optional -->
Genius begins great works; labor alone finishes them.-- Joseph Joubert
</p>
<p> <!-- "L" is a dropcap -->
Life is like a box of chocolates.
</p>
<p>...</p>
<p>...</p>
</article>
My CSS looks like this:
article > p:first-child:first-letter
{
float: left;
font-family: Georgia, serif;
font-size: 360%;
line-height: 0.85em;
margin-right: 0.05em;
}
p.quote {
font-weight: bold;
}
It doesn't work currently when the quote is introduced. AFAIK I can't select the article's first child P which is not class "quote." I'll use jQuery if I can't figure this out, but for now I'm looking for a way to do it CSS only.
Thanks in advance!
If you're OK with using CSS3 selectors, try using these (grouped together):
/* Select the first child if it's not a .quote */
article > p:not(.quote):first-child:first-letter,
/* Or, if the first child is a .quote, select the following one instead */
article > p.quote:first-child + p:first-letter
{
float: left;
font-family: Georgia, serif;
font-size: 360%;
line-height: 0.85em;
margin-right: 0.05em;
}
See the jsFiddle demo
Otherwise I think you'll have to play with some overrides to get the desired effect.
Some explanation
The negation pseudo-class :not() is always processed independently of all other types, IDs, classes and pseudo-classes in the compound selector. This is regardless of how you arrange it with your other selectors.
To put it another way: you can't use :not() to remove, or filter out, elements that match what's in the negation, from a selection matched by the rest of the simple selector. It also means that the set of the elements matched by the :*-child() and :*-of-type() pseudo-classes is not affected by :not().
So the first selector above,
article > p:not(.quote):first-child:first-letter
works roughly like this:
Find every p element.
If not found, ignore.
If found, check whether this p is the :first-child and if it's :not(.quote).
If it's not the first child, ignore.
If it has the quote class, ignore.
If it matches both pseudo-classes, check whether this p is a child of article.
If not, ignore.
If so, grab its :first-letter.
Apply rules.
The second selector, on the other hand, is relatively straightforward:
article > p.quote:first-child + p:first-letter
All it does is take the p that comes right after the first child of article if it's a p.quote, and apply rules to its :first-letter.
Why don't you use <q> or <blockquote> for the quote? then you can use
p:first-of-type:first-letter
p.dropCap:first-child:first-letter {
float: left;
color: #903;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: Georgia;
}
I have only a basic knowledge of css, is it possible to inherit a property from one style into another style. So for instance I could inherit the font size specified in my default paragrah tag settings into my hyperlink tags.
The reason I want to do this is to make it easier to maintain multiple styles.
You can define common styles for two elements at once like so:
p, a {
font-size: 1em;
}
And then extend each one with their individual properties as you want:
p {
color: red;
}
a {
font-weight: bold;
}
Keep in mind: Styles defined later in a style sheet generally override properties defined earlier.
Extra: If you haven't already, I recommend getting the Firebug Firefox extension so you can see what styles the elements on your page are receiving and where they are inherited from.
No CSS doesn't have any way to inherit styles. But there are several ways you can share styles. Here are a few examples:
Using multiple classes
<p class="first all">Some text</p>
<p class="all">More text</p>
<p class="last all">Yet more text</p>
p.all { font-weight: bold }
p.first { color: red; }
p.last { color: blue; }
Use the comma operator in your styles
<p class="first">Some text</p>
<p class="middle">More text</p>
<p class="last">Yet more text</p>
p.first, p.middle, p.last { font-weight: bold }
p.first { color: red; }
p.last { color: blue; }
Using container elements
<div class="container">
<p class="first">Some text</p>
<p class="middle">More text</p>
<p class="last">Yet more text</p>
</div>
div p { font-weight: bold }
p.first { color: red; }
p.last { color: blue; }
None of these are exactly what you are looking for, but using these techniques will help you keep CSS duplication to a minimum.
If you are willing to use server side code to preprocess your CSS, you can get the type of CSS inheritance you are looking for.
http://wiki.framwurk.org/documents:csspp/
http://mail.python.org/pipermail/python-list/2006-August/397266.html
http://www.shauninman.com/archive/2008/05/30/check_out_css_cacheer
Yes.
You should understand how the cascade in CSS works, and also understand how inheritance works. Some styles will inherit (like the font face) and some styles wont (like the border). However, you can also tell styles to inherit from their parent elements inside the DOM.
Of some help here is knowledge of how style rules are specified. This site about the CSS Specifity Wars might help (Note: this site is currently down, but hopefully it will be back soon).
Additionally, I find it sometimes helps to overload styles like this:
h1, h2, h3, h4, h5 h6 { font-weight: normal; border: 1px solid #ff0; }
h1 { font-size: 300%; }
... etc ...
"...is it possible to inherit a property from one style into another style. So for instance I could inherit the font size specified in my default paragrah tag settings into my hyperlink tags."
The link tags will automatically use the fonts from the paragraph, if, and only if, they are within a paragraph. If they are outside of a paragraph (say in a list) they will not use the same font, etc.
For instance this css:
* {
margin: 0 10px;
padding:0;
font-size: 1 em;
}
p, a { font-size: 75%; }
will generate links and paragraphs that are sized at .75em. But it will display links within paragraphs at about .56em (.75 * .75).
In addition to the specificity reference cited by Jonathan Arkell, I recommend the CSS Tutorial at W3Schools.
CSS will automatically inherit from the parent style. For example, if you say in your body style that all text should be #EEE and your background should be #000 then all text, whether it’s in a div or a span will always be #EEE.
There has been quite a bit of talk about adding inheritance the way you describe in CSS3, but that spec isn’t out yet, so right now we’re stuck repeating ourselves quite a bit.