Understanding the Different Types of CSS: Inline, Internal, and External

Rumman Ansari   Software Engineer   2024-07-28 02:26:13   168  Share
Subject Syllabus DetailsSubject Details
☰ TContent
☰Fullscreen

Table of Content:

Inline Styles

An Inline CSS is used to apply a unique style to a single HTML element and it uses the style attribute inside the HTML element as shown.


<body>
	<h2 style="background:#ccc; color:#000; border: solid black 1px;"> Welcome To atnyla.com </h2>	
</body>
  • background: light grey (#ccc)
  • color: Text or font is rendered in black color (#000 color)
  • border: 1-pixel black border is applied on all four sides

Inline styles have the highest precedence in a document.

Internal Styles

An Internal CSS is the similar to Inline styles and it uses the style tag inside <head> tag.

Following is a sample code on how to apply Internal styling to an element:


<head>
	<style>
		h1 {color: green; font-size: 10px; }
	    h2 {background:#ccc; color:#000; border: solid black 1px;}
	    p  {color: black;}
	</style>
</head>
<body>
	<h2> Welcome to Fresco Play </h2>
</body>

  • Whatever you write inside <body> of html page with <h1> tag, will be green in color and its font-size will be 10px.

  • Similarly <h2> and <p> styles are applied to their respective content in body.

External Style Sheets

An external style sheet may be linked to an HTML document through HTML's LINK element. The "LINK" tag is placed in the document <head> tag.


LINK REL=stylesheet HREF="style.css" TYPE="text/css" MEDIA=screen
  • Attribute TYPE is optional and is used to specify, media type for a Cascading Style Sheet, allowing browsers to ignore style sheet types that they do not support.
  • The MEDIA attribute is also optional and specifies the medium or media to which the style sheet should be applied.
  • External style sheets should NOT contain any HTML tags like HEAD or STYLE. The style sheet should consist merely of style rules or statements.