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
}
Related
I've been trying to solve the following problem.
If you run this code you will notice blue and red elements.
How can I hide the 'red element' when there is no text to display (span is empty). And I would like to do the same thing with 'blue element' when there is no text inside it shouldn't be visible.
The reason why is displayed is padding, but I would like to have padding because it looks nice.
I am sure you guys are best of the best and find solution.
Regards!
.myClassDer {
font-size: 34px;
color:white;
background: blue;
color: white;
border-radius: 25px;
padding: 7px;
width: auto;
height: auto;
}
.myClassDie {
font-size: 34px;
color:black;
background: red;
color: white;
border-radius: 25px;
padding: 7px;
width: auto;
height: auto;
}
<span class="myClassDer">here</span>
<span class="myClassDie"></span>
If you don't require support for IE8, you can use pseudo-state :empty (here for more examples ) to reset padding for all instances of .myClassDie without content, using the following code.
.myClassDie:empty
{
padding:0;
}
Updating your working example, it becomes:
.myClassDer
{
font-size: 34px;
color:white;
background: blue;
color: white;
border-radius: 25px;
padding: 7px;
width: auto;
height: auto;
}
.myClassDie
{
font-size: 34px;
color:black;
background: red;
color: white;
border-radius: 25px;
padding: 7px;
width: auto;
height: auto;
}
.myClassDie:empty
{
padding:0;
}
<span class="myClassDer">here</span>
<span class="myClassDie"></span>
<span class="myClassDie">ClassDie but with content</span>
In which I inserted two <span class="myClassDie"> to show you the behaviour with and without content.
Due to effective invisibility of "empty" case, if you want a more compact solution, you can collapse the two separate rules into only one, simply setting:
.myClassDie:not(:empty)
{
font-size: 34px;
color:black;
background: red;
color: white;
border-radius: 25px;
padding: 7px;
width: auto;
height: auto;
}
In this case, only if .myClassDie is not empty, you'll apply all properties.
This is equivalent for this specific case, but if you want to see this DIV also if empty, limiting only to reset padding (for example because it has fixed size or borders), you must use first solution, not the more compact one.
Little precisation about :empty pseudo-class
Previous examples run correctly only if empty elements are effectively empty, this means that this code <span class="myClassDie"></span> is correctly targeted, but this one (that contains a whitespace) <span class="myClassDie"> </span> isn't.
In general, this could be an issue because often code is dynamically generated or otherwise contains white spaces due to code indentation.
In the past, Mozilla introduced its proprietary pseudo-class :-moz-only-whitespace, but no other browser currently supports this yet.
W3 also tried to solve this kind of problems, initially with analogue :blank pseudo-class (again with no browser support) in "Selectors Level 3", but this did not have expected success.
So, since beginning of 2018, W3 modified its definition to represent empty user input, rather than empty elements and contemporarily modified :empty definition to consider also white-spaces, but currently this last feature is not implemented too in different browsers.
Empty pseudo class only checks for empty text
.myClassDie:empty{
padding:0;
}
But for whitespaces use blank pseudo class
.myClassDie:blank{
padding:0;
}
There is a css pseudoclass empty which you could use here:
.myClassDie:empty {
display: none;
}
Your updated JSFiddle
You can do the trick with the CSS3 pesudo-class :empty
span:empty{
padding:0;
}
Note: using above selector you will not have to worry about which span
has value and which one has not. it will reset padding for those span
which are blank (empty).
I guess you could use above piece of code to hide the empty span's padding.
span:empty {
padding: 0;
}
you can you :empty also read the below like.
https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-classes
.myClassDie:empty {padding:0;}
I'm using Blogger.
I have modified a bit the CSS of the template, though I can't find why each time a link (section) is selected it goes up. At first I thought it was some margin-top issue, but I don't find a problem with it in the actual CSS.
Since I don't know how deep I can go to a CSS in Blogger, I don't know what else to do. I tried using the inspector in Chrome but there's nothing wrong or I'm blind.
Take a look: Select a link from the top and cry with me.
http://safetyinsolitude.blogspot.mx/
Add the following css-selector:
.tabs-inner .widget li {
line-height: 3.2;
}
Add this to your CSS:
.tabs-inner .widget span {
line-height: 3.2;
display: inline-block;
padding: .6em 1em;
border-left: 1px solid transparent;
font: normal normal 14px Crimson Text;
border-right: 0 solid #000000;
}
Change the line height of the span.
I have the text
Coupon*
in font size 30px. However I want to make the * not in 30px but smaller. How can I achieve this?
http://jsfiddle.net/LkLGE/
Thanks
To keep the asterisk aligned on the top, you can put the character in a <sup> tag and reduce its font-size:
<div class="text">Coupon<sup>*</sup></div>
.text {
font-size: 30px;
}
.text sup {
font-size: .5em;
}
JSFiddle example
As an alternative to <span> based answers <sup or <sub> or <small> might be a better starting point from a semantic standpoint.
<sup> is superscript and will raise the *.
<sub> is subscript and will lower the *.
<small> might require adding some css *, but shouldn't already have a position change. See http://www.w3.org/TR/html5/text-level-semantics.html#the-small-element
Fiddle to show it in action: http://jsfiddle.net/6jmKT/
Coupon<span style="font-size:any size that you want">*</span>
I'm not sure about your case, but sometimes you want to do this in many places. Sometimes, you'll have a "new" or "special" item and you'll add a class with javascript to denote this.
Think about if you have to change this somewhere and how many places you might need to edit this span. Of course you could find-and-replace, but try THIS FIDDLE out and see what you think. CSS content() is pretty amazing for stuff like this.
HTML
<div class="thing special">
<!-- where special might be added by javascript -->
Coupon
</div>
CSS
.thing {
font-size: 30px;
color: blue;
}
.special:after {
display: inline-block;
/* so you can use "block" like stuff on it - (margin-top etc) */
/* this way you wouldn't have to change it in the html in a ton of places. just one - here. */
content: "*";
font-size: 15px;
color: red;
/* just for specific positioning */
vertical-align: top;
margin-left: -8px;
margin-top: 5px;
}
OR
sup is totally cool too - I think...
HTML
<p>Coupon<sup class="star">*</sup></p>
CSS
p {
font-size: 30px;
}
p .star {
font-size: 15px;
color: red;
}
When in doubt, put it in a span - FIDDLE
#myspan {
font-size: 10px;
}
This FIDDLE is a bit reductio ad absurdum, but it was fun!
You can use span and you can use <sup> tag:
EXAMPLE
<div class="text">Coupon<span class="star"><sup>*</sup></span></div>
.text {
font-size: 30px;
}
.star {
font-size: 12px;
}
http://jsfiddle.net/LkLGE/4/
The most robust way is to use the small element. If you wish to tune its effect to some specific size reduction, it is best to use a class attribute on it. Example:
<style>
.ast { font-size: 70% }
</style>
...
Coupon<small class=ast>*</small>
However, the asterisk “*” is rather small in many fonts, so size reduction easily makes it too small. If you think you need to reduce its size, you probably need a different font.
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 */
}
Building a new website and using the 960 grid system, with the following css:
960_24_col
text
rest
I'm also using my own style.css.
So, I am trying to apply the following css to my header 2 (h2)
h2 {
font-size: 26px;
text-transform: lowercase;
border-bottom: 1px solid yellow;
padding-bottom: 30px;
margin-bottom: 15px;
}
But it doesn't seem to apply. When I inspect the element in Chrome, some of the h2 elements are crossed out (line through it) in my style.css...when I copy the above code to say text.css..its works (but also applies to the other h1, h2, h3 etc)
Any of you css wizards go any ideas?
CSS files are read in order. So if one file is loaded which sets style on h1, and another file is loaded that also sets style on h1, the second one will overrule the first.
A nasty way to fix that is to add !important to the end of your style, ie:
h2 {
font-size: 26px;
text-transform: lowercase;
border-bottom: 1px solid yellow !important;
padding-bottom: 30px;
margin-bottom: 15px;
}
There must be some other style also defined for h2 in style.css the strike-through in chrome inspector means that this style has been over ridden, try finding any other occurrences for h2 in style.css
Or if you want to keep both of style definitions due to some intentional changes you made try using !important after respective property which you don’t want to be over-ridden to ask browser to give top priority to this style instead of others
h2 {
font-size: 26px !important; /*same with every other property you want to give top priority*/
text-transform: lowercase;
border-bottom: 1px solid yellow;
padding-bottom: 30px;
margin-bottom: 15px;
}