Using Cascading Style Sheet In HTML

Cascading Style Sheet is something which you can use to style up your HTML documents. CSS comes in three types – Inline CSS, Internal CSS and External CSS. We’ll cover all these types in this post.

We will use basic CSS styles like background-color, font-family, font-size, border, padding, margin. We’ll not go into detailed explanation of how these properties work. For now, we’ll just focus on how Inline, Internal and External style sheet works.

Inline CSS

Inline CSS is basically the styles which you can use inside the tag without any kind of selector or hook. For now just ignore the words like selector. All you need to know is that Inline styles are used with the help of style attribute in the HTML Tag. Check the example given below.

Using CSS in HTML

This is a simple example of Inline CSS. In the code given above we have applied Inline styles to div tag of HTML document. So everything within the opening div tag and closing div tag will acquire the properties of style attribute.

Internal CSS

If we had to use the same styles as Internal CSS then we’ll have to make some changes and move the styles into the header of HTML Document. Also the role of selector or hook comes into picture now. First check the code given below with the result.

Using CSS in HTML

The output would be same because we’re just switching the ways to use CSS and not changing the actual code. So what is really different in Internal CSS ? Let’s understand by looking at the changes which we made between the two codes given above.

As you can see, we have used a class selector (class begins with .) named .mystyle and added all the styling properties inside curly brackets which we had previously used inside style attribute.

Then we simply removed style attribute from div tag and added the class selector with label mystyle. So basically the browser understands div element should contain the properties of mystyle class. That’s how you can use Internal CSS.

So in Internal CSS, we define the class and group the styles inside the class. Then we can apply all these styles to any HTML element by adding that particular class label to that element.

External CSS

In External CSS, everything is almost the same but we just have to make a completely separate CSS file for storing all the style sheet information. In this way if you have about hundreds of HTML pages then you can simply change their style information by accessing one single file. So in short, one CSS file to style up many HTML pages.

Now let’s create two files. One is style.css and other is test.html. The code for these two files is given below. Make sure you put these two files in the same folder to get it to work.

Style.css

Test.html

The result remains same. But for External CSS, we have created two files. One file contains the styling information while the other file is the main HTML page.

In the HTML page, we just replaced the style tag with link tag. So basically instead of filling the page with styling information, we are linking the file to get the styling information.

Here the link tag will tell the browser to use stylesheet information from style.css which is of the type text/css and the relation is stylesheet.

I hope you get the idea of Inline, Internal and External CSS. Thanks for reading and do subscribe to the blog feed for more amazing posts. You can find the subscription box below.

Leave a Reply