The web site of jamestests

Preface

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 <center> or <big>. Then they realized that this was bad for the reasons listed below, they came up with CSS in 1996.

Ghosts

HTML has an official standard, and <center> 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.

Scalability

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".

    p {
      font-size: 5px;
    }

figure 1: a simple css stylesheet.

"Tag Soup"

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.

Conversion Table

Original tag	Alternative
center	text-align:center;
u	text-decoration:underline;
i	font-style:italic;
b	font-weight:bold;
strike	s tag

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.

    <p><s>this is likely not appropriate.</s></p>
    
    <p>This <i>is</i> appropriate</p>

for the style attribute, I would say it is only acceptable if:

there is only one instance of this style occuring (say if you had a list of 3 items, and you want one to be red, not two
there is only one property in this list

Figure 2: the first one would be better suited with a style attribute, a "class" css selector, or if all paragraphs should be bold, a css selector to make all paragraghs bold.

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 :)

Please Use CSS

a gift