Recently I had to rewrite some CSS to customize styling on a particular webpage. I ran into some problems and couldn’t figure out what I was doing wrong at that time.

Despite the webpage actually working by itself as a stand-alone page, problems arose when I was attempting to make the page work with the complete website, such as javascript interactivity, with other pages.

There were two issues in attempting to use #IDs more than once on the same page:

  1. Invalid code error
  2. Using interactivity with JavaScript will produce errors

JavaScript depends on there being only one page element with any particular id, or else the commonly used getElementById function wouldn’t be dependable. For those familiar with jQuery, you know how easy it is to add and remove classes to page elements. It is a native and built in function of jQuery. Notice how no such function exists for ID’s. It is not the responsibility of JavaScript to manipulate these values, it would cause more problems than it would be worth. [Chris Coyier: CSS-Tricks]

Although I had spent countless hours learning and working with CSS, I have not done much with CSS recently. My time was spent in other areas such as JavaScript, React, and cleaning hacked WP sites.

Well you know the basic rule, if you don’t repeatedly code, and this includes non-programming languages like CSS, you will slowly forget things here and there. Your “muscle memory” becomes weaker and weaker as time goes on.

Embarrassingly, after searching the web for insights, I discovered that I trying to force #ID selectors to style multiple elements on the same page.
Bottom Line, this is will not work, I needed to uses classes instead of IDs.

Amazing, the lightbulb turned on instantly when I saw my error.
All the basic concepts about CSS restarted within my brain.

There are two purposes of why I wrote this post:

  1. Refresh and relearn CSS IDs and Classes myself
  2. Share CSS basics with newbies

And to answer these two questions:

  1. So what are the differences between #ID and .classes?
  2. and when to use them?

  3. When do you use each and why?

 

ID selector:

  • # (hash character) id placed before ID(#content)
  • Unique Identifier (used for only one element)
  • Each page or document can only have one element with that same ID

 

ID Selector Example
Using two #IDs: #content1 and #content2:

#content1 {
	background-color: rgb(114, 160, 193);
	text-align: center;
}

#content2 {
    background-color: rgb(227, 218, 301);
    text-align: center;
} 

Classes:

  • . (full stop) is placed before class (.text)
  • You can use the same class on more then one element
  • You can use the same class more then once on a HTML page

 

ID Selector Example

.text {
	font-size: 12px;
	color: #000000;
} 

This is how the HTML looks.

  • ID Selectors, #content1 and #content2 are used only once on this page.
  • Class = .text is used multiply times on this page
    • Twice in #content1
    • Twice in #content2
<div id="content1">
<h1>This is  content1</h1>
    <p class="text">This is a sample text.</p>
   <p class="text">This is a another sample text.</p>
 </div>

<div id="content2">
<h1>This is  content2</h1>
 <p class="text">This is a sample text.</p>
   <p class="text">This is a another sample text.</p>
</div>

 

This is how it looks in your browser:

A Single Element can have both ID and Class

Examples:
How you can use both in these three different elements:

  • Div
  • Paragraph
  • Header
<div id="idName" '="" class="className"></div>

<p id="idName" class="className">Paragraph Text</p>

<header id="idName" class="className"></header>

Conclusion

Finally, I will try an explain the differences in another real-world example.
This example is referring to one webpage:
.class
This class is named: developers

.developers {
      color: blue;
      font-weight: normal;
}

In this example, we have a group of web developers from a particular agency meeting at a coffee shop.
Group one (.developers): 5 web developers sitting on one table.
Group two (.developers): Another 5 web developers sitting on another table.
Group three (.developers): An additional 5 more web developers sitting on a third table.
So we are using class=”developers” three times.


#ID
This ID is named: cto
Although #IDs are unique, they can still be reused if they are on a different html page. In other words, you can use the same #ID on the index.html and the contact.html pages.

#cto {
      color: red;
      font-weight: bold;
}

CTO Would be the Chief Technical Officer of that particular agency.
There is only one CTO who is briefing the web developers in the coffee shop.
So we are using id=”cto” only once.

Does this make sense?
So go ahead and start writing some clean CSS.


 


Gerald Watanabe
Islandwebtek



Divi WordPress Theme


Share This