Think of them as the foundational coding languages of the internet.
Just like how Belgians have three languages; French, Dutch, German, webpages also have languages.
Web Development is what you see when you go to a website. Check out my ultimate guide to web development.
What is HTML?
So first, let’s look at what is HTML?
HTML stands for “Hypertext Markup Language”. Hypertext refers to the fact that HTML makes it so that you can click on links in web pages. That’s the hypertext. The words “Markup Language” just mean that it’s something that you use to markup normal English to indicate things. Let me show you what I mean.
This is a normal web page. It is in WordPress, and the entire page uses HTML to tell the browser what to do with all this text. Some of it is more important than others, some of it is in tables, some of it is images, and on any webpage, in any browser, you can right-click and view page source, and see all that HTML.
Originally hypertext simply meant that you could click it, but now it means all sorts of things, like declaring headers and tables and images. HTML describes the purpose of text. Then, it is up to the web browser to know what to do with that text.
Now that you know what is HTML? Let’s Jump into What is CSS?
What is CSS?
So, let’s talk about CSS what the heck is it and how does it work? What is CSS?
CSS is short for “Cascading Style Sheet”. It helps determine things like colors, fonts, and positioning of certain elements, and even a little bit of animation.
The first word of CSS is “Cascading”. So, what does that mean? well, let’s keep it simple and say that you have a website that’s made up of three different sections and in each of these sections is some heading text. Now, let’s say that you want to assign all of these texts with a class of heading two aka h2 and you want them to be open sans font. Well, you can write a bit of code that will change all of them at once throughout the entire website.
Therefore it’s called cascading and you can even assign multiple values such as font, size, color, weight, and more.
It’s not just for text any visual element on your websites such as backgrounds, boxes, headers, footers, images, literally anything can be altered with CSS.
So, the next word is “Style” which makes perfect sense because it alters the style of your website.
So, let’s move on to the third word which is “Sheets”. And by this, I mean Style Sheets which are basically like writing a bunch of custom CSS settings for things like text, backgrounds, images, properties, etc., and saving it as one file aka a Sheet. That you can apply to multiple web pages all with different content and layouts in order to achieve a cohesive style throughout your entire website.
The way these web applications are built is that you have a layer of “HTML” which gets styled and made more beautiful by “CSS” to make this beautiful surface also called “User Interface Smarter” and more intelligent.
- User registration
- Booking a ticket
- Online shopping
- Sharing photos
- writing messages etc.
CSS adds the styling to a website. CSS cannot live without HTML or else there would be nothing to style.
Its responsible for outlining the colors, the fonts, and the positioning of the content.
Your website will now look like this.
- They make up what is called front-end web development.
Front-end web development is what you see when you land on a page, as opposed to back-end web development is actually what makes an application on the web work
2. These languages are translated by web browser.
Web browsers like Firefox and Chrome, translate these three languages into a visual webpage. Without a browser these languages are just words on a page. Sometimes because of this, websites look slightly different on Chrome, Firefox, and definitely look different on Internet Explorer. Because all these browsers translate a little differently.
3. These code languages evolve over time.
There is even a body and a society online that manages the rules and best practices of how to build for front end web development.
So, in the beginning you actually had HTML controlling a lot visual aspects. You used “<b>” tag to make text bold. You used the “<center>” tag to make your text centered. But over time, after 90s you actually had “CSS” making up most of that.
So, whatever you see on the “world wide web”, you have “The Three Friends” to thank for it.