learning basics of web designing

Type of style method

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.

Inline CSS

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.

Internal CSS

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

<head>
<style>
h1{
color: red;
text-align:center;
}
</style>
</head>

When you add this code, the style will apply to all h1 tag in that page.

External CSS

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.

h1{
color: red;
text-align:center;
}

Now you have to link it in the HTML document, for that use below code.

<head>
<link rel="stylesheet" type="text/css" href="default.css">
</head>

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:

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Share the Article

About author
Darshan Saroya

Darshan Saroya

A passionate WordPress Theme Developer. Can build a custom theme for your business.  I love to create clean and modern themes, using the power of WordPress. Here I provide the tutorials related to WordPress Development, Core PHP and HTML.

Free Bootstrap 4 Theme

Mega UI Advanced Material Design Blogging WordPress Theme

Black Friday Deals

Black Friday Deals

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Type of style method

Time to read: 2 min
0