The Difference Between ID and Class in CSS/HTML

In software engineering, most developers want to know EVERYTHING about a specific component of the programming language or technology before taking any action. Their endless quest for knowledge and “deeper” truth leads to new profound insight, and often contributes to the overall improvement of the system. Often than not, developers try their best to find the most efficient way to achieve their vision or goals. In HTML and CSS, the ID and Class is used to define the different components of a page that is separated by either <div> or other HTML elements. Since the last decade, programmers have started emphasizing the code design rather than the smaller code base. As HTML and CSS are considered modern languages, there had to be a way to support code organization in the core language, and thus ID and Class was born in the CSS.

In HTML, Class and ID are used to label the different sections of a page (which are divided by HTML elements), which is then used by the CSS to stylize the sections as per the needs, such as, changing the color text font, etc. For instance, an HTML might have two sections: content and sidebar. The content section would have an ID/Class of “content” and it will hold the text of the website, whereas the sidebar section would have an ID/Class of “sidebar” and it will hold all the sidebars that normally resides on the left side of the page (like in this blog), both of these sections can be stylized by the CSS to make it appear on the desired position of the page. If we didn’t have the way to separate section, your browser would end up moving everything to right, which will look terrible!

In this article, I am going to show you the different Between ID and Class in CSS/HTML, and which should be used in different places. Let’s get started!

ID…

In HTML, ID is used to assign a unique name to the elements. The label is given in the opening tag of the HTML element, and the label should be a string. You should give such labels which describe the functionality or purpose of the element; so it’s better to give “highlight” label to the ID of the paragraph in your HTML page which needs to be highlighted in some way, as it would be insanity to label it “not-highlighted”. In the following code, we would use ID “highlight” and “red-section”:

Once the ID is assigned, you can create the ID in the <style> tag to stylize the section through CSS. You need to add “#” before the label name (which should be the same that you’ve given to HTML elements) in order to stylize the section:

Apart from that, you can use the ID label in <href> link to move directly to the position of the element when you click the <href> element:

Here, clicking the “Move to the bottom” will move the view to the HTML element that is labeled with “bottom”.

You can also use the element in Javascript, which requires ID attribute for certain operations, but this is beyond the scope of this article.

Class…

While the ID is used in CSS to stylize an HTML element, Class is used to stylize group of elements. For instance, you might need to create a sidebar in your HTML page. Now, a typical sidebar contains several headings, i.e., About Me, Website, Contact, etc., wherein some elements (i.e., <a>, <h2>, etc.) can differ in style in some ways or another. With ID attribute, we would need to assign a different ID to every part of the section, which would be cumbersome to do so. Worry not, the class attribute can be used to stylize group of elements:

Here, the whole sidebar section is wrapper in a <div> to apply the CSS effects on the whole section. Now, in order to stylize them:

Here, we have applied the stylizing “sidebar” class, and the descendant element “h2”, which is nested in the sidebar class, meaning we can change the stylizing of nested elements that add more effects to the parent element.

So, which should I use?

The major difference is that the Class is used for stylizing the group of items, while the ID is used to stylize the individual item. You might ask: Which should I use? Well, the answer lies in your requirements. If you simply want to highlight or stylize simple things, then ID is recommended, but if you want some elements to be nested inside elements and stylize nested elements, then Class is recommended. A Class attribute can be used in the place of ID, however, ID cannot be used in the place of Class.

Conclusion

In this article, I’ve showed you how you can use the Class and ID in their maximum potential while building HTML pages and designing them through the use of CSS.

If you have any question, then please ask in the comments section below!

Classes in Object Oriented Programming (C# and Java)

 In Object-Oriented Programming (OOP), there are two types of programming: class-based programming and prototype-based programming. Class is the most important concept in OOP, especially in class-based OOP (which is the dominant programming style in C#, Java, C++ etc.). It is a way to store properties and attributes of any object in a user-defined type, such as a car, dog, man etc. Think of it as a blueprint where you store all the information and then execute the operation according to the structure. In OOP, we manipulate different objects to perform something, which means that programming in OOP will force you to focus on data and not so much on logic and we are interested to know what the data holds. Basically, you would start with creating the structures first and the logic second.

We need an object or instance of class to manipulate itself and the other objects, which is created through a given class. You might have already heard of data encapsulation when talking about OOP. Class provides the support for data encapsulation by supporting various ways to hide data from a user, thus the user will be able to use only those features that you intended. The created instance (or object) not only holds a logic (code, procedures, etc.), but also a state, and thus can be manipulated by other objects.

In this tutorial, I will teach you the basics of Class in OOP using Java and C# as examples. Let’s get started!

Understanding the syntax

The syntax for declaring a class is same in both Java and C#.

As I mentioned earlier that a class is used to hold data, so it wouldn’t to create a class without a data!A class can hold members (i.e., variables) and methods (i.e., functions in a class that process the data). Following is the syntax to define variables/methods in a class:

Where:

  • access modifier = keywords that limits the access of a member/method, i.e., public, private and protected
  • return type = data type that is returned from a function
  • member name = any variable name

So for example, if we want to create a class for our object “Player”, we can do so as follows:

Here you can see that I defined properties and functions of player in our class “Player”. You can define as many members or methods you want, there is virtually no limit, though older computers will take much memory. Similarly, we can define other classes too:

Understanding public, private and protected

They are the access modifiers for telling a compiler whether it should allow any member/method of a class to be accessible within its class or in other classes too. ‘public’ makes a member/method available to other classes, while ‘private’ makes it available only within the class where it is declared. ‘protected’ makes it available within the class and derived class – which is a bit hard to explain, as it involves the concept of inheritance that I will teach you in later tutorials.

(Note: In C#, there is an another access modifier called “Internal” which limits the access of member/method to current assembly)

Creating an instance of a class

Recall that I said, you need to create an instance of a class in order to use it in your awesome program. The simple formula to create an instance of a class is as follows:

Using the formula, we can easily create an instance of a class in our program:

In our class, we could also declare “state” as protected because there is no inheritance involved in our program, so the results would be the same; that is, you wouldn’t be able to access “state” in your “Main” function.

Conclusion

You can now see how easy it is to use the feature of classes in your OOP programs. A class is arguably the best way to store data to easily manipulate various states in a program.

If you have any additional questions, then you can ask in the comments section below!

Static Keyword in Java

One of the commonly used keyword in Java is the static keyword, which is a non-access modifier that can be applied to a method, variable, class nested within another class and an initialization block. It is used to define a class as one whose object cannot be modified (or manipulated), or it can be used to declare a method in a class that can be only called (or provoked) within the class, or it can be used for variables (in a class) to make them static, which means the values of those variables won’t be changed.
Static keyword cannot be applied to a class that is not nested, constructor, interfaces, Method Local Inner Class (different than nested classes), Inner Class methods, Instance Variables and Local Variables.
When we attach static with the variable / method in a class, then it only belongs to the class. The static variable gets memory only once in the class area at the time of class loading. It is used to refer to the common property of a class that will be the same for every instance of the class. It is useful in situations where you want some variable or method to remain static so that it can’t be changed by any instance of the class.

Static variable / methods can be used without having any instance of the class. You can use the class directly to invoke a static method or static variable.

 
You can see that I didn’t create an instance of the class Person to use static variable age. Let’s study the static keyword rules!

Static Keyword Rules

As I mentioned earlier, static keyword can be applied to a variable, method, class nested within a class and an initialization block. Let’s see the meaning behind those words.
  • Methods that are marked static belong to the class rather than to any particular instance. 
  • Static method/variables can be used without creating any instance of the class. 
  • If there are instances, a static variable of a class will be shared by all instances of that class, which means that there will be only one copy no matter what.
  • A static method can’t access non-static variable, and it cannot directly invoke non-static method (But it can invoke/access method/variable via instances). This is the most important rule that should be kept in mind.

Incrementing the static counter

You can create a static variable (of int) and set it to 0. Since, it’s static in nature, it is initialized only for the first time. Now, whenever a method in a class increments the static variable, the count will change with increment, and the value would be the same in every instance of the class. This is powerful when you need to create some variables that shouldn’t be defaulted to zero every time you create new instances. For instance, let’s create a program that counts the number of instances of a class.