Class vs ID: best practices
What is HTML and CSS?
People say the information is the most powerful thing in the world. I say the presentation of the information as much as important as the information itself. If I give you a piece of paper with a winning lottery number, but this number is written with a bad handwriting you will not be able to understand a thing and you will not actually get an information, just a bad representation of it.
There is the answer on the main question of life and Universe...
The main purpose of the Internet is to share and get information. In real life we share information through books, papers, letters, notes etc, on the Internet we need something different, something digital. Yes, you can just put your text into a file, call it "something.html" and put in to the Internet, people will be able to open it in the browser and read it, but... Just look at this!
Good information, bad representation
It is not easy to read and comprehend information in this format. And that is why we have HTML - HyperText Markup Language. HTML uses tags to tell a browser how to structure the information. Most of tags have opening and closing parts (this way you can mark beginning and end of element).
This tag <p> we use to let know the browser that this piece of data is a paragraph and it needs to be separated. With this tag <h1> we show that there is a heading and it needs to be different from a paragraph. Tag <div> we use as a container, we can put a heading and a few paragraphs inside of it. Here is an example of HTML code:
<h1>I am a heading!</h1>
<p> I am a paragraph. I am longer than the heading and
I contain a lot of very valuble and useful information.</p>And how it looks in the browser:
With HTML we get a piece of structured information. It is good enough, but what if we want to change the font? Or colour? Or the position of the element on the page? It is time to meet CSS (Cascading Style Sheets ). We use CSS to style our HTML page and there are a few ways to do it.
The most obvious way - you find an opening tag of the element in your html code and give this element some style. Right there, inside of the opening tag:
<h1 style="color:red; font-size: 16px;">I am a heading!</h1>
<p style="color: blue;"> I am a paragraph. I am longer than
the heading and I contain a lot of very valuble and
useful information.</p>And it is working:
This way (it calls "inline styles") totally makes sense if you have one html-page with one element of each type (one paragraph, one picture, one heading etc). If you have two paragraphs you would need to put style="" attribute to each of them and if you want both paragraphs have the same appearance you would need to repet youself. More elements you have more bulky your code become.
Beauty of the inline styles
Hey, do you remember about the importance of the presentation? It works for web developers too! Just imagine you decided to change a font size for all of your <p> elements. If you have ten <p> elements on your page you WILL make a mistake somewhere, I promise.
It would make sence to describe the style once and then just refer it every time when you want to use it. Congratulations! We've just invented class. Now all you need is to put class="name_of_my_amazing_style" inside each openening tag of the element you want to style and describe this style somewhere.
Again, it makes sence to describe this style right in your html page:
<html>
<head>
<style>
.my-heading {
color:red;
font-size: 16px;
}
.my-paragraph {
color: blue;
}
</style>
</head>
<body>
<h1 class="my-heading">I am a heading!</h1>
<p class="my-paragraph"> I am a paragraph. I am longer
than the heading and I contain a lot of very valuble and
useful information.</p>
<p class="my-paragraph">I am a paragraph too. I have the
same style as the previos one, but my personality
is different.</p>
</body>
</html>Here is the result:
but what if you have 34 styles? It is a lot of text for one file! Let's separate styles from the content and put them in another file. And then we connect this file with our html-page using a special tag <link> (this tag has only an opening part).
<html>
<head>
<link href="my-styles.css">
</head>
<body>
<h1 class="my-heading">I am a heading!</h1>
<p class="my-paragraph"> I am a paragraph. I am longer
than the heading and I contain a lot of very valuble and
useful information.</p>
<p class="my-paragraph">I am a paragraph too. I have the
same style as the previos one, but my personality
is different.</p>
</body>
</html>Ta-dam! It is working!
Class vs id
Now we know about classes, how to declare them and how to use them for make your html-page not only smart, but also beautiful. But if you dive a little bit deeper into html code of some random page we will notice something which looks like class:
What ARE those???
It is time to introduce you to id! Ids are similar to classes - you describe styles for them and then declare in the opening tag. In fact, if your web site has only html and css, without other technologies, you can use id exactly the same way! But why then we would need both?
We have a web page, which is looking good, but something is missing. To become alive our web page need some action and, the most importantly, interaction. We want click buttons and fill forms, animate images and play games! Building an interactive website is a huge topic and this topic is strongly related to id and class and the difference between those two.
The key difference - id is UNIQUE.
<html>
<head>
<link href="my-styles.css">
</head>
<body>
<h1 class="my-heading">I am a heading!</h1>
<p class="my-paragraph" id="first-paragraph"> I am
a paragraph. I am longer than the heading and I contain
a lot of very valuble and useful information.</p>
<p class="my-paragraph" id="second-paragraph">I am
a paragraph too. I have the same style as the previos one,
but my personality is different.</p>
</body>
</html>Now we can interact with each paragraph separately.
shake-that-text("second-paragraph");And the result:
Well... In reality code would be a little bit different, but you've got the idea! Now time to go and bring the idea to life. Happy coding <3.