CSS advantage over deprecated in-line tags ? |
CSS advantage over deprecated in-line tags ? |
Holmwood |
Dec 5 2023, 03:32 PM
Post
#1
|
Group: Members Posts: 1 Joined: 5-December 23 Member No.: 29,095 |
First post here and just a general point as much as a query. I have a couple of small hobby websites and have not used CSS, but have been looking into it. Not sure I really see the point except that O'Reilly's HTML The Definitive Guide warns that numerous simple old-style tags are likely to be discontinued some time soon (and my edition is 20 years old*), like u for underline and even font.
I can see the point of CSS for Megacorps websites where they want a common corporate style and provide a common .css file for everyone to use. That's fine, but is there a good reason to deprecate and maybe discontinue the older simpler method? The Guide has an undertone that they wish deliberately to make it more tiresome to change font and colour etc, to discourage people from making their websites look like ransom notes. But is that a big problem these days? For example I want to make a single character in a text a different colour. Every example I found on the web of using CSS to change colour involved an entire block of text that already had some tag, such as a paragraph, division, heading, or the whole document. I did eventually discover the SPAN tag, so in my application I could do either with the old deprecated font tag :- CODE <BODY> The dial has black numbers for the shutter speeds, but the flash sync speed is shown with a red <font color=red>X</font>, which is 1/60th of a second. [etc etc] </BODY> Or I could use the significantly longer CSS approach, first defining the style attribute in the document head :- CODE <HEAD> <style type="text/css"> <!-- SPAN.redfont {color: red} --> </style> [etc etc] </HEAD> <BODY> The dial has black numbers for the shutter speeds, but the flash sync speed is shown with a red <span class=redfont>X</span>, which is 1/60th of a second. [etc etc] </BODY> I have abbreviated this code of course. Am I missing something? * 3rd edition, not the latest. This post has been edited by Holmwood: Dec 5 2023, 03:36 PM |
Christian J |
Dec 5 2023, 05:34 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,686 Joined: 10-August 06 Member No.: 7 |
is there a good reason to deprecate and maybe discontinue the older simpler method? CSS is generally the simpler method, it both reduces the amount of code and also makes future changes much easier. QUOTE The Guide has an undertone that they wish deliberately to make it more tiresome to change font and colour etc, to discourage people from making their websites look like ransom notes. But is that a big problem these days? Didn't understand any of that. QUOTE For example I want to make a single character in a text a different colour. For what purpose? Does the character have any special semantic meaning, or is it just a random decoration? The basic idea is to use HTML for semantic meaning, and CSS for presentation. In your example, perhaps the MARK or B elements could be (slightly) more semantically meaningful than SPAN, but the added benefit seems small: https://html.spec.whatwg.org/multipage/text...he-mark-element https://html.spec.whatwg.org/multipage/text...l#the-b-element QUOTE I did eventually discover the SPAN tag, so in my application I could do either with the old deprecated font tag :- CODE <BODY> The dial has black numbers for the shutter speeds, but the flash sync speed is shown with a red <font color=red>X</font>, which is 1/60th of a second. [etc etc] </BODY> Or I could use the significantly longer CSS approach, first defining the style attribute in the document head :- CODE <HEAD> <style type="text/css"> <!-- SPAN.redfont {color: red} --> </style> [etc etc] </HEAD> <BODY> The dial has black numbers for the shutter speeds, but the flash sync speed is shown with a red <span class=redfont>X</span>, which is 1/60th of a second. [etc etc] </BODY> I have abbreviated this code of course. Am I missing something? The advantage with CSS is if you one day want to change the style of the element (color, background, font family, size, boldness etc), and only need to do it in one place. This assuming there are several occurences of the above CLASS on the website; if there's only a single occurence you might use the STYLE attribute instead, like: CODE The dial has black numbers for the shutter speeds, but the flash sync speed is shown with a red <span style="color: red; background: white;">X</span>, which is 1/60th of a second. ...but since most websites use CSS for many different elements it's usually more practical with a separate stylesheet instead of mixing parts of the CSS with the HTML. In theory you might also apply CSS to the FONT element; since FONT and SPAN both lack semantic meaning, but it might be considered bad coding habit to use old deprecated elements like FONT in new code. BTW, you don't need the <!-- --> comments in stylesheets anymore, also you can leave out the TYPE attribute if you write HTML5. |
Lo-Fi Version | Time is now: 13th June 2024 - 05:51 PM |