HTML CSS


CSS is the abbreviation of Cascading Style Sheet.CSS describes how HTML documents are displayed on screen.W3C is promoting CSS for styling web pages since 1994.
    CSS stylesheets are of three types:
  • Inline CSS-These type of CSS rules are defined in particular HTML element where we want to apply that CSS effect.
  • Internal CSS-These type of CSS rules are defined in same HTML code page within <style> and </style> tags.
  • External CSS-These type of CSS rules are defined in other .css file.

Inline CSS

Example:

In this example h1 and h2 contain inline CSS rule.
<!DOCTYPE html>
<html>
<head>
<title>
Inline CSS
</title>
</head>
<body>
<h1 style="color:blue">This is heading.</h1>
<h2 style="color:red">This is heading</h2>
</body>
</html>

Output:

This is heading.

This is heading.

Internal CSS

Example:

Here in this HTML document within <style> and </style> tags few CSS rules are defined see them and try to understand.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:green;}
h1 {color:blue;}
p {color:white;}
</style>
<title>
Internal CSS
</title>
</head>
<body>
<h1>This is blue heading.</h1>
<p>This is paragraph.</p>
</body>
</html>
Here body element in <style> tag defines that the background color of entire body will be green.h1 element determines colour of <h1> element as white.Similarly <p> defines colour of p element as white.
    Notation:
  • Description of every CSS element is given in between { and }.
  • Syntax-selector{property:value;}
  • Example:body{background-color:green;}
  • <style> tags are suggested to keep within between <head> and </head> tags.

Output:

This is blue heading.

This is paragraph.

External CSS

To apply this CSS rule we need to declare the address or loctaion of CSS file in header so that browser can load certain CSS properties in HTML documents written in that particular CSS file.

Syntax for adding external CSS file to HTML document:

<link rel="stylesheet" type="text/css" href="CSS file name.css">
Example:<link rel="stylesheet" type="text/css" hef="style.css">

Example:

Content of HTML file
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>
External CSS
</title>
</head>
<body>
<h1>This is heading.</h1>
<p>This is paragraph.</p>
</body>
</html>
Content of CSS file
body{background-color:green;}
h1{color:blue}
p{color:white;}

Output:

This is heading.

This is paragraph.