Hello friends, hope you get the basic idea of the styling HTML elements. There are also other methods to apply a style to HTML elements. In this lesson, we know about them. So let’s get started.
Type of CSS
CSS can be applied to an element in 3 different ways. But before dive into this let me explain it.
- Suppose you want to style all headings, h1, in the same way on a page, then you have to write the same style in every h1 tags.
- As we learn, website pages have almost the same layouts, like header and footer. So you have to write the same css rules in each file also.
The above points feel you somehow uncomfortable. One has to write the same code every time on every page. But there is a solution for it. Which are the types of style method.
When you add style within the tag then it is known as inline CSS. Like we do in the last lesson and in below example.
<h1 style="color:red; text-align:center;">This is a styled heading.</h1>
When you write code with tag, its inline CSS. It only applied to the current element and its sub-elements.
In this method, style is defined in
<style> tag and write within the head tag. Like you want to make all h1 to red color and center align, then internal CSS will be like
When you add this code, the style will apply to all h1 tag in that page.
When you want to use the same style for many pages, external CSS helps you. In this method, style is written in an external file and then the file is linked to pages. So make a file name default.css in your folder and add below style in it.
Now you have to link it in the HTML document, for that use below code.
<link rel="stylesheet" type="text/css" href="default.css">
And your style will be applied to the page. When you want to use this file to another page, just add this code.
You can use internal CSS any where in the page, it will work. But validate method is to use it within head tag.
Hope this clear the ways to add style to a page. In next lesson we will dive into the deep sea of the CSS.
How useful was this post?
Click on a star to rate it!
Average rating / 5. Vote count:
We are sorry that this post was not useful for you!
Let us improve this post!
Thanks for your feedback!