types of css

Vishal Agrahari July 23, 2019

Types of  CSS (Cascading Style Sheet):-

CSS (Cascading Style Sheet) is used to set the style in web pages which contain HTML elements. It sets the background color, font-size, font-family, color, etc property of elements in a web pages.
There are three types of CSS which are given below:
  • Inline CSS.
  • Internal or Embedded CSS.
  • External CSS.
    

Inline CSS:-

An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.


Example

Inline styles are defined within the "style" attribute of the relevant element:

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>


Internal Style Sheet :-


An internal style sheet may be used if one single page has a unique style.

Example

Internal styles are defined within the <style> element, inside the <head> section of an HTML page.

<head>
<style>
body {
  background-color: linen;}

h1 {
  color: maroon;
  margin-left: 40px;} </style>
</head>

External Style Sheet :-


With an external style sheet, you can change the look of an entire website by changing just one file!

Each page must include a reference to the external style sheet file inside the <link> element.


Example

External styles are defined within the <link> element, inside the <head> section of an HTML page.

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

An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension.

Here is how the "mystyle.css" file looks like:

body {
  background-color: lightblue;}

h1 {
  color: navy;
  margin-left: 20px;}
Tags
Reactions

Post a Comment

3 Comments