Confusion over Elements/ID/Attribute/Value in CSS and HTML

I am finding it really hard to understand what each of the above means, I think if I could see a visual diagram it won’t make it easier. I am finding it difficult to get my head around all these different terms in CSS and HTML, even though I have covered a lot of this before. Almost like only some of it is ‘clicking’, link inline CSS styling etc. Anybody else struggling with these terms too?

1 Like

Hey, Clara! I still sometimes have to take a moment and think about some of them, yes! As my background is in Journalism and Linguistics, I try to use the layman sense of words to guide me.

ID for me is the easiest, cos I think of it as a SSN (or CPF in my country), or whatever “I’m the only one in the entire country” sort of document you get where you’re from.

Value for me always comes in the expression ‘key-value pair’. The key part is how I orient myself, as it’s the “label of the box”, so I associate it with “the content inside”, ie the value

And attribute I always go for people. We usually describe people attributes, so I think of them as descriptive of characteristics – some of them inherent, some mutable. Like, I can dye my hair, or get it cut, but I’ll never be taller than what I am (I’m short!), so on and so forth.

Hope this helps. You can try making your own schematics, if you are more visual. If you do, share it w us! :smiley:

7 Likes

Thank you - surely I can’t be the only one struggling with the concept too? :wink:

1 Like

Hi Clara!

I have tried studying HTML & CSS before and always found these terms an obstacle - so this time when I started out with this Bootcamp I made it a priority to try to understand them right off the bat.

I prepped some flashcards for our first 2 HTML Basics & CSS Basics courses - and I made sure to try to use those terms a lot in the cards so that I (as in ME!) could understand clearly:

https://ankiweb.net/shared/info/500259121
https://ankiweb.net/shared/info/1390788892

I’m prepping the set for Applied Visual Design now, and now I get to add “functions” and “arguments” to the list of terms I’m trying to keep straight! They’re not done yet, but here’s the link to their current state:

https://ankiweb.net/shared/info/726340687

Hope they help!

2 Likes

For me it’s all about repetition, keep learning and using them over and over and it’ll “click “. Also, I keep a document that has the definitions and examples just in case I forget :sweat_smile:

1 Like

I found it confusing too, to start with. Hope you found my diagram useful.

CSS ruleset

2 Likes