I would like to html code part of my tumblr page, but in the context, I can't add any css. Is there any way to format text size, font, color, etc. without using css? I looked at <font> tags but they don't seem to be supported in html5. Is there a workaround or tag that would do this for me?
Thanks for all your help
With HTML alone, without any CSS, you can set
font family with <font face=...>
font size with <font size=...> (though just to a few values)
text color with <font color=...>
italic typefact with <i>
bold typeface with <b>
superscripts with <sup>
subscripts with <sub>
underlining with <u>
forced line breaks with <br>
allowed direct line break points with <wbr>
allowed hyphenation (word division) points with
no line breaks with <nobr>
text alignment in some elements with align attribute or (for vertical alignment) valign attribute
background color and/or image with bgcolor and background attributes in body element and in table-related elements
automatically scrolling text with <marquee>
and some other formatting tools (it is somewhat debatable what belongs to text formatting).
Although HTML5 drafts declare many of these as “obsolete” and “nonconforming”, they also require or strongly recommend (depending on element) that browsers continue supporting them, with the exception of nobr (which is well supported by browsers, with no signs of getting dropped).
(HTML5 is a draft specification. It does not “support” anything; browsers do. Specifications may require support, but that’s just a normative statement, about how things should be.)
If you can in fact use CSS at least in style attributes, then there are many more possibilities, though styling is then clumsy and limited.
Add CSS as a style directly to the tag you want to format.
EX.
<p style="width:20px;height:20px;background-color:#ffcc00;">The contents go here</p>
CSS in a separate file may not be the answer but you may be able to include it in the head of the HTML file like so:
<doctype HTML>
<html>
<head> <title>My title</title>
<style>h1{
color:red;
font-size:20px;
}
</style>
</head>
<body><h1>My large text heading</h1>
<script>alert("Hi , I'm in javascript inside the HTML File");</script>
</body>
</html>
That is the easiest way and by doing so the code is in all one place, inside the head of the HTML file in a style tag, and can be edited easily. FYI Javascript functions can be added by placing them inside a '<script >alert("Hi , I'm in javascript");</script>' tag like above HTML code shows.
You can also add This would remove the underline and any formatting on the link. You can then also add your own styling e.g
Great Question,
There are a couple ways that you could go about doing this. One way to go about doing this is by using inline css. Inline css looks like this: <p style="color:red">
The Second way about going this is by seeing if your template has advanced settings under the settings. There you can edit the css file and then reference it in the html!
The second way will save you tons of time and help your blog look nice!
Your Welcome,
Oak
You may use the span style, div styles for styling the web page with out using cascading sheets.
Ex: <span style="color:#abc123;"> NAME </span>
Related
I've been using Font Awesome for a while and I wonder one thing which tag should I use for it.
Here is said that they like the <i> tag for brevity, but using a <span> is more semantically correct.
I read specification for <i> and <span>. Unfortunately, I can't find the difference, they're both have the same context in which they can be used.
The difference between <span> and <i> is that <i> was originally intended for italics font, while <span> is intended to encapsulate a piece of content without changing any css rules immediately. In other words, <span> can be used for any custom css action you want to apply.
Therefore, from a theoretical and historical perspective, <span> would be a more proper choice.
However, <i> is much shorter and the effect in the browser is identical, so choose <i> in order to optimize your page speed with a few microseconds, and your coding speed with a few seconds.
It is because <i> is for italic text in html and <span> can contain any inline element. Thus using span instead of i is more semantically correct. But still <span> is also not denoting for using icons in html, so this is also not more semantically correct until you add a role as img like this:
<span class="your_awesome_font_icon" role="img"></span>
It seems to me that specifying the "importance" (read "size") of an element in the HTML violates the principle of separation of concerns that HTML5 espouses so much. If the designers of HTML5 deprecated tags like <big> and <strike> (see this link for a list of other such elements) because their behavior can and should be replicated in CSS, why wasn't the same done to the heading size tags (<h1>, <h2>, etc...)? Could these tags not have all been merged into one <h> tag, and then have CSS classes added to them to size them properly (eg <h1 class="big-header">)?
It seems highly arbitrary that the designers of HTML5 would include only six (see this link) <h> tags, all to be interpreted and displayed slightly differently. How was the number six determined? Why would they not develop one tag and leave it up to the developer to style it properly?
<h1>, <h2> ... <h6> are semantically important; they have a meaning besides the default styles. For the same reason <nav>, <aside>, <article>, <footer>, etc. were added in HTML5.
To quote the spec:
Because HTML conveys meaning, rather than presentation, the same page can also be used by a small browser on a mobile phone, without any change to the page. Instead of headings being in large letters as on the desktop, for example, the browser on the mobile phone might use the same size text for the whole the page, but with the headings in bold.
It seems as if maybe they wanted to allow responsiveness to be built into the standard, and that may be part of the reason.
Link to the quoted passage
If they left it to the developer to supply all CSS for headings, why use headings at all, aside from semantic meaning.
The difference is that the number in h are not related with size, are related with content deep, titles and sub titles so h1 represent the main title, h2 represents second level subtitles, h3 3rd level of subtitles and so on.
I try to code CSS in "Help Class Style" today and many developers on Twitter said it was a bad practice.
Here is an example:
<span class="et-margin-top-30 et-width-400 et-display-inline">
<p class="et-common-frame-shadow et-inner-img-shadow">
<img class="et-common-frame-img" src="img3.jpg"/>
</p>
<h3 class="et-margin-top-10 et-fontsize-26 et-fontweight-bold">foo</h3>
<p class="et-margin-top-10">bar</p>
</span>
Why is it a bad practice? When should we use a helper class such as .clear?
The idea of styling via CSS is separation between content and styling. Your content is in HTML and CSS provides the information on how that should be visually displayed. If you want to change one, you can do so without changing the other.
By naming your classes et-margin-top-30, you're putting the styling information back into your HTML. You may as well write style="margin-top: 30px". Because if you decide that that element should have a 50 pixel margin after all, you need to change both the CSS and the HTML. That's why it's bad style.
You should rather name your HTML elements by their function (e.g. class="headline", or class="call-to-action"), then describe in your CSS how that headline or that call-to-action should be styled. If you want to change that later, you can do so by simply editing your CSS, the HTML doesn't need to change.
Not to mention that if you're using Javascript to manipulate elements, using document.getElementsByClassName('et-margin-top-30') a) makes it very hard to understand the meaning of your scripts and HTML structure and b) requires that you modify your HTML, CSS and Javascript every time you want to tweak the visual appearance of an element. Using descriptive class names becomes doubly important then.
What you are trying to do there looks horrible. It looks like you have a class for all different styling attributes. Not only will it make your HTML unreadable, but it will also enlarge the file size.
What if an element has 15 styles "attached" to it. Will it have 15 classes?
I also think this will only make this slower to render (this is just something I just made up and for which I have no proof), because it has to look up all those classes.
I don't see any difference in doing <p style="color: red;"></p>.
Sometimes, I found too many people like to insert a <span> tag in a <button> tag. Sometimes, they place two <span> tags. I want to know, why do they do this?
CSS is supposed to allow separation between content and style. Unluckily, when you need a complex design you often need to alter your HTML markup so you can apply the necessary CSS rules.
I've seen this with <div>. That's done for styling (double borders), but it's also done to handle IE bugs (box-border model bug).
In XHTML Strict, it seems that you're not allowed to use the <u> tag any more. Is there a semantic equivalent like there is for <b> and <i>? If not, is there any convention for how to markup underlined text in XHTML?
Thanks.
In short - no.
<b> and <i> don't really have equivalents, either. It's all about the separation of content and appearance. The goal of XHTML strict is that the XHTML markup should be used to describe the structure of the content.
<em> tags are used to convey emphasis and <strong> tags are used to give strength to the content. It just so happens that the default style sheet in most browsers equates these to italic and bold respectively.
Having a direct equivalent for bold, italic and underline in XHTML would allow people to dictate the appearance of the content too closely. Ideally, you should think about why you want a piece of text to stand out, define that in the structure and then leave the CSS boys to decide how it should ultimately be rendered.
To have an equivalent, you have to define why you are underlining things in the first place. If it's just your preferred way of emphasizing text, then use <em> and change its style in CSS to be underlined instead of italic.
Your question is flawed - "underline" has no semantic meaning, no more than bold or italics do (strong and em have default styles, but they aren't hard wired to bold or italic in the way you think they are).
The correct approach here is to mark up with a <span class="highlight"> (or some other suitable keyword - I don't know your app) or just mark-up with and override the css for <em> if this is going to be a common enough occurrence.
Also: there is always a problem with using underline in any kind of emphasis manner since there is a built up convention that links are underlined. I would generally consider non-linked underlines a usability issue, even if actual links are not underlined. Think carefully that you really need this.
<em style="text-decoration: underline">
No. And there is no "semantic equivalent" to <b> or <i> either. It just so happens that <em> and <strong> (I assume those are what you had in mind) are implemented, by default, using bold and italics in most browsers.
Typographic stuff like underlining should be implemented using CSS, of course. Make a class and use a <span>.
As far as I know not. But it is a bit questionable to see strong as an equivalent of b.
The purpose of the new tags is to decouple the format (bold) from the meaning (more visible text). The default apearance is bold, but you could create any style you like.
nope, you have to use css with text-decoration: underline