This is kind of a theory question but I wonder whether it is possible or not.
So if you have a div with some content like...
<div>£100.00 - BUY</div>
Can you then target "£100.00" without targeting the rest?
So you can increase the font size of £100.00?
No, that can't be done without wrapping the desired text in another element, typically a <span>.
You could target it by wrapping it in a span element:
jsFiddle example
<div><span class="price">$100.00</span> - BUY</div
You can use this
<div><span id="price">£100.00</span> - BUY</div>
CSS
#price {
font-size: 2em; // double of the current font
}
div {
font-size: inherit; // get the font-size from the browser or the document.
}
This will give the div a default font-size but the span with id price will have twice the font-size as the div.
Related
I have a div with a small heading - just two words.
When I resize da browser the text wraps and the last word goes to the next line.
I want to display different styles to the last word only when it goes to the next line. For instance: font-weight:normal instead of being bold.
Is that possible only with css?
You could use the::first-line pseudo element for this.
From MDN:
The ::first-line CSS pseudo-element applies styles to the first line
of a block-level element. Note that the length of the first line
depends on many factors, including the width of the element, the width
of the document, and the font size of the text.
section {
width: 10%;
border: 2px solid tomato;
}
h2 {
font-weight: normal;
}
h2:first-line {
font-weight: bold;
color: green;
}
<section>
<h2>Some heading</h2>
</section>
Codepen demo (resize to see the effect)
Since your content is more dynamic, you may need to use Javascript to accomplish this. An event listener on page resize that checks the height of your heading div and adjusts a span containing the second word should do the trick.
window.onresize = function(){
document.getElementById('last_word').style.font-weight = 'normal';
};
If your page content is fairly static, you could probably get away with using a css media query. I don't know of any way to have css grab the second word in a div, but if you put the second word in a span you could do something like this:
#media (max-width: 700px) {
#header_id>span {
font-weight: normal;
}
}
Of course, replacing the 700px with whatever width you find triggers the content to word wrap.
i have taken this h1 and i have given it a class and applied border bottom to it so that i can give a nice underline effect.
I can use text-decoration property but giving bold underline effect gives me the ability to have width of underline line.
When i give h1 an underline, the border goes to 100% full width of the container.
please tell me how to fix it.
thanks.
Use display: inline the reason why the H1 is showing the border all the way across is because it is a displaying block by default. Hope this helps!
Because h1 is a block level element and by default this element take a 100% width. so make it a inline element.
here is the CSS to build the h1 as a inline element.
h1{border-bottom:1px solid red;display:inline-block;}
here is the HTML
<h1>My First Heading</h1>
Here is a Demo.. http://jsbin.com/voyuluyo/1/edit
HTML
<h1 class="headings"> hi this is SO </h1>
<h1 class="headings1"> hi this is SO </h1>
CSS
.headings
{
border-bottom:10px solid black;
}
.headings1
{
display:inline-block;
border-bottom:10px solid red;
}
Fiddle
Working Demo
Output:
As RaySinlao said, display:block will make it expand all the way. If you want to make the next element go to the next line, display:inline won't work. Use display:table. Table will shrink-wrap (to fit contents) or expand (to fix weird bugs) or clearfix. Come to think of it, table does a lot of stuff.
I want my finished product to look like this:
My
Shopping
Cart
Which, I've gotten it to work so far but I'm using three paragraph tags
<div><p>My</p><p>Shopping</p><p>Cart</p></div>
Outer most div has width:200px
P tags are width:100% and text-align:center
JS fiddle example
Is there any way to accomplish this without all the p tags? I don't need to get rid of them but I like to think there is a better way.
You can set the word spacing to the width of the container.
div {
width:200px;
text-align:center;
word-spacing: 200px;
}
jsFiddle Demo
P.S - Actually you can also set it to a very large value (32767px on Chrome 29.0.1 and infinite values on FF23) and it'll work the same way. That way it won't be coupled with the container's width.
You could just use one <p> tag for all the text and then force line breaks with <br> tags like so:
HTML
<p>My<br/><br/>
Shopping<br/><br/>
Cart</p>
Working Fiddle
You can use br tag and css property of line-height to achieve desired effect
<style>
.centerIt{
line-height:1.3;/**choose as per your requirement**/
text-align:center;
width:200px;
}
</style>
<div class='centerIt'>My<br />Shopping<br />Cart</div>
http://jsfiddle.net/LkYrk/
.item-list {
letter-spacing: -0.3em;
}
.item-list a {
letter-spacing: 0;
display: inline-block;
}
<div class="item-list">
a
a
a
a
</div>
only in win ie6,the gap between a is still exit ,the style letter-spacing:-0.3em will make effective when delete the style of a { letter-spacing:0 }
why? can i figure out this problem?
wow this one stumped me for a while...believe it or not here is your answer:
font-size:0; must be added to parent element
In the case of your example, I would define the font-size of the a tags separately, and add "font-size:0;" to the parent div element
In other words:
css:
.item-list{letter-spacing:-0.3em; font-size:0;}
.item-list a{letter-spacing:0;display:inline-block; font-size:SOMETHING HIGHER;}
(also your DOCTYPE declaration must be correct or display inline-block can have problems working in IE, at least I had trouble with it with IE7)
This should end any extra margin frustration you're experiencing from display:inline-block;
It has to do with how you're typing your HTML. Because you're formatting it nicely in your IDE, a la, with spaces and new lines, those spaces and newlines show up when displayed on the page. So instead of
<div class="item-list">
a
a
a
a
</div>
type it out as one line and they will go away:
<div class="item-list">aaaa</div>
You can add this CSS
a{float:left}
Gap will Remove
I always use:
line-height: 2.2; //or whatever value you want
I took from facebook layout and works amazing for me
So the problem is when you have a block of text, and an image that is slightly too tall that you want to place in-line with the text. For example, a smiley. It will cause the line height of that line of the paragraph to grow, making the block of text look ugly.
I've actually already come up with a solution, but it's messy and I don't like it... If I wrap the smiley in a relatively-positioned div, and give it an absolute position I get the effect that I'm after:
.holder{display:inline-block;position:relative;width:16px}
.holder img{position:absolute;top:-16px}
<span class="holder"><img src="/smiley.gif" height="16" width="16"></span>
But it adds extra markup. Is there any way to achieve this without adding extra HTML elements - a pure CSS solution (no javascript!)
I wonder if I'm missing some application of overflow/vertical-align/float/display etc?
Many thanks!
Depending on the desired image position and whether you have a fixed line-height in pixels you could set a maximum height on your image that equals your line-height and set vertical-align: bottom on the image so it fits exactly into your line.
See this fiddle for an example.
p {
line-height: 18px;
}
p img {
max-height: 18px;
vertical-align: bottom;
}
<p>Some text <img src="/smiley.gif"> more text.</p>
Set the image as a background of a DIV and give the DIV fixed dimensions.
<div class="smiley"></div>
CSS:
.smiley {
float:right; <-- or inline-block if you want.
background-image:url(../smiley.gif);
height:20px;
width:20px;
}