So what does CSS have to do with HTML exactly? CSS is all about styling the content of your page, i.e. it’s colors, placement/position, fonts, borders, etc. HTML is all about the actual content on the page. HTML without CSS generally will appear very plain and stacked on top of each other. CSS allows you to build columns and blocks on the same line. It’s biggest strength is therefore helping you to position your HTML in pretty structures.
So what’s great about the w3schools HTML & CSS tutorials it they have a tool to test your HTML/CSS right there. You can make a change and click a button and see what effect it has immediately.
So on the w3schools site go through the links in the left column, top to bottom, studying each tutorial in order and whenever you are presented with an option to test something out, do it. You will arrive at an editor like this one:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Try adding the following line after the line with the <h1> “element”:
Basically in html, u wrap your text content in "elements.” An element itself is made of up an "opening tag", e.g: <h1> and a "closing tag", e.g: </h1> . The closing tag is the same as the opening tag except it has a forward slash in front of the name of the type of element. Often people confuse the definition of a “tag” and an “element.” An element is the opening and closing tags and the content in between. A tag is just the beginning keyword or the ending keyword, and of course is wrapped in “< >”. Tags themselves are just a short keyword wrapped in those arrows. There are many keywords you’ll have to learn, but you’ll find that to be the easiest part. Don’t worry so much about the tag type/name. Really the way to think about it as if they all have the same name. The only difference is some provide built-in styling features that style the content in between the tags in different ways, usually in how it’s placed. In CSS you can also refer to these tags to style only elements of a certain tag type.
Generally HTML is just a bunch of nodes/blocks written on a page like this. You can also put them inside each other, for example:
Here the <h1> element is “nested” within the <div> element. Think of it like a tree, like an “outline” in school. When viewing various tools examine HTML (such as Firebug in Firefox and Inspecter in Chrome and Safari) you can expand and collapse these nodes, e.g. hide all the sub nodes nested within a parent node. This allows you to quickly browse through HTML code. It’s similar to collapsing/expanding sub-folders in a file/folder browser on your desktop computer.
The "div" tag is one of the most common tags you will use. It’s just a generic tag for dividing and grouping blocks of content. I assume it stands for "divider." Anyway, just know that you’ll end up with is a tree of tags nested within each other.