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());
Related
My professor asked us to develop a website using pure HTML,
JUST HTML. And it's really hard to design without CSS but I have to follow her instructions.
Anyway, my question is do you consider this code as CSS even if I removed the type="text/css"?
<style>
a {color:white; }
</style>
This maybe a dumb question but thanks for your time to answer it, I just really want to use CSS to make it easier.
Could you suggest anything that would make my coding easier? I just don't want to have repetitive code.
You are having this snippet,
a {
color:white;
}
is an element selector with the color property, whatever you write, i.e, between <style> tag, or style attribute, or stylesheet, all are CSS, if your professor is vintage fan, and is asking you to assign the color to a than you can use the font tag with color attribute with a value of white
<font color="white">Hello</font>
Demo
Note: Please read the box on the Mozilla Developer Network which says
SO DON'T USE IT
And just incase your professor understands, and his mind comes back to 2014... than would like to point out that even using
a {
color: white;
}
will target all the a elements in your document, so make sure you use a class or a specific selector to select particular a element.
Anyway, my question is do you consider this code as CSS even if I removed the type="text/css"?
CSS is CSS, not matter how it is added to the document or labeled.
it's really hard to design without CSS but I have to follow her instructions.
Could you suggest anything that would make my coding easier?
I'd start by clarifying if CSS really is forbidden and, if it is, what the purpose of forbidding it is. I can think of a number of possible reasons:
To prepare you to deal with code written by someone from 1996
To make you focus on the structure and semantics instead of the appearance
The course you are taking is almost two decades out of date
How you deal with the problem depends on which of those is the reason.
If it is the first one, then you need to look at all the obsolete, deprecated (and possibly non-standard too) presentational features of HTML (like <font> and background attributes).
If it is the second one, you just don't worry about how it looks and deal with the structure and the semantics. Let the browser's default stylesheet control the way it looks.
If it is the third one, then you probably have little option but to grit your teeth and bare it or find a better course.
<style>
a {color:white; }
</style>
Yes you write type="text/css" or not it will be considered as css.
The content of a style element is CSS, for most practical purposes (it would hardly make sense to use anything else there, since no other style sheet language is supported by browsers). The attribute type="text/css" does not change this, because the de facto default style sheet language is CSS.
On the other hand, the style element, including its content, is HTML. The content is not defined in HTML but in other specifications. Similar considerations apply to style attributes, as in <a style="color: white">...</a>: the attributes are HTML, and but they contain embedded CSS.
When you are told to use “pure HTML, JUST HTML”, then you are probably expected to refrain from using CSS or JavaScript in any way. On the other hand, you are probably allowed to use images, even though images are not HTML but are used via external references or data: URLs. There is nothing particularly logical in such a requirement.
As suggested in other answers, simply do not try to control the rendering of the page. Worry about the rendering only if it becomes intolerably messy and there is a reasonable way to prevent that in “pure HTML”. For example, don’t try to set link colors (this would in fact be an improvement over the way most web pages deal with links), backgrounds, fonts, etc. But if you use e.g. a data table, consider using , which often makes a table essentially more readable.
Yes, you can:
and too you can put style inline in your body or header
<style>
a{
color: #ffffff;
}
</style>
and so, all your css you can write it in your native .html without use of another .css file
What is the preferred method for setting CSS properties?
Inline style properties:
<div style="width:20px;height:20px;background-color:#ffcc00;"></div>
Style properties in <style>...</style> tags:
<style>.gold{width:20px;height:20px;background-color:#ffcc00;}</style><div class="gold"></div>
Style rules can be attached using:
External Files
In-page Style Tags
Inline Style Attribute
Generally, I prefer to use linked style sheets because they:
can be cached by browsers for performance; and
are a lot easier to maintain for a development perspective.
However, your question is asking specifically about the style tag versus inline styles. Prefer to use the style tag, in this case, because it:
provides a clear separation of markup from styling;
produces cleaner HTML markup; and
is more efficient with selectors to apply rules to multiple elements on a page improving management as well as making your page size smaller.
Inline elements only affect their respective element.
An important difference between the style tag and the inline attribute is specificity. Specificity determines when one style overrides another. Generally, inline styles have a higher specificity.
Read CSS: Specificity Wars for an entertaining look at this subject.
Here's one aspect that could rule the difference:
If you change an element's style in JavaScript, you are affecting the inline style. If there's already a style there, you overwrite it permanently. But, if the style were defined in an external sheet or in a <style> tag, then setting the inline one to "" restores the style from that source.
It depends.
The main point is to avoid repeated code.
If the same code need to be re-used 2 times or more, and should be in sync when change, use external style sheet.
If you only use it once, I think inline is ok.
To answer your direct question: neither of these is the preferred method. Use a separate file.
Inline styles should only be used as a last resort, or set by Javascript code. Inline styles have the highest level of specificity, so override your actual stylesheets. This can make them hard to control (you should avoid !important as well for the same reason).
An embedded <style> block is not recommended, because you lose the browser's ability to cache the stylesheet across multiple pages on your site.
So in short, wherever possible, you should put your styles into a separate CSS file.
From a maintainability standpoint, it's much simpler to manage one item in one file, than it is to manage multiple items in possibly multiple files.
Separating your styling will help make your life much easier, especially when job duties are distributed amongst different individuals. Reusability and portability will save you plenty of time down the road.
When using an inline style, that will override any external properties that are set.
I agree with the majority view that external stylesheets are the prefered method.
However, here are some practical exceptions:
Dynamic background images. CSS stylesheets are static files so you need to use an inline style to add a dynamic (from a database, CMS etc...) background-image style.
If an element needs to be hidden when the page loads, using an external stylesheet for this is not practical, since there will always be some delay before the stylesheet is processed and the element will be visible until that happens. style="display: none;" is the best way to achieve this.
If an application is going to give the user fine control over a particular CSS value, e.g. text color, then it may be necessary to add this to inline style elements or in-page <style></style> blocks. E.g. style="color:#{{ page.color }}", or <style> p.themed { color: #{{ page.color }}; }</style>
Whenever is possible is preferable to use class .myclass{} and identifier #myclass{}, so use a dedicated css file or tag <style></style> within an html.
Inline style is good to change css option dynamically with javascript.
There can be different reasons for choosing one way over the other.
If you need to specify css to elements that are generated programmatically (for example modifying css for images of different sizes), it can be more maintainable to use inline css.
If some css is valid only for the current page, you should rather use the script tag than a separate .css file. It is good if the browser doesn't have to do too many http requests.
Otherwise, as stated, it is better to use a separate css file.
You can set CSS using three different ways as mentioned below :-
1.External style sheet
2.Internal style sheet
3.Inline style
Preferred / ideal way of setting the css style is using as external style sheets when the style is applied to many pages.
With an external style sheet, you can change the look of an entire Web site by changing one file.
sample usage can be :-
<head>
<link rel="stylesheet" type="text/css" href="your_css_file_name.css">
</head>
If you want to apply a unique style to a single document then you can use Internal style sheet.
Don't use inline style sheet,as it mixes content with presentation and looses many advantages.
Inline CSS have more precedence than CSS within tag.
There are three ways to add CSS.
Read this article on w3school, very informative.
I'm trying to style a post on an internet forum that doesn't allow stylesheets, only inline styles. But it seems that inline styles don't get inherited by children, only the text immediately below (for instance using <h1> will remove the background color from the text). Is there any way to make it pass the styles down without having to add them to every node?
although #SimeVidas is right, I think his response was a bit quick. Some caution do is required. I updated his fiddle http://jsfiddle.net/fRpQ2/4/ to demonstrate.
If a specific property is declared in the stylesheet for a given tag, that value will NOT be inherited from the parent with the inline style. I guess this is what you are encountering on the forum post you try to style. Nothing to do about this without using style-tags or linked stylesheets. Just a lot of copying required in your case I'm afraid. You could also inspect the site and apply existing classes to your post, but that is only if you want to copy the styling they already apply wich i doubt is the case.
I would advice you to do some reading on the cascading order of styles if you want to learn more.
couldn't you just also define a <style> block if the forum parses html?
Often times I see something like this:
<body>
<div class="container">
</div>
</body>
Why not just do:
<body class="container">
</body>
You are perfectly free to do any of the following:
add a class or id attribute to the body element;
directly apply CSS to the body element, with or without class or id attributes; or
directly apply CSS to the html element, although without the class or id attributes and with some important caveats.
Any of these are perfectly legitimate uses of CSS and HTML.
Why <div id="container"/>? Through the years, many CSS techniques have employed arbitrary container elements for conceptual simplicity, to avoid certain cross-browser inconsistencies or because they were simply too complex to be achieved otherwise. A couple of more subtle reasons include that in older browsers, one could not apply CSS to the html element directly, and there were (and are) certain unusual or restricted properties for those elements—often for obvious reasons. (They were sometimes described as being "magic" for this reason.)
These all conspired to create a situation where to achieve almost any moderately complex layout, it was inevitably much easier to just start out with a squeaky-clean container element. Though the practice started as a means to an end it soon became just part of the scenery, and now many developers don't think twice about adding that sprinkling of extra markup.
No, there is nothing that says you can't add a class to the body.
Attaching a class to the body is actually quite common in various CMSes and is very handy for theming or styling specific pages.
From looking at your example, if you just want to use the body as a container, why even bother with the class? There should only be one body element, so just call that in your selector.
Walter, it may make sense if you needed to apply a slightly different subset of styling to a page with a custom body tag.
Using a wrapping div is usually for some presentational reason and make not make sense semantically; if you don't need it for your project, don't use it. Sometimes only using the body tag to contain the page is too inflexible for some layouts, and as Jordan says some old browsers cannot apply CSS to the root element.
I'm editing books/articles in HTML. These texts were printed once and I scan them, convert them into an intermediate XML-Format and then I transform them into HTML (by XSLT). Because some of those texts are extinct from the market today and are only available through the major libraries I want to publish them in a way so that people could possibly cite them by referring to the page numbers in the original document. For this purpose my intermediate XML-format has an element that marks a page-break. Right now I'm working on the XML->HTML transformations and I'm wondering myself how to transform these page breaks in HTML. They should not appear in the final HTML by default (so a simple | doesn't fit) but I plan to wrap these documents with some lightweight JavaScript that will show the markers when needed. I thought about <span>s with a | in it that are hidden by default.
Is there a better, possibly 'semantic' way to this problem?
Page breaks are very much a thing of layout, and HTML isn't designed to describe layout, so you aren't going to find anything that is semantic for this within the language.
The best you can hope for is some sort of kludge.
Since a page break can occur in the middle of a paragraph, and <p> elements can contain only inline elements you can eliminate most of the options from the outset.
The two possibilities that suggest themselves to me are <span> and <a>. The former has no semantics, that latter is designed to be linked to (with a name attribute) or from (with an href attribute), and you could consider a page from an original document something that you might wish to link to.
No matter what element you use, I wouldn't include a marker in it and then hide it with CSS. That sort of presentational flag is something I would consider adding via :before in a stylesheet (combined with a descendent selector for a body class that can be toggled with JS since you want the toggle)
Alternatively, if you want to take a (very) broad view of the meaning of "HTML" you could consider the l element (from the defunct XHTML 2 drafts) and markup each line of the original document. Adding a class would indicate where a new page began (and you could use CSS counters and borders to clearly indicate each page and number it should you so wish). Pity the browser vendors refused to get behind a real semantic markup language and favoured HTML 5 instead.
Use a <div class="Page"> for each page, and have a stylesheet containing:
.Page {
page-break-after: always;
}
Maybe you can use an xml tag not parsed/interpreted by html like <pagebreak/>.
In this way viewing the html the tag will be not rendered but using jQuery or any other Javascript library, transform, when asked, these particular tags in standard or whatsoever visual mark.
I think this can be a semantic approach...