Adding CSS


CSS can be added to HTML documents by three ways:
  1. Inline CSS
  2. Internal CSS
  3. External CSS

Inline CSS

Inline CSS elements are those which are defined at same place where HTML elements is defined.

Example:

<!DOCTYPE html>
<html>
<head>
<title>
INLINE CSS
</title>
</head>
<body>
<p style="color:red">HELLO WORLD</p>
</body>
</html>

Output:

HELLO WORLD

Internal CSS

Internal CSS elements are those that are defined in same HTML documents in between<style> and </style> tags.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p{
color:red;
}
</style>
<title>
INTERNAL CSS
</title>
</head>
<body>
<p>HELLO WORLD</p>
</body>
</html>

Output:

HELLO WORLD

External CSS

External CSS elements are defined in other file having extension .css.They are connected to HTML documents using meta tag elements described in head.
    Syntax:
  • <link rel="stylesheet" type="text/css" href="css file location.css">

Example:

HTML coding
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>
EXTERNAL CSS
</title>
</head>
<body>
<p>HELLO WORLD</p>
</body>
</html>
CSS coding in file named style.css
p{
color:red;
}

Output:

HELLO WORLD