What is CSS?

Let’s just say you have a piece of business information and you want to share it on the internet by creating a web page:

To help you transform the above content into a web page, you need to use HTML, CSS, and Javascript.

They are the languages of the web.

1) HTML allows you to add meaning and structure to the content with the help of HTML tags

<h1>The Easiest way to manage your invoices</h1>
<p>The all-new Criya is invoicing software that helps your business grow without holdbacks.</p>
<button>Download now - $29</button>
<p>$29 / year – includes 12 months of updates & support.</p>
<img src="screenshot-of-the-app.png" alt="Dashboard of Criya software" />

By adding structure to the content with the help of tags:

1. HTML helps search engines like Google to present your business information to their users in an understandable way
2. Similarly, HTML also helps browsers to render a piece of information in a visual way so web page readers can easily understand the importance of a piece of text.

For example, because we used <h1> HTML tag for the headline “The Easiest way to…”, the browser rendered it with a big bold font size.

Main headlines must rendered in a big bold way so that readers can see them as important pieces of information.

“Bro, I thought this article was about CSS :D”

Yeah, yeah!

Coming there.

Now, making content visually and structurally meaningful with HTML is great.

But people love beautiful stuff. They prefer beauty over average-looking stuff.

It’s a fact that many people judge a book by its cover, and there is nothing wrong with it.

We humans just prefer good-looking things.

Although HTML adds visual cues to the content, it is limited to making the text look big, small, bold, and italic, but it can not go more visual than that.

Most importantly, unless we are using tables, HTML layouts are always vertically stacked.

For example, in the above screenshot, if you want to place the image on the right, HTML can’t do it.

So, what’s the solution here?

Using CSS.

CSS helps you style the HTML content to make it more visually appealing.

For example, here is how the above web page looks after adding some CSS:

Did you notice any difference?

“Yep! Big difference!”

What is it?

“CSS is making the website look stunningly beautiful!”

Exactly 🙂

To be more elaborate…

1) CSS helps you with the typography of the entire website, such as fonts, colors, etc.

If you notice the above image, I am rendering the web page with the help of “Inter” font and center-aligned text that was previously left-aligned.

body{
  font-family:"Inter", sans-serif;
}

Also, CSS helps you add color to the text on the web page:

It could be any text-based HTML element such as headline, paragraph, button, etc.

It does so with the help of CSS code like:

h1{
  color: pink;
}
h2{
  color:blue;
}
p{
  color:black;
}

CSS helps you add Layout to a page

For example, it helps you create multi-column layouts and grid layouts:

Also, if you notice, the boxes in the above layout are not ramming into each other. They have ample amount of white space between them.

It was achieved with the help of CSS code like below:

.floating-box{
  padding:30px; //spacing inside the box
  margin:30px; //spacing outside the box
}

Not just that, CSS also helps you acheive the following:

1. Animations
2. Controls the width and height of images
3. Adding background images with parallax scrolling effect
4. The list goes on and on

That’s what CSS does for any web page.

That’s all for this lesson.

I will see you in the next.