What is the difference between HTML and CSS? HTML and CSS Comparison

Hello Developers

If you are learning frontend development or if you want to build some awesome website interfaces, the most basic and widely used languages are HMTL and CSS which makes the base of any website. So in this article, we will be discussing HTML and CSS and the factors that differentiate them.

A modern website is made of 3 files namely HTML file, CSS file, and JS file. HTML file consists of HTML code which primarily defines the structure of website pages, a CSS file contains CSS code which adds an appearance or style to web pages and a third one is a JS file which has the javascript code in it which adds the behavior to the web pages and makes website interactive.

Since HTML and CSS are the basic topics for developers, we will keep it very beginner friendly considering you are starting with your web development journey.

let’s get started . . .

So first let’s understand what is HTML and CSS

What is HTML?

HTML stands for hypertext markup language, let’s focus on markup language and what that means, markup languages are computer languages that help format the overall view of the page or the documents for example XML SGML HTML which are a standard text-encoding set of rules or systems consisting of a set of symbols(tags) inserted in a document that regulates the structure, formatting of the text document.

Hypertext in HTML directs to hypertext links that authorize related pages to be retrieved or accessed from the internet. As HTML is a markup language it decides how a document should look when printed or displayed on a screen or monitor. Web browsers interpret the layout or structure described in Markup language and display it on screen. You can simply consider HTML as a framing or structure of the web pages you see on the internet.

What is CSS?

CSS stands for cascading style sheets, let’s understand what that is. CSS adds style to the web pages which makes them presentable. CSS defines the appearance of the web page.

let’s assume you are building a web page for your website and you divided the web page into header, hero, and footer sections. You have written a code for all these sections and let’s say now your website is up and running. But some days later you want to make changes to the header and footer section so one thing you can do is go to the code of the header section and footer section separately and make changes to the code. Instead, CSS makes it easy for you, it allows you to make these changes in one go and that’s why it is called “cascading” which let you make changes in the majority and assign multiple properties to the different elements in a single file.

For example, you want to change the font color and font size of the text in the header and footer sections. You can simply write code using a class let’s say h3 class and assign it to the header and footer section with mentioned properties which will make changes accordingly, and that’s how by simply writing code in one place you can make changes in different sections.

h3 {
	
font-size: 10 rem;
color: blue;

}
Code language: CSS (css)

The second word is “Style”. The name itself describes the meaning, Css adds styling and decoration to the document.

The third word is “Sheet” which guides to writing all the custom CSS code in a single file(sheet). This CSS file or sheet can be used with different HTML codes or for different web pages so that you can match the styling of your website with different content on different web pages for your complete website.

Comparison between HTML and CSS

Now let’s see the difference between HTML and CSS.

Conclusion

HTML and CSS are like fundamentals for building the front end of the website. So it becomes very important for a developer to understand them thoroughly. But only understanding HTML and CSS is not enough to build a better interface, a good developer should have a good understanding and knowledge about the factors that make difference between them so he can decide what to use when which helps in writing good code and building good UI for the website.

Hope you all enjoyed reading the article and understood the basic difference between HTML and CSS.

Thanks for reading.