I'm trying to dynamically set a FontAwesome glyph inside a span or a button through the CSS property attr(property).
What I would like to have is to set an attribute on the tag
<button glyph="\f005"></button>
and then use it in the CSS file like this
button::before{
content: attr(glyph)
}
But it looks like it doesn't work and it just display the code I've written in the tag. Is there a way to "render" the code or to make the CSS consider it as an escaped character?
Take a look at this Fiddle for a quick example.
Try setting the value of the glyph attribute to a HTML entity, such as glyph=""
First of all, your CSS should be button::before or button::after, not only button. You can use content only in these.
Second, in HTML, you write entities like &XXXX;, not \XXXX, you mixed it up a little. Imagine it that the entity becomes single character and then it is transferred into CSS, not in another way. In HTML, you need to use HTML entities and in CSS, use CSS entities, even though they will travel through both languages in some way.
And third, don't use non-standard attributtes like glyph. They should be prepended with data-.
See http://codepen.io/ondrakoupil/pen/XbBvzV
Related
This is for a class project I have finished, but we can get bonus points for doing extras. I removed the underline in my hyperlink, and I was wondering if there was a way to put the underine back on a mouseover? I'm also not allowed to use CSS or anything other than HTML. I don't know if it is possible, but here is what I have:
<a href="http://www.tolkien.co.uk/index.html" style="text-decoration:none">J.R.R. Tolkien
This is the best I could come up with. What I will say though is that you are technically using CSS with the style, onmouseover, and onmouseout events, it is just doing so without the need of a CSS file because the style event is just making html understand it itself. The style event is then on the other two events, giving them the power to use CSS with only the html file.
J.R.R. Tolkien
You can't do this without Css, if you want to try it's :
a:hover{ text-decoration: underline;}
HTML has no mechanism to remove the underline from a link containing text.
The text-decoration: none syntax you are using is CSS. The style attribute takes the body of a CSS rule-set as its value.
The only ways to apply CSS dynamically based on if the mouse is pointing to something are with a separate stylesheet (where you can use selectors, including rulesets) or with JavaScript (where you can modify the CSS based on events).
Can I use :nth-child to select (and style) particular words in given HTML element? For example:
<h2 class="site-description">Four word long title</h2>
I'd like to change style -- change font-size and font-style of the first two words and make two following word wrap to another line -- without need to change HTML, to which I don't have access.
Is this possible with :nth-child?
If this is completely bad approach, then is there any other option to achieve this?
No it wont work with :nth-child
Because nth-child works only on child tags not on characters of string
if you cant change html try with jquery -
or refer this
Change color of selected text in a div using bootstrap & color picker
You can try this if you can edit html:
Separate the characters with span and apply css on that spans
Hope Helps
nth-child is applying on an html tag.
here you only have one html tags.
The possible would be to create a small js function or add a html tags for each of the words.
I would use the javascript solution.
Otherwise you could look with http://letteringjs.com/ if you are willing to accept another library.
I have a text like this
Html is a Webbased language. For styling the webpage we have to use
the css. For this we have to write the css and include those files.
My expected out put like this:
Html is a Webbased language.
For styling the webpage we have to use the css.
For this we have to write the css and include those files.
HTML ignores whitespace like newlines by default. You can handle it with CSS using the white space property.
div {
white-space: pre-line;
}
This will tell the browser to preserve line endings in divs.
EDIT
But if your text does not have newlines after the full stops, you either have to do this with JavaScript as Hashem Qolami pointed out, or serverside using whatever language you have there.
See String.prototype.replace() for how to do this client side.
The correct way to do this would be to use a list. Here's why:
HTML comes with it's own styling provided by H1-H6, p, strong, ul, ol etc. CSS merely adds visual styling.
You're obviously not breaking these lines for "the heck of it".
The output you desire is structured like a list.
The output would be read correctly regardless of the availability of visual styling (css) ex. screen readers etc.
Simple remove the list styling ex.
list-style-type: none;
The answer to your question is not "This can't be done", but you're approaching the problem from the wrong angle. This is not a CSS issue, but a problem with your markup.
Either use pre and make the text have actual line breaks after the periods
<pre>Html is a Webbased language.
For styling the webpage we have to use the css.
For this we have to write the css and include those files.</pre>
Or add html breaks with the <br> element
Html is a Webbased language.<br/> For styling the webpage we have to use the css.<br/> For this we have to write the css and include those files.
This is a old question but people here says it's impossible in html/css etc and no one has contributed with the most simple answer.
Yes, it is possible. You first need to specify that there should be a new line in the string by using "\n".
Then as Jørgen R answered:
"HTML ignores whitespace like newlines by default. You can handle it with CSS using the white space property."
So to answer the question.
Change the string to the following:
Html is a Webbased language. \n For styling the webpage we have to use the css. \n For this we have to write the css and include those files.
and add to your css:
.div{
white-space: pre-line;
}
Not doable in CSS. There is no selector that allows you to select a portion of the text. You'll have to add the line breaks "manually" in javascript.
I just wonder why should I use "class=" identificator instead of my own "tag"()?
Class example
<span class="red"> Hello there! (using class)</span>
.red {color: red;}
Tag example
<div id="reddiv">
<red>Hello, there (using own tag)</red>
</div>
#reddiv red {color: red;}
Its much more easier for me to use my own tags, since its faster to write.
Can you please tell me if doing it in first/second way has any negative/possitive sides?
While this may work in most browsers, your HTML then loses context. When an application like a search engine (or screen readers or anything else that looks at the source) parses your document, what is it to make of a tag named 'red' or 'purple' or 'job'? It won't have context, so you'll lose out. HTML uses a set of predefined tags that have meaning, you can venture out of it but you'll lose the advantage of everyone instantly understanding (all or part) of your document.
If this document is part of a data transfer framework and not on the public web, you should look at XML.
There are many advantages of using class.
First of all, with class, we use css styles which gives a lot more configuration options than simple HTML tags.
We give all the styles and formatting at one olace and just call the class everywhere we want to apply those, which in big projects like ERP, makes a big difference in code size.
The css style is more compatible with latest versions of browsers and a lot of old HTML formatting and style tags are deprecated in latest versions of HTML.
HTML tags behave differently under different browsers and different document modes. Where css will give same result everywhere.
The css classes can be applied to all the relevant tags on page at once just by defining it somewhere at the top of page.
You should also not forget that predefined tags have a lot of default properties and your custom tags none. So you would need to define everthing over again for all elements apart from span.
Also, you can have more than one class on an element, so <span class="red bold">Red</span> is possible.
You can remove, change and swap between classes to change dynamical the element style or behavior, what you can't do with tags.
Tag is element that needs class to set it behavior and style.
Custom elements are created using document.registerElement():
var reds = document.registerElement('red');
document.body.appendChild(new reds());
Can I write some style css code for every • code I use in my page, for example font-size: 16px;? Thanks.
No, you cannot. You cannot style text content, no matter how it’s encoded (either as direct characters or as entities).
The closest thing you can do is put <span class="bullet">•</span> into the document and style the class bullet.
Others have answered the main question; you cannot specify a CSS Rule based on text content (just on HTML elements, classes, and ids).
What you could do is use Javascript, or server-side rendering to do a .Replace() to wrap the character with the necessary HTML tags (replace just the character with a wrapped version of the character).
Here's a quick proof-of-concept; it could easily avoid the jQuery (it's a crutch of mine), and you might play around a bit with how the character is encoded in the Javascript (I had to copy/paste it in to work).
The key portion is:
.replace("•","<span class='bullet'>•</span>")
No. With CSS you can only address elements but not certain characters (ok, there are exceptions like :first-letter). You would need to put it into an element like span:
<span class="bullet">•</span>
Then you can use the selector span.bullet to style these elements:
span.bullet {
font-size: 16px;
}