<i></i> isn’t real HTML to begin with. It’s a netscape-ism. The official way to create emphasized text is <em></em>. But I digress.
The point of CSS is to be able to design your entire website with a consistent layout, and more importantly, to easily change that layout.
Let’s say your website – all 50 pages of it – uses <i>Title</i> whenever talking about the title of a book. Now a year later, you decide (or are ordered) that titles should be bolded instead of italicized. You have to go through all 50 pages, and search out every single instance of a title to change <i>Title</i> to <b>Title</b>. You can’t even do a ReplaceAll in your favorite text editor, because you don’t necessarily want all Italics changed to Bold, you only want titles to be bolded.
Now go back. Let’s say you’d used CSS in the first place. You use HTML to structure your content, and CSS to format it. So all of your titles are in the HTML as <span class=“title”>Title</span>. Yes, that’s a hell of a lot more typing when you originally created it. But now, all you have to do is change one line of one file:
.title { font-style:italic }
to
.title { font-weight:bold }
Save that CSS file, and you’re done. Every single title is now updated with your new format.
As for why we have this large difference, it’s because of the history of HTML. HTML was originally intended as a content-structuring language (“mark-up language”), nothing more. This is the title, this is a paragraph, this is emphasized text, etc. It said nothing about how the resulting content should look. Then Netscape came along and said “we have full-graphics browsers now. Let’s make the web pretty in addition to structured!”. So they created additional tags like <i>, <b>, <u>, etc. Those tags became so widely adopted that all browsers now support them. They also made maintaining a complex website difficult, and they made HTML into a conglomeration of both structure and format.
Eventually the W3 committee said “Enough is Enough!” and made the next-generation version of HTML. XHTML further restricts the original HTML standard, to make it even more just about structure. And to satisfy the need for formats as well as structure, they created CSS to work hand-in-hand with XHTML.
Is it more complicated? Yes. And that’s the point. It’s specifically designed for complicated websites. If you’re just wanting to write a little snippet for your myspace page or your own personal one-page website, feel free to completely ignore CSS and use all the b, i, and u tags you want. But if you want a professionally done complex website, CSS is by far the way to go.