Close understanding of Inline, Internal and External CSS

by · Published · Updated

There are three ways or methods or processes to apply CSS to any HTML documents. In other word, there are three types of CSS. They are- Inline CSS, Internal CSS and External CSS. It is very essential for the beginners to have a clear understanding to applying three methods effectively and skillfully.

Where you’re going to use which type of CSS largely depends on the situation. Practice and understanding will enable you to figure it out. There might have situation where you can use any of the three types but you have to come to conclusion which type of CSS is convenient, time-saving and specific to use in a definite scope.

In scope of building the structure of a large website, External CSS file is used. This helps the developers manage different file-types (such as .css, .php, .docs, .js, .html files) easily keeping the CSS files separate. But in Posting level, you can style specific part of HTML Element, even a sentence or a word by using Inline CSS. In case of a structured site/blog like WordPress, there is huge scope to use Inline CSS. Space is also provided for additional CSS that might make the look of a page/Post eye-catching.

Inline Internal and External CSS

However, before you enter our practical approach session, It is expected that you have a rough understanding of HTML and CSS. If you don’t, two links below will help you start up-

Same styling by Inline or Internal or External CSS

Now we’re going to demonstrate how the same CSS code can be applied to HTML by all Inline, Internal and External CSS method.

Now let’s take an blank HTML structure:

<!DOCTYPE html>
<head>
<title>Page Title</title>
<style>
……………….
</style>
</head>
<body>
………………………
</body>
</html>

In our HTML tutorial, we clarified what this structure does mean.

The visible part of our HTML document will go between <body> and </body> tag and within <style> and </style> tag goes Internal CSS code.

Suppose we like to furnish our Document with the following HTML Elements inside body–

  • A container div. Div is a Block-level HTML Element which can contain as many Elements as one needs. Div can include even other div
  • Within div, we’ll include two other Elements- a heading (h3) and two paragraphs (p)

Now place the Elements within body-

<!DOCTYPE html>
<head>
<title>Page Title</title>
<style>
</style>
</head>
<body>
<div> 
<h3></h3>
<p></p>
<p></p>
</div>
</body>
</html>

All are HTML here; no CSS. Now provide probable Contents for Heading (h3) and Paragraphs (p)–

<!DOCTYPE html>
<head>
<title>Page Title</title>
<style>
</style>
</head>
<body>
<div> 
<h3>Two cities of 21st century</h3>
<p>London is the capital of England and the United Kingdom. 
London stands on the river Thames in the south-east of England. 
It is particularly well-known for influencing other cities of the world 
since the Middle Ages.</p>
<p>Paris is the capital of France. 
Paris stands on the river Seine. 
It is a major European city and a global center 
for art, fashion, gastronomy and culture.</p>
</div>
</body>
</html>

Now it is time to apply CSS to style the document. Which CSS? Inline, Internal or External? We’ll apply each method turn by turn. At first- Inline. But first of all, we need to intend what changes we do want to make in the document by CSS. Suppose, we want to do the followings-

  • Enclose the div by a solid border with 4px width and navy color; div padding 15px.
  • Heading will be styled with 30px center-aligned bold font and darkblue color.
  • Set first paragraph color purple
  • Second paragraph color is indigo
  • Whole background color: aliceblue

Now, let’s transform the styling info into CSS code. First we’re going to apply Inline CSS method. For this, we’ll add the CSS info as style Attribute with start tag of HTML Elements in the form of Property:Value.

Applying Inline CSS

Have a special look at the inserted codes below-

CODE

<!DOCTYPE html>
<head>
<title>Page Title</title>
<style>
</style>
</head>
<body style="background-color:aliceblue;">
<div style="border:4px solid navy; padding:15px;"> 
<h3 style="font-size:30px;color:darkblue;font-weight:bold;text-align:center;">Two cities of 21st century</h3>
<p style="color:purple;">London is the capital of England and the United Kingdom. 
London stands on the river Thames in the south-east of England. 
It is particularly well-known for influencing other cities of the world 
since the Middle Ages.</p>
<p style="color:indigo;">Paris is the capital of France. 
Paris stands on the river Seine. 
It is a major European city and a global center 
for art, fashion, gastronomy and culture.</p>
</div>
</body>
</html>

Probably all are self-explanatory. background-color always go with body tag.

This is called Inline CSS. CSS codes are inserted with Start Tag of associated Elements by style Attribute. There are also many other Attributes, hundreds of Properties with their numerous values in CSS. See output-

OUTPUT

Two cities of 21st century

London is the capital of England and the United Kingdom. London stands on the river Thames in the south-east of England. It is particularly well-known for influencing other cities of the world since the Middle Ages.

Paris is the capital of France. Paris stands on the river Seine. It is a major European city and a global center for art, fashion, gastronomy and culture.

Now try it yourself. For this, do the followings-

  • Copy the whole code from above.
  • Open a Text-editor, e.g. Notepad or Notepad++.
  • Paste the code in working field. No editing needed.
  • Save the file with a filename with .html extension. For example- mycsstrial.html
  • Open the file with any Browser like Mozilla. You’ll see the same result as shown above.

Now it is turn for Internal CSS to apply

Applying Internal CSS

We’re going to do the same thing to get the same output. But by applying Internal CSS method.

What is the place where we’ll write Internal CSS code?

Definitely within <style> and </style> tag inside head section. This place (<style>…</style>) is stored for Internal CSS and for linking with External CSS file, Javascript and other files.

HOW?

By using style attribute?

Certainly not. We’ll write code inside style tag itself. So, here style attribute won’t be applicable.

The system applies here is Selector. We’ll use Selector to apply styling on different HTML elements or other scopes.

CSS Selector: CSS Selector is the basic part of CSS rule. Selector is used to indicate HTML elements or group of elements according to their id, type, class, attribute etc. in order to apply CSS style.

Suppose we want to change the font-size of a paragraph (p element) to 25 pixel in bold format, we write it the following way within style tag–

<style> 
p {
font-size:25px;
font-weight:bold;
}
</style>

Here p means all p’s in the document. Probably you don’t want that but like to use this style on a definite paragraph. In this case you have to use class or id attribute. However, we’re going to clarify this next step.

Now, in order to apply Internal CSS on the HTML document above, first, let’s remove all the Inline CSS from that as shown below-

<!DOCTYPE html>
<head>
<title>Page Title</title>
<style>
</style>
</head>
<body>
<div> 
<h3>Two cities of 21st century</h3>
<p>London is the capital of England and the United Kingdom. 
London stands on the river Thames in the south-east of England. 
It is particularly well-known for influencing other cities of the world 
since the Middle Ages.</p>
<p>Paris is the capital of France. 
Paris stands on the river Seine. 
It is a major European city and a global center 
for art, fashion, gastronomy and culture.</p>
</div>
</body>
</html>

Now let’s change all the previous Inline CSS into to Internal CSS by applying Selector and apply on the document. 

<!DOCTYPE html>
<head>
<title>Page Title</title>
<style>
body {
background-color:aliceblue;
}
div {
border:4px solid navy; 
padding:15px;
}
h3 {font-size:30px;
color:darkblue;
font-weight:bold;
text-align:center;
}
.para1 {
color:purple;
}
.para2 {
color:indigo;
}
</style>
</head>
<body>
<div> 
<h3>Two cities of 21st century</h3>
<p class="para1">London is the capital of England and the United Kingdom. 
London stands on the river Thames in the south-east of England. 
It is particularly well-known for influencing other cities of the world 
since the Middle Ages.</p>
<p class="para2">Paris is the capital of France. 
Paris stands on the river Seine. 
It is a major European city and a global center 
for art, fashion, gastronomy and culture.</p>
</div>
</body>
</html>

That’s it. The highlighted portion shows the use of Internal CSS. We didn’t change but kept all the Property:Value declarations intact. We only rewrote them with Selector as CSS rules allow. Now save the whole document with .html extension as we showed earlier. Open it with a Browser. It will produce the same result as did in case of Inline CSS.

Explanation
  • Here body, div and h3 are simple element selectors.
  • There are two p elements. Here if we use one p Selector, then, this style will apply to both the P’s. So, to ensure separate styling in two P elements, we took two class attributes- para1 for first paragraph (with first p) and para2 for second paragraph (with second p). You can also name the attribute anything you like.
  • We’ve defined para1 and para2 as class selectors. A dot (.) is used before class selector. So we use .para1 and .para2 while styling. Styling in para1 will apply to first paragraph and that in para2 will go with second paragraph.

Now re-save the file as we previously saved it by the name mycsstrial.html. If you had used a new document, save it with name and .html extension. Now, open the file with a Browser. You see the same result as produced in case of Inline CSS.

Applying External CSS

There is little difference between Internal and External CSS. The only fact is that the CSS portion within <style> and </style> are stored in a separate file with .css file extension. And this file is linked with the main HTML document inside <head> and </head> tag.

Let’s see the whole process step by step-

First separate the CSS portion inside style tag which will look like this-

body {
background-color:aliceblue;
}
div {
border:4px solid navy; 
padding:15px;
}
h3 {font-size:30px;
color:darkblue;
font-weight:bold;
text-align:center;
}
.para1 {
color:purple;
}
.para2 {
color:indigo;
}

Save the file with a name with .css extension (Suppose style1.css). Noted, don’t use <style> and </style> tag here as we did in Inline CSS. Put it in a folder named CSS TEST.

Now in HTML file of the document, use the following line of code within <head> and </head>. 

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

Replace css file name style.css in the code with your own css file name style1.css as href attribute value Now, the HTML structure will look like this-

<!DOCTYPE html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<div> 
<h3>Two cities of 21st century</h3>
<p class="para1">London is the capital of England and the United Kingdom. 
London stands on the river Thames in the south-east of England. 
It is particularly well-known for influencing other cities of the world 
since the Middle Ages.</p>
<p class="para2">Paris is the capital of France. 
Paris stands on the river Seine. 
It is a major European city and a global center 
for art, fashion, gastronomy and culture.</p>
</div>
</body>
</html>

Now move this file (previously named mycsstrial.html) to CSS TEST folder.

All’re done. Now open the html file (mycsstrial.html) with a Browser. You’ll see the same output as we showed earlier.

Hope you enjoyed the presentation grasping the basic idea of applying Inline, Internal and External CSS in HTML document own way.

If you applied the methods by your own, feel free to let me know how you enjoyed or faced the challenges.

Happy blogging! Happy journey to development!

Leave a Reply

Your email address will not be published.