I am not writing this to make fun of you, or to torment you. I am doing this so you can develop the best front end development practices early on. Because I started web development on a similar path to you, I have faced this exact problem.
Why CSS is a thing
While what you know as the modern web has always used HTML. The 'h' in weblinks (think https://) and the 'h' in HTML
both stand for the exact same thing: hypertext, which is an internet document that can reference other things.
And that is where the problem started: When people wanted to stylize their documents, they used HTML tags like
<big>. Then they realized that this was bad for the reasons listed below, they came up with CSS in 1996.
HTML has an official standard, and
<big> are not actually featured.
Yes, they are considered "unsupported".
but why do they still work?
backwards compatibility. Some websites are abandoned and ancient, sitting in some server room lonely and destitute for forgotteness. If these tags were removed, they would break.
Most people want cohesion on their website. for as chaotic as this site may be, most sites want every page to act the same, cohesion. With CSS, you can use the same "stylesheet" (the name of a CSS file), across multiple "documents" (the name of a HTML file). To start, create a CSS file (.css), and start writing your "properties" of your "selectors" with "values".
Tag soup is a pejorative term that has many definitions and interpretations, all relating to poor HTML code.
Mainly doing with poorly ordered tags similar to:
<article><p>This is bad HTML code</article></p>
I would consider using tags to style as tag soup.
About the style attribute
Try your best not to replace these tags with
<span style="foo:bar;"></span>, it really does not help!
It makes the code even harderto read, makes it just as unorganized, and overall is a nicer time to just use css.
Acceptable Use Cases
This section I would consider one of the most important of the article, as without reading it can also lead to tag soup. THERE ARE USES WHERE STYLING TAGS ARE ACCEPTABLE. typically these are still included in HTML specification. The list is:
- i: italics
- u: underlining
- b: bold
I would consider using these acceptable if they are "inline", so needing to italicize text in the middle of a paragraph does not need css, as it makes the HTML a lot more readable.
On an unrelated note:
try to learn html semantics at some point. they can make your code a lot easier to read! Try to not use h1 outside of the first title of your document, that is what h2-6 are for :)