Type of CSS

Types of styles:

  • Inline
  • Internal
  • External CSS

Inline Styles : This kind of style takes values inline with the html tag

Try this example:

<font style=”color: red; background-color: orange;”>

Test Font

</font>


Internal Styles : Here we define style under head tag and use it for our tags.
Inside head tag we will define styles as given in the examples. Internal styles can be used in three ways

Try this example :

body {

background-color: gray

}

p {

color: red;

}

h3 {

color: white;

}


External CSS : When using CSS it is preferable to keep the CSS separate from your HTML. Placing CSS in a separate file allows the web designer to completely differentiate between content (HTML) and design (CSS). External CSS is a file that contains only CSS code and is saved with a “.css” file extension. This CSS file is then referenced in your HTML using the <link> instead of <style>.

Try this example :

<html>

<head>

<title> External CSS </title>

<link rel=”stylesheet” type=”text/css”
href=”test.css” />

</head>

<body>

<h3> Heading </h3>

<p> This paragraph has a red font

The background color of this page is gray because

we changed it with CSS! </p>

</body>

</html>


HTML code :

<html>

<head>

<title> My Personal web page! </title>

<!– Internal CSS code –>

<style type=”text/css”>

body {

background-color: gray

}

p {

color: red;

}

h3 {

color: white;

}

</style>

</head>

<body>

This is example of internal css<br>

This is example of internal css <br>

This is example of internal css <br>

<br />

<font style=”color: red; background-color: orange;”>

Inline css code

</font>

<br />

<p>This is the example of basefont…</p>

<p>This is the example of basefont…</p>

<p>This is the example of basefont…</p>

</body>

</html>

Comments