Internal CSS

What is CSS?

• CSS stands for Cascading Style Sheet.
• CSS is used to apply styling the HTML elements.
• With CSS user can add or change color, font-size and font-family. It also helps user to add margins or padding to different HTML elements.
• CSS helps user to make the HTML elements or front end look more elegant.

There are 3 different ways to add/apply CSS into the HTML pages-

1. Internal CSS
2. External CSS
3. Inline CSS

Let’s take a look on these three different ways to add CSS.

Internal CSS

<style> tag is used to add internal CSS in HTML page. Internal CSS apply to the all elements present in the <style> tag.

<style> tag is used within <head> tag of HTML page.

Syntax:

<head> 
<style type="text/css">
HTML_tag_element{ 
  CSS property code
}
</style>
</head>

For Example,

<head>
<style>
p{
 color: red;
font-family: Segoe UI Black;
 font-size: 50px;
}
</style>
<body><p>An example with CSS</p></body>

In above code, internal CSS applied to the <p> tag of HTML page where we applied the color, font-family, and font size properties. And this CSS makes simple <p> tag element look better and elegant. And this is how user can use internal CSS to apply styling to <p> tag and other html tags also.

Output:

External CSS

In case of internal CSS styling is applies to only one HTML page and within that page only.
In order to apply styling to all HTML pages present in the project, external CSS is used.
In external CSS, an external CSS file is maintained which contains the code that applies styling to all HTML files.

<link> tag is used in HTML page to apply CSS styling to the current HTML page

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

Example:

Demo.html
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body><p> An example with CSS in Demo file</p></body>


Demo2.html
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body><p> An example with CSS in Demo2 file</p></body>


Style.css
p{
   color: red;
   font-family: Segoe UI Black;
   font-size: 50px; 
}

In above code, separate style.css is written to style the all HTML files. And we apply this styling to 2 files namely Demo.html and Demo2.html using <link> tag.

Output:

Inline CSS

Inline CSS is used to apply styling to specific HTML element

<style> tag is used within the html element just like the internal CSS

Syntax

<html_tag style=”property1:value;property2:value;”></html_tag>
Ex.
<p style=”color:red;font-family: Segoe UI Black;font-size: 50px;”>An example with CSS</p> 
<p>An example without CSS</p>

Output:

The output of all three types of CSS adding methods is same but the method of adding is different and which is to be used depends on the user needs.

Coding Examples of Internal CSS

Let’s discuss some coding examples on Internal CSS.

Example 1

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		body{
			background-color: #DC8B8B
		}
		p {
			background-color: #B4F1DC;
			font-size: 20px;
		}
	</style>
</head>
<body>
    <h2>An Internal CSS Example 2</h2>
    <p>CSS stands for Cascading Style Sheet. CSS is used to apply styling the HTML elements. With CSS user can add or change color, font-size and font-family. Also it helps user to add margins or padding to different HTML elements.CSS helps user to make the HTML elements or front end look more elegant. </p>
</p>
</body>
</html>

Output:

In above code, internal CSS is applied to <p> and <body> tags. Here, the background color property is applied to the body tag and again same property is applied to <p> tag. The <p> tag contains a different background color than <body> tag.         

Example 2

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		h1{
			color: red;
			margin-left: 50px;
			font-family: Verdana;
		}
		h2{
			color: cyan;
		}
		h3{
			color: blue;
		}
	</style>
</head>
<body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
</body>
</body>
</html>

Output:

Here, color property applied to <h1>, <h2> and <h3> tags. And <h1> tag has margin-left property and because of that <h1> element is placed on the page by putting 50px margin.

Example 3

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		img{
			width: 500px;
			height: 400px;
			margin-left: 50px;
			border: 3px solid black;
		}
		h1{
			margin-left: 50px;
		}
	</style>
</head>
<body>
   <h1>CSS styling to Image</h1>
   <img src="image1.png">
</body>
</html>

Output:

It demonstrates CSS properties to image element. Here we set the width and height properties to an image and applied the 3px solid border to an image and the color of border is black. The margin-left property is applied to <img> and <h1> elements.