two CSS settings :
h6 {
font-size: 18px;
color: #000;
font-weight: 400;
letter-spacing: 0.05em;
}
h6red{
font-size: 18px;
color: #ff0000;
font-weight: 400;
white-space: nowrap;
}
<h6red>LE CHIC</h6red><h6> jouw partner in kleur</h6>
The output is on two lines, can i prevent this?
Thanks in advance
Erwin
<h6red> isn't valid markup. But what you're looking for is display. Add display:inline-block; to both of the above and they will stay on one line.
As mentioned by Marc Audet, <h6red> isn't valid HTML and therefore we shoud start there. Header tags are <h1>,<h2>,<h3>,<h4>,<h5> and <h6> with no other variations other than the number change. the smaller the number, the larger the text gets. Anything else wont be properly read by the browser as a heading.
With that being said, here's what I'd do.
Using a <span> tag, you could isolate(or 'wrap') one word within a sentence and decorate the<span> in CSS. This would keep the text inline while adding the style. My recommendation would be use a classname on the <span> to allow its use for different things later, unless you only plan to use it once. I would suggest:
<h6>
<span class="makeRed">LE CHIC</span>jouw partner in kleur
</h6>
along with this CSS:
h6{
font-size: 18px;
color: #000;
font-weight: 400;
letter-spacing: 0.05em;
}
.makeRed{
color: #f39999;
}
Related
I have a multi-line address in my footer and need lines to break at certain screen widths.
I have each line set in a <span> tag with a class and then allocated either block or inline-block in CSS.
For some reason a couple of lines are no longer behaving as they should and I cannot work out why.
Regardless of what I set a particular line to, it always appears in a line on its own, which is not what I want. And another 2 lines break when they should, 768px, but a gap between the lines appears.
HTML
<span class="address">FEAST THAILAND</span>
<span class="address1">10 NAEBKHEHART ROAD HUA HIN</span>
<span class=“address2”>(Inside The Memory Hua Hin) </span>
<span class="address3">PRACHUAP KHIRI KHAN, 77110 THAILAND</span>
<span class=“address4”>+66 (0) 32 510 207</span>
<span class="address5">OPERATED BY FOOD DISCOVERY (THAILAND) CO., LTD.</span>
<span class="address6"><strong>PRIVACY POLICY</strong> <strong>TERMS & CONDITIONS</strong></span> <span class="address7"><strong>WAIVER & RELEASE OF LIABILITY</strong></span>
<span class="address8"><strong>©2017</strong> ALL RIGHTS RESERVED</span>
<span class="address9">TAT License No. 14/02344</span>
CSS
.address,
.address1,
.address2,
.address4,
.address6,
.address7 {
font-size: 11px;
font-weight: normal;
font-family: Lato, sans-serif;
letter-spacing: 1.5px;
text-align: center;
display: inline-block;
color: #000000;
}
.address3,
.address5,
.address8,
.address9 {
font-size: 11px;
font-weight: normal;
font-family: Lato, sans-serif;
letter-spacing: 1.5px;
text-align: center;
display: block;
color: #000000;
}
Obviously that's just the standard CSS without the media query, but .address4, which has display: inline-block; should be sitting alongside .address3, which has display: block; Any suggestions why it is not?
When the media query comes into play at 768px, .address7 drops down below .address6, which is what I want, but a line of space appears between the 2. Again, any ideas why?
Is this the best way to handle breaking lines where required, or is there a better way? I have even tried using with a class added as well as trying another method found here:
CSS
#media only screen and (max-width: 414px){
.address2 {
font-size: 10px;
font-family: Lato, sans-serif;
letter-spacing: 1.5px;
text-align: center;
color: #000000;
display: block;
}
.address2:after {
content:"\a";
white-space: pre;
}
}
This last part with the .address2:after I thought should have moved the line after .address2 to the next line at 414px, yet it did not.
Any suggestions as to the best way to handle breaking the lines where I want?
cheers
One issue with display:block is that those elements always are displayed on a line of their own, no matter what the surrounding elements look like; be it display:inline or not.
So to answer your questions: an inline-block span next to a block span will not sit next to it on the same line. And two block spans with in between will each be on their own line, with another line in between where the are (this will look like a blank line).
To solve the whole issue, I'd start with simplifying it down to this:
div.addressblock {
text-align: center;
}
div.addressblock span {
font: normal 11px 'Lato', sans-serif;
letter-spacing: 1.5px;
display: inline-block;
color: #000000;
}
div.addressblock a {
font-weight:bold;
padding:0 .5em}
<div class="addressblock">
<span>FEAST THAILAND</span>
<span>10 NAEBKHEHART ROAD HUA HIN</span>
<span>(Inside The Memory Hua Hin) </span>
<span>PRACHUAP KHIRI KHAN, 77110 THAILAND</span><br>
<span>+66 (0) 32 510 207</span>
<span>OPERATED BY FOOD DISCOVERY (THAILAND) CO., LTD.</span><br>
<span>PRIVACY POLICY
TERMS & CONDITIONS
WAIVER & RELEASE OF LIABILITY</span>
<span><b>©2017</b> ALL RIGHTS RESERVED</span><br>
<span>TAT License No. 14/02344</span>
</div>
With actual breaks where you want the line breaks to be, and all the spans turned into inline-blocks to avoid unwanted breaks inside them, and let the page flow do the rest.
If you then want other things to happen at certain screen widths, you can always add some extra CSS.
I'm displaying some HTML markup which was originally created in Flash. Flash has an attribute called "FACE" which applies a custom font to the tag. I'm processing the markup on the server side before it's sent to the browser, it converts FONT tags into spans and the FACE attribute into a class name, e.g. "Arial" or "ArialBold".
I want to style the text to match the custom fonts (so Arial can only show font-weight:normal, and ArialBold can only show font-weight: bold). The problem is my css isn't handling it how Flash would.
Flash might have this markup:
<font face="ArialBold">
<font face="Arial"><span><b>Some text<b><span></font>
</font>
And it will display like this:
Some text
Here the Arial font is overriding the ArialBold font because it's nested deeper and the tag renders as normal text because the Arial font doesn't have bold characters included.
In the jsfiddle however, html/css will show the text as:
Some text
So, my question is, how do I fix the jsfiddle, so that the outputted text to display is:
Normal bold here
Hello World Good bye
Hello World Good bye
Example: jsfiddle
Thanks
Just with this simple css:
.Arial *, .ArialBold * { font-weight: inherit; }
.Arial { font-weight: normal; }
.ArialBold { font-weight: bold; }
Demo: http://jsfiddle.net/kHFX8/15/
Try this:
fiddle: http://jsfiddle.net/kHFX8/11/
.Arial > .ArialBold b{
font-weight: bold;
}
.Arial {
font-weight: normal;
}
.ArialBold, .Arial > .ArialBold span{
font-weight: bold;
}
I would appreciate a little assistance working with Psuedo Selectors for an ID within CSS. I cannot seem to display the first line of an ID in small caps. A snippet of both my CSS and the corresponding HTML is included for reference.
#introtext {
margin: 0px 0px 20px 0px;
background: transparent;
font-face: "arial black";
font-size: 22px;
font-weight: bold;
letter-spacing: .1em;
line-height: 1;
text-align: center;
}
#introtext:first-line {
font-variant: small-caps;
}
HTML:
<div id="introtext"><span id="introcap">H</span><span id="introtext.first">ere you will
find links to Scouting related websites and forms.</div>
Perhaps...
...your expectations are incorrect (and I know your code has an error). While I agree with the comments here that your code is working as expected, I am speculating you are attempting something different.
Did you want the first sentence in small caps?
I noticed in your code you have the "opening" tag of <span id="introtext.first"> but you failed to put the closing tag for that </span>. This is an error. However, if your intent is to have the whole first sentence to become small-caps, your code will still not work because the :first-line pseudo-element does not look at the first sentence, but the first-line (which varies based off of the container width).
Additionally
It is best to not use a . in an id, since the . is used for designating classes. And perhaps a class is what you really want anyway.
Finally, A Solution?
If my speculations about your goals are correct, then I recommend doing the following (keeping your #introtext css the same, but changing the html and :first-line code), as demonstrated in this FIDDLE.
HTML
<div id="introtext">
<span id="introcap">H</span><span class="first-sentence">ere you will find
links to Scouting related websites and forms.</span> More text to follow
in a second sentence. And a third. Blah. Blah.
</div>
CSS
.first-sentence {
font-variant: small-caps;
}
Although
It almost appears as though you intend this to be a header (since the text is centered), so maybe something like this is more semantic and also eliminates the need for your leading "H" to be separate (unless you want OLD browser support). Here is its demo FIDDLE.
HTML
<div>
<h2 id="introtext">Here you will find links to Scouting related websites
and forms.</h2> More text to follow in a second sentence. And a third.
Blah. Blah.
</div>
CSS
#introtext {
margin: 0px 0px 20px 0px;
background: transparent;
font-face: "arial black";
font-size: 22px;
font-weight: bold;
letter-spacing: .1em;
line-height: 1;
text-align: center;
font-variant: small-caps; /*<-- moved this to here*/
}
#introtext::first-letter {
font-variant: none; /*<-- reset the pseudo-element to normal */
}
Please look at the attached image, below:
This, I made up easily in Photoshop and is for the corporate identity on papers and such. However: I now need to create that for an email signature. Though.. I don't have a clue how to achieve the effect of having a square/rectangular background to the - well let's say - first letter of the sentence.
Since It should not cut off the text to the next row, I can't use a <p> tag.
I hope someone could help me! However, it's for an E-mail signature and all CSS must be inline. edit: And besides that: You can't use DIV's either.. Thank you very much!
You can use :first-letter
div:first-letter {
padding: 0 3px;
background: #f00;
}
Demo
Or a better one
div:first-letter {
padding: 2px 5px;
background: #174D95;
font-family: Arial;
color: #fff;
font-weight: bold;
margin-right: 2px;
}
Note: You can replace div with a p element too, but :first-letter will not work on inline elements.
Demo 2 (Using p tag)
As you wanted to do this with a span tag, you need to define it as inline-block; to make the :first-letter work.
Doing this with a span tag - Demo
span:first-letter {
padding: 2px 5px;
background: #174D95;
font-family: Arial;
color: #fff;
font-weight: bold;
margin-right: 2px;
}
span {
display:block
}
I have a heading (<h1>) that has a sort of tagline below it. (I used a <small> tag and set font-size to a certain percent so it lines up perfectly when I change font-size of the heading for smaller screens. I'm using em units, if that matters.)
At first, the <small> tag sat nicely underneath the main heading, but I realized I forgot the HTML5 DOCTYPE declaration. So, after I discovered this omission and corrected it, the spacing was all wrong.
Here's my code:
HTML:
<h1 class="banner">Justin Wilson<br /><small>WEB + GRAPHIC DESIGNER</small></h1>
CSS:
h1.banner {
text-align: center;
display: block;
font-family: 'arvil';
font-size: 6.5em;
color: #94babd; }
h1.banner > small {
font-family: Helvetica, Arial, sans-serif;
font-size: 27%;
color: #888;
letter-spacing: 1px;
font-weight: 100; }
And here's the before and after:
I have searched through StackOverflow, but I'm not sure how to proceed. I've read that a <br /> tag simply line breaks, but it inherits the line-spacing, and line-spacing: (value) does not work, nor do margins or padding.
What I need is a simple, cross-browser solution. I used Chrome for the screenshot. Support for IE6-7 is not needed, though support for IE8 would be nice.
The problem is caused by the default line height for the heading element. The default depends on the browser and on the font, but it tends to be about 1.1 to 1.3 times the font size. In any case, with a very large font size set, this creates a problem, because the line height value also sets the height of the second line. By CSS specifications, for a block element, line-height sets the minimum height of line boxes.
There are various ways around this. Setting display: block on the small element is one way, since then its default line height will be determined according to its own font size. Another way is to set a line height that is considerably smaller than the font size, e.g.
h1.banner { line-height: 0.5; }
You need to control the line-height css property (see W3 Schools) to make sure all browsers set the same height for each line.
It's actually advisable to do this to pretty much all elements containing text, which is why most people use CSS resets for production, which sets a default line-height across all elements.
In this case, the <span> and <h1> will likely have different line heights.
I'm sure the <br /> tag is doing nothing wrong, unless you've altered its properties with CSS which I would not advise.
There's also a shorthand version in case you're setting other font properties for the same element(s):
font: <font weight> <font size>/<line height> <font face>;
For example:
font: bold 12px/18px sans-serif;
Hope this helps.
Drop the <br /> and set the display of the <small> element to block.
http://cssdeck.com/labs/uoqfo4xw
<h1 class="banner">Justin Wilson <small>WEB + GRAPHIC DESIGNER</small></h1>
h1.banner {
text-align: center;
display: block;
font-family: 'arvil';
font-size: 6.5em;
color: #94babd; }
h1.banner > small {
font-family: Helvetica, Arial, sans-serif;
font-size: 27%;
color: #888;
letter-spacing: 1px;
font-weight: 100;
display: block; }
An alternative is to set the span to display: block; and then adjust the line-height of the <h2> tag.
I would do this, instead of using a <br /> tag.
Ultimately the answer that works as the best solution is found here (3rd example):
http://www.w3.org/html/wg/drafts/html/master/common-idioms.html#sub-head
#cimmanon posted a very helpful solution, but to be safe, I'll stick with what Steve Faulkner said about this being a more semantic and SEO-friendly solution over using an <h1> tag and <h2> tag for a subheading, or inline elements inside a heading tag, regardless of styling.
Here's the solution:
HTML:
<header>
<h1 class="banner">Justin Wilson</h1>
<p>WEB + GRAPHIC DESIGNER</p>
</header>
CSS:
h1.banner {
text-align: center;
display: block;
font-family: 'arvil';
font-size: 6.5em;
color: #94babd;
font-weight: normal;
margin: 1em 0 0 0;/*purely for display purposes, really*/ }
header > p {font-family: Helvetica, sans-serif;
font-size: 1.75em;
color: #888;
letter-spacing: 1px;
font-weight: 100;
text-align: center;
margin:0; }
And the live demo (might not look good to you without the free Arvil font, from Lost Fonts).
http://cssdeck.com/labs/xysgkffs
Thanks for all the answers thus far.
UPDATED....
Change <small> to <p> in HTML and CSS and add line to the h1.banner > p
margin: 0 auto;
FIDDLE