CSS: Div’s & Classes
One reason some HTML documents are so over-populated with <div> & <span> tags, is they lack the power of the CSS CLASS selector.
When first learning CSS, I slapped ID’s on everything. I didn’t understand when to choose a class or an id. So, I ran roughshod with ID’s (and thus more <div> & <span> tags) everywhere.
I kept learning and created my own mnemonic for remembering the difference between id’s and classes.
Mnemonic To Remember the Difference Between ID & Class
We’ve all been to school, so this is easy to relate.
In school, I am identified by a student ID. Which is also a number. In CSS you write your ID with the number (#) symbol.
#header {width: 100%; …
<html>
<body>
<div id = "header">
Your student ID number is unique. Mine was my Social Security Number. Likewise, a named ID selector in CSS is unique and only identifies one element.
In school, I attended several classes. There were many other students that shared that same class with me. I pictured myself as a single ‘.’ (dot) among many other ‘.’ (dots) in the class. Likewise, a CLASS selector in CSS can be shared with many different elements, and is written with a . (dot).
.classname {color: #333; …
<html>
<body>
<h1 class = "classname">Head.....</h1>
<p class = "classname">This is my paragra......</p>
I applied this little memory device many times to remember how to write ID’s & CLASSes in my style sheet and developed a deeper understanding of when to use them.
Now, I see the possibilities are numerous when it comes to CSS class usage. SOme people have come up with really innovative and complex ways to use them.
For the next few days, I’m gonna dive deep into some interesting (and sometimes maddening) nuances to ID’s & Classes.