The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> CSS advantage over deprecated in-line tags ?
Holmwood
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies
Christian J
post Dec 5 2023, 05:34 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,686
Joined: 10-August 06
Member No.: 7



QUOTE(Holmwood @ Dec 5 2023, 09:32 PM) *

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. unsure.gif

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.



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 13th June 2024 - 05:51 PM