HTML is for markup. CSS is for styling.
Markup is the structure of your site. What goes where, and in what order. Text, images, etc.
Styling is the look of your site. What colors, fonts, effects, and design elements you'll use.
There's a lot to know!
There are a lot, lot, lot of tags, but here are the interesting ones for now:
<p>Paragraph</p>
<a>Anchor</a>
<span>Span</span>
<div>Div</div>
<ul><li>Unordered List & List Item</li></ul>
<br /> Break (A cheat, but OK in moderation)
There are a ton of special-purpose tags, but <span> and <div> are the most generic.
<div> defines a "block" element (takes up physical space)
<span> defines an "inline" element (just provides hooks for some styling)
<div id="left-right-thingy">
<div class="left">
I'm stuff on the left!
</div>
<div class="right">
I'm stuff on the right!
</div>
</div>
You could drop in <span class="purple">purple</span> text somewhere!
It's good to note the difference between id and class.
Basically, id is a promise that there will only be one of this kind of element on the page. class means it's a type that is likely to be reused on a given page. Some front-end devs I know refuse to use id at all because it is so powerful/dangerous.
The collection of these types of tags on your page is called a Document Object Model (DOM). I had been programming for over a year and that term intimidated me. Don't be like me. It's just your markup (HTML), as defined by the tags you've used.
CSS lets you describe how something should look when it is on the screen. There are lots of ways these definitions can be overridden or stomped on. CSS has a crazy kind of math it uses to calculate what wins when there's a collision.
Basically, CSS lets you write up a definition
.purple {
font-color: #5E2D79;
font-size: 12px;
}
CSS uses a dot . to tie to class in the markup, and a hash # to indicate id.
You can use them together, which is where stuff starts getting crazy:
#left-right-thingy .purple {
// Haha just kidding about the whole purple thing
font-color: black;
}
CSS is hard. For now, the best CSS is the CSS you don't have to write.
Enter Bootstrap, née Twitter Bootstrap.
Let's learn by doing, shall we?