CSS Types

You are here: Home » CSS bible » CSS Basic » CSS Types 

There is three types of CSS:

  1. Inline style;
  2. Internal style sheet;
  3. External style sheet.

CSS inline

The highest priority out of these three ways is Inline CSS. This means that you can override styles that are defined in internal and external CSS. An inline style loses many of the advantages of style sheets, so use it sparingly.

To use inline CSS, add to any HTML tag attribute the style="any CSS property"

Example:

<span style="color:white;background:grey;padding:3px 20px">This is a span tag.</span>

Result:

This is a span tag.

Another Example:

<div style="background:silver;padding:3px;width:100%;text-align:center">Example</div>

Result:

Example

CSS internal

When using internal CSS, you must add a new tag, <style>, inside the <head> tag.

<head>
<style>
selector { property: value; }
</style>
</head>

Example:

<html>
<head>
<style>
#example { background-color: gray;font-size:18px; width:100% }
#example p { color: white; } 
</style>
</head>
<body>
<div id="example"><p> This is paragraph </p></div>
<body>
<html>

Result:

This is paragraph

External CSS

For using external CSS file, each page must link to the style sheet using the <link> tag. In the source code of the page between the <head></head>tags add the following line:

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

Inline, Internal, External. Which to choose?

  • Choose inline if you need to change single HTML tag style.
  • If you need to change single page style, then use internal style.
  • For adding style to the entire Web site, use external type.
Previous page: CSS Id and Class
Next page: Making Cascade Style Sheet