Part 2 CSS Series #breakthecss

Till now, we have discussed what CSS is and why we need it?. Now let’s see what Vishal and Anamika have today to discuss.

Vishal:?Hey, Could you tell me now how to use CSS with HTML.

Anamika: Yeah, Sure. But before injecting CSS into HTML, first, we need to define what we need to do with CSS.

Vishal:?Ohk, so I have my name written in the h1 tag, reducing its CSS font size.

Anamika: Cool, sounds easy and interesting. So here is your name written inside the h1 tag.

Now we?need to add a font-size property to our CSS.

Vishal:?What do you mean by property?

Anamika:?See, each person on this planet has some physical features, like their height, weight, color, etc. The same thing is there with HTML components, and they have some predefined features which CSS can change.

Vishal:?I must say you are a very intelligent girl.

Anamika:?Thanks a lot, so I was telling you about properties. To change the size of text, we will use font Size, and we can apply CSS in 3 ways.

1. Inline CSS

Here we add CSS inside the HTML tag directly. Here is the example. You can see at line 4 we added style attribute, and we defined font-size in pixels. This CSS will only apply to the current tag, and other h1 tags won’t get affected by this.

2. CSS inside the head tag

Now, what if we want to increase the size of all h1 tags? That’s where we use this format. We have defined the same CSS in the head, and now all the h1 tags in the current file will get affected.

3. External CSS file

What if we have to define multiple properties to multiple tags? If we write it in the head tag, it will occupy lots of space and reduce code readability. We will define CSS in an external file and import it into our HTML file to handle this.We can import same CSS file in different HTML files.

Are you getting bored?

Vishal:?No way, I am just amazed to see all these. Apart from font size, do we have any other properties?

Anamika:?Yeah, we do have lots of properties.

Vishal:?Ohk, tell me about them too.

Anamika:?Chill boy, it’s enough for today, have patience. We will learn everything.

Vishal: Oh

Anamika:?Good things come to those who have patience.

Vishal: Got it, Miss.

Stay tuned for more interesting content. Follow?#breakthecss?to get all content at one place.