I have a paragraph tag and I want the text in it to have every other letter orange and the rest of the letters dark orange. The lazy code looks like this:
Html
<p>
<span class='orange'>L</span>
<span class='yellow'>o</span>
<span class='orange'>r</span>
<span class='yellow'>e</span>
<span class='orange'>m</span>
</p>
Css
.yellow {
color: darkorange;
}
.orange {
color: orange;
}
Fiddle (Second color turned to blue for noticeability)
How can I make this code look less lazy? I know when you read this question the first time you probably think "Impossible. Can only be done with sorcery.", but I think this should probably be very simple. I'll cope with anything, even a way to make an image repeat across the text.
In CSS you cannot target individual letters of character data content, only elements and a small subset of pseudoelements. You do need markup therefore. You should however never use presentational names in classes, that is the job of CSS. So use the anonymous semanticless inline element <span> without further details, and then just use advanced CSS selectors:
<p>
<span>L</span>
<span>o</span>
<span>r</span>
<span>e</span>
<span>m</span>
</p>
And CSS:
p {
color:orange;
}
p span:nth-child(odd) {
color:yellow;
}
Seen here in action.
Related
I would like to ensure that my chords above words are separated nicely by multiple white space.
The issue is that when I use pre, it comes out pre-formatted and hence not what I wanted.
Also, with , the code looks very ugly.
What is the best method to solve this?
<pre>Chorus:
Em A
A common love for each other
F#m Bm
A common gift to the Saviour
</pre>
Em A D D7
A common bond holding us to the Lord
Here is the link to the url: http://teach.sg/blog/a-common-love/
There are some white space characters like will be useful. You can use for tab. You can also use CSS for this.
I have an alternative solution, please see if it is suitable for your purposes:
I have nested all chords in a <span class = 'chord'> element, and then used CSS style rules to move the chords up and to the left a little bit. There is a little bit of ugly whitespace with this method, but it is more concise and definitely much more elegant than spamming space characters.
.chord {
position: relative;
font-size: 0.8em;
bottom: 1.5em;
right: 2em;
width: 0.5em;
}
p {
line-height: 2em;
}
<body>
<p>A common love <span class='chord'>Em</span> for each other <span class='chord'>A</span>
</p>
<p>A common gift <span class='chord'>F#m</span> to the Saviour <span class='chord'>Bm</span>
</p>
<p>A common bond <span class='chord'>Em</span> holding us <span class='chord'>A</span> to the Lord <span class='chord'>D-D7</span>
</p>
</body>
JSFiddle here.
<h3 class="st-module-heading">
<span>
<span>Lastest Products</span>
</span>
</h3>
I want to defind css for span element contain content "Latest Products".
How will do do? Thanks so much.
One option would be to give the span a class:
<h3 class="st-module-heading">
<span>
<span class='myspan'>Lastest Products</span>
</span>
</h3>
Then in CSS, depending on how specific or general you need to be:
.myspan { ... }
/*or*/
span.myspan { ... }
/*or*/
h3.st-module-heading span.myspan { ... }
Without a specific class defined, you would need to do this:
h3.st-module-heading span span { ... }
Which selects the <span> inside the <span> inside <h3 class=st-module-heading>.
But why the extra <span>? In your current code, it is not doing anything. You could just as easily remove it all together unless you are going to need it for something.
Either way, here's a Fiddle to play around with.
the selector should be:
h3.st-module-heading span {
}
html:
<h3 class="st-module-heading">
<span>Lastest Products</span>
</h3>
Assuming that exact structure (the two nested spans), you can use the following css to only select the second nested span:
HTML:
<h3 class="st-module-heading">
<span>
<span>Lastest Products</span>
</span>
</h3>
CSS:
.st-module-heading>span>span {
/* Your css here */
}
The > is the child selector - so .st-module-heading>span>span literally means 'select the span which is directly inside another span, which is directly inside the element with the class st-module-heading'.
You could simply use .st-module-heading span span if need be - but that may not suit if you have additional nested spans.
Link to JS Fiddle.
I've read that headers shouldn't be used as subtexts to other headers for HTML5 in order to have a nice outline.
for example:
<h1>Frustration</h1><br />
<h2>The life of developers</h2>
Rather, it could be written like this instead:
<h1>Frustration
<br />
<span style="font-size: 0.67em">The life of developers</span>
</h1>
The problem is that I have no control on the line-height of the subtext. It takes on the line-height of the H1 and that always seem a little too far.
I realize could do something like:
h1+.subtitle
to target the same thing, but I'd just like to know whether there is any way for the second option above to let me manipulate a paragraph with two different line-heights.
EDIT:
I'm using the latest version of Firefox.
As I continue to look for a solution, I'm beginning to wonder if this is a silly question to be asking, seeing as the browser has no reason to think the user would want separate line-heights within the same tag--especially when there are alternatives like using block elements with a negative margin-top.
You could do this:
<h1>
<span class="mainText">Frustration</span>
<span class="subText">The life of developers</span>
</h1>
h1 .mainText {
display: block; /* this prevent the need for the <br/> */
/* additional style for the main header text */
}
h1 .subText {
/* styling for the subtext */
}
You could also do this (which is easier I guess):
<h1>text
<div>subtext</div>
</h1>
h1 div {
font-size: 0.67em
}
The subtext will have a lower line height. See this jsfiddle for the latter one: http://jsfiddle.net/wLD35/
If i have something like
<p id="something">My Text Here</p>
Is it possible to use some kind of pseudo-selector in CSS to apply a style only to certain text elements from my text?
Example, i want:
"My" to be color: red;
and "Text" color: blue;
No, this is not possible.
There are pseudo-selectors such as :first-letter and :first-line, but you cannot select invidual words without wrapping them in elements that you can individually style:
<p id="something">
<span class="foo">My</span>
<span class="bar">Text</span>
<span class="baz">Here</span>
</p>
You'd then be able to style them individually:
.foo {
color: #ff0000;
}
.bar {
color: #00ff00;
}
.baz {
color: #0000ff;
}
No. If you want parts of the text to have different colors, you 'll have to wrap them inside separate elements (most likely, ''s). For example:
<p id="something"><span class="red">My</span> <span class="blue">Text</span> Here</p>
And of course this will also need the appropriate CSS for .red and .blue.
The exception to the above are the pseudo-selectors :first-letter and :first-line, but these do not offer any flexibility.
You can use first letter pseudo class for styling first letter
p:first-letter
{
font-size:200%;
color:#8A2BE2;
}
But you cant use pseudo class for 2nd "text" you have to wrap this in a html tag & style it separately.
Not possible with Styling words differently.
Other users already told you that it is not possible natively.
If you use jQuery, as I assume from your tag, you can do a little trickery from JavaScript and "tokenize" the text in the P tag with:
$("p").html($.map($("p").text().split(" "),function (i,e) {return "<span id='w"+e+"'>"+i+"</span>";}).join(" "));
This command takes a selector (p in this case, but you can use p#myId and so on) and substitutes every word:
This is a sentence
becomes
<span id='w0'>This</span>
<span id='w1'>is</span>
<span id='w2'>a</span>
<span id='w3'>sentence</span>
So you could use a CSS like:
p span.w2 {color: red;}
to color the third word.
I was browsing related issues for my question but I can't seem to find the answer for it. Anyways, I want to know if I can still use the p or div tags instead of header tags when I have already used both (p and div tags) as plain text on my site. The reason is that I only want to have one header tag h1 present in my site. I tried to tweak some parts and got lost along the way. Sadly, after a couple of testing, it did not work... I was wondering if it's possible or if there's any other HTML tag that I can use other than header tag. Any response from you guys will be very much appreciated. =)
You can make a <p> look however you like, for example:
<p class="header">This is a header</p>
with
p.header { font-size: 200%; font-weight: bold; }
but I would recommend against it. The reason is that HTML is (ostensibly) semantic so if you declare:
<h3>This is a header</h3>
you're actually saying (semantically) that the given text is a heading of some sort. Remember you have <h1> through <h6> and you can pick and choose which of them you use. There is no need to use <h1> to use <h2> and so on.
This is also useful for those visually impaired as something styled as a heading won't be indicated as such to those using screen readers but a heading will be. You should cater for accessibility issues where possible.
You should not style a div, span, or p to look like a heading and then use it in place off an h1-h6. That is exactly contrary to the spirit behind the rule of thumb that you shouldn't have more than one h1 on a page.
<span> is a useful addition, as well.
You can use P and DIV tags over and over. If you need to, style them to look like H1's.
p.title {
font-size:18px;
font-weight:bold;
}
p.header2 {
background: url("bg.jpg");
}
--
<p class="title">My Title</p>
<p>And this paragraph will simply be regular text.</p>
<p class="title header2">My Other Title, with a Background Image</p>
<p>And this paragraph will also be regular text.</p>
Don't forget to remember SEO on your site. Presumably this is why you only want one H1 tag?
<span> <strong> and <em> are others you can use inside your <p> tags.
i would use <div> or <span> tags and use ids or classes to control the style. use ids if there is only once instance or classes if you want to repeat this style. you can also use multiple classes on one element
for example
<div id="text">Text Here</div>
<span class="red">This would be red</span>
<div class="red big">This would be big and red</div>
with css
#text{ font-size: 20px; }
.red{ color: red; }
.big{ font-size: 40px; }
hope this helps
You can use multiple h1's or h2's and just target them like this:
<div id="header"><h1>Title of page/h1></div>
<div id="main"><h1>Title of article</h1></div>
#header h1{ color:red;}
#main h1{ color:blue;}
It's not quite what you're asking. I suspect Google is a bit smarter than single H1 approaches.