Types of CSS | External CSS | Internal CSS | Inline CSS | Use of CSS With HTML

Types of CSS





types-of-css

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

1.External CSS

Here some points are given below for external CSS:

  • External style sheet is a separate file of CSS.
  • File must be saved with .css extension.
  • File contains no tag and only contains CSS code.
  • File can be used to apply on several html files.
  • External style sheet is useful when properties need to be applied on more than one web page on the site.

Example:

HTML file:

 

<html>

<head>

<link rel=”style sheet” type=”text/css” href=”mystyle.css” />

</head>

<body>

<h1> This is  heading. </h1>

<p> This is a paragraph. </p>

<p> This is second paragraph. </p>

</body>

</html>

CSS file (mystyle.css):

p{

color:blue;

}

h1{

color:red;

}


  1.  Internal CSS:
  • Internal style sheet means when CSS is included in the same html file.
  • <style> tag must be used to write CSS in html file.
  • <style> tag should be in <head> tag.
  • Type attribute of style tag specify the type of MIME type (text/css).
  • Internal style sheet is useful when page specific properties need to be applied.
  • Preference is given to internal style sheet over external style sheet.

Syntax of internal css:

<style type=”text/css”>

ElementSelector{

PropertyName:PropertyValue;

PropertyName:PropertyValue;

}

Example:

<html>

<head>

<style type=”text/css”>

h1{

color:blue;

font-style:italic;

}

</head>

<body>

<h1> This is  heading. </h1>

<p> This is a paragraph. </p>

<p> This is second paragraph. </p>

</body>

</html>





3. Inline CSS

  • Style attribute can be used with tag representing html element.
  • The value of style attribute is any CSS property.
  • Each property name-value pair is terminated with a semicolon.
  • Inline style has more preference given than internal or external style.
  • Inline style is useful when element specific property needs to be applied.

Example:

<html>

<head>

</head>

<body>

<p style=”color:gray; font-size:22px;”>

This is a paragraph

</p>

</body>

</html>




Leave a Reply

Your email address will not be published. Required fields are marked *