CSS Introduction

CSS Tutorial What is CSS CSS Syntax CSS Selector How to include CSS CSS Comments

CSS Attributes

CSS Background CSS Border CSS Display CSS Float CSS Font CSS Color CSS Hover CSS Important CSS Line-height CSS Margin CSS Opacity CSS Filter CSS Images CSS Overflow CSS Padding CSS Position CSS Vertical align CSS White space CSS Width Word-wrap in CSS Box-shadow in CSS Text-transform in CSS CSS Outline CSS Visibility CSS Counters CSS Clear fix CSS Icons CSS Justify-content Text-decoration in CSS CSS Lists CSS nth selector CSS Sticky CSS Background-clip CSS Checkbox-style CSS Letter-spacing CSS Navigation bar CSS Overlay CSS Root CSS Specificity CSS Text-indent CSS Text-stroke CSS Zoom CSS Order CSS Descendent selector CSS Clip CSS calc() CSS Background-blend-mode CSS radio-button CSS Superscript and subscript CSS Text-effects CSS Text-align CSS Variables CSS Page-break-before CSS Page-break-inside CSS Page-break-after CSS Content property CSS Word-spacing CSS Animation CSS @keyframes rules CSS Pseudo-classes CSS Pseudo-elements CSS Radial-gradient CSS Translate CSS Gradients CSS z-index CSS Loaders CSS Units CSS Transition CSS Masking CSS Arrow CSS Pagination

Misc

What is Bootstrap CSS What is CSS used for Difference between HTML and CSS How to center a table in CSS What is a CSS File How to center a button in CSS How to change background color in CSS How to change the font in CSS How to change font size in CSS How to resize an image in CSS How to get rid of bullet pioints in CSS Is CSS a programming language Grid Vs Flexbox in CSS How to edit CSS in WordPress How to use google fonts in CSS

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:

Internal CSS

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:

Internal CSS

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:

Internal CSS

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:

Internal CSS

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:

Internal CSS

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:

Internal CSS

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.



ADVERTISEMENT
ADVERTISEMENT