Types of CSS

Prev
Next
Types of CSS

Types Of CSS

There are 3 types of CSS so there are 3 ways to include CSS in the document –

  • Inline CSS
  • Internal CSS
  • External CSS

Out of these, the best way to include CSS is through External CSS but depending upon the requirement, you can also use Inline CSS and Internal CSS

Inline CSS

Inline CSS applies the style to a single element while that element is present in the body section. The style attribute is applied along with that single element in continuation.

So, Inline CSS is present just next to the element it selects.

Syntax of Inline CSS:
<elementName style=attr1:val1;attr2:val2;…..;attr-n:val-n>Details</elementName>

Example for Inline CSS

<p style="background-color:SlateBlue;padding:10px">This paragraph uses Inline CSS</p>
Run the Code

Internal CSS

Internal CSS applies the CSS on a single page hence it is also known as Embedded CSS. It can include in the top of the document. The internal CSS includes within the <style>…</style> tag and this <style> tag is included in the <head> section.

The use of Internal CSS is mostly when the whole page has one unique style for each element.

Syntax of Internal CSS:
<head>
<style>
  elementA {
    attra1:vala1;
    attra2:vala2;
    ..;
    attr-an:val-an
}
  ..
  elementN {
    attrn1:valn1;
    attrn2:valn2;
    ..;
    attr-nn:val-nn
}
</style>
</head>

Inline css example

Example for Internal CSS

.h4class {
  background-color:#ffa500;
}
.square {
  list-style-type: square;
}
Run the Code

External CSS

External CSS is the best way to apply styles on multiple pages. You must add a link of the external CSS file in the section as shown in the example below-

Here, you can create an external style sheet with .CSS extension and can use this file to apply styles on different pages.

External CSS is the best way to change the style and look and feel factor of a website due to these reasons –

  • It is easy to maintain the code.
  • We can make Changes directly to one file instead of making changes to multiple HTML files.
  • It reduces the number of lines of code.

External CSS must be included in <head> section as below:
<link rel=”stylesheet” type=”text/css” href=”cssfilename.css”>

Example for External CSS

STEP 1- Create an External CSS file with .CSS extention. For example - Suppose, we have an external CSS file with any valid name like style.css whose content is as below - 
h1  {
  background-color:#ff6347;
  color: blue;
}

h5 {
  color: Tomato;
}

p  {
text-align: center;
}
STEP 2- Then, you can place this file either at the same location in which your HTML file is present or you can place this inside some other folder like 'CSS' folder.
In Case, you place your CSS file in the same location where you kept your HTML file then the syntax to include the CSS file is -
<ink rel="styesheet" type="text/css" href="style.css">. You should include this CSS file under the <head> section as below - 
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Run the Code 
<head>
<link rel="stylesheet" type="text/css" href="cssext/extstyle.css">
</head>

Now, you know what is CSS and its types so let us move further with other important topics.

CSS Interview Question and Answers

To embed CSS in HTML we use ‘style‘ tag.

For Example,

<head>
<style>
.styleval { background:skyblue;
width:500px;
text-align: center;
border-radius:5px;}
</style>
</head>

Mainly there are three types of style sheets in CSS that is:-

  • Inline CSS.
  • Internal CSS
  • External CSS

Inline CSS:
Inline CSS is used to give CSS property within an HTML tag.

<h1 style="font-size:20px; color:green;">Heading tag</h1>

Internal CSS:
In Internal CSS, properties are given within HTML

Create an External CSS file with .CSS extension. For example – If we have an external CSS file with the name style.css then in that file we give CSS style properties.

And link that file within section tag.

Most used style sheets are External style sheets.
In External style sheet, we need to link .css file to the website and same .css file can be used in multiple pages. Any changes we make to our website will be changed globally. External style sheet has a faster loading speed. This prevents us from making changes to each page, at a time we can make changes to all pages in the External style sheet.

So External style sheet is more convenient in CSS.

Prev
Next
Facebook Twitter Google-plus

Tutorials for all brains!