Is it okay if I confuse HTML code for CSS code, and vice versa, or could this miscategorization potentially cause some complication?

I’m a novice; still learning both.

They’re fundamentally very different in syntax and purpose. So yes, it will cause complications.

HTML example:

<div>
    <p>Hey, I'm a paragraph!</p>
</div>

CSS example:

div {
    padding: 5px
}

p {
    color: red;
    font-size: 20px
}

HTML is the markup (the structure of a document), CSS is for styling that document. In CSS you target HTML elements using selectors, you can also add classes/ids to your elements which you can then target via CSS. That’s really the only similarity that could cause your confusion that I can think of.

One thing that could confuse you is when you’re writing something called “inline styles”, which is defining styles directly inside your HTML element.
In the above example, I styled the div and paragraph separately from defining the element in HTML. This is how I would style them in an exact same way but as an inline style.

<div style="padding: 5px">
    <p style="color: red; font-size: 20px">Hey, I'm a paragraph!</p>
</div>

If that’s what you’ve been seeing, then this indeed can be a little confusing in the beginning, but fortunately that’s not how you’re gonna be doing things. You’ll have separate files for HTML and CSS and everything will be much cleaner.

If you’re going through FCC’s curriculum, then you might have seen CSS directly alongside HTML, like this:

<style>

Some styles...

</style>

Divs, paragraphs and other stuff

If that’s the case, just remember that CSS is confined between <style> and </style> tags, you’ll never find HTML in there.

1 Like