learn2kode.in

Menu

HTML Tutorial

Menu

HTML Style Sheet

HTML allows you to add styles to elements using CSS (Cascading Style Sheets).
CSS controls the look and feel of a webpage — such as colors, fonts, margins, borders, and spacing.

There are three ways to add styles in HTML:

  • Inline CSS
  • Internal CSS
  • External CSS

Inline CSS

Inline CSS is written inside the HTML tag using the style attribute.
It only affects that specific element.

Example

Copy Text 
<!DOCTYPE html>
<html>
  <head>
    <title>Inline CSS Example</title>
  </head>
  <body>
    <h1 style="color: blue; text-align: center;">Welcome to Learn2Kode</h1>
    <p style="color: gray; font-size: 18px;">This is a paragraph with inline styling.</p>
  </body>
</html>

Output

Welcome to Learn2Kode

This is a paragraph with inline styling.

Internal CSS

Internal CSS is written inside the <style> tag in the <head> section of the HTML document. It is used to style elements within the same page.

Example

Copy Text 
<!DOCTYPE html>
<html>
  <head>
    <title>Internal CSS Example</title>
    <style>
      body {
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
      }
      h1 {
        color: darkblue;
        text-align: center;
      }
      p {
        color: #333333;
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <h1>Internal CSS Example</h1>
    <p>This paragraph is styled using internal CSS.</p>
  </body>
</html>

Output

Internal CSS Example

This paragraph is styled using internal CSS.

External CSS

External CSS is written in a separate .css file and linked using the <link> tag inside the <head> section. This is the most common and preferred method because it allows you to use the same CSS file for multiple pages.

Example HTML File (index.html)

Copy Text 
<!DOCTYPE html>
<html>
  <head>
    <title>External CSS Example</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>External CSS Example</h1>
    <p>This paragraph is styled using an external CSS file.</p>
  </body>
</html>

CSS File (style.css)

Copy Text 
body {
  background-color: #eaf7ff;
  font-family: Verdana, sans-serif;
}

h1 {
  color: #0073e6;
  text-align: center;
}

p {
  color: #444;
  font-size: 18px;
}

Comparison Table

Copy Text 
<table border="1" cellpadding="8" cellspacing="0">
  <thead>
    <tr>
      <th>Style Type</th>
      <th>Description</th>
      <th>Usage</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Inline CSS</td>
      <td>Applied directly in the HTML element using the <code>style</code> attribute</td>
      <td><code><p style="color:red;">Text</p></code></td>
    </tr>
    <tr>
      <td>Internal CSS</td>
      <td>Defined inside a <code><style></code> tag in the HTML document</td>
      <td><code><style> p {color:red;} </style></code></td>
    </tr>
    <tr>
      <td>External CSS</td>
      <td>Written in a separate .css file and linked using <code><link></code></td>
      <td><code><link rel="stylesheet" href="style.css"></code></td>
    </tr>
  </tbody>
</table>

Output

Style Type Description Usage
Inline CSS Applied directly in the HTML element using the style attribute <p style="color:red;">Text</p>
Internal CSS Defined inside a <style> tag in the HTML document <style> p {color:red;} </style>
External CSS Written in a separate .css file and linked using <link> <link rel="stylesheet" href="style.css">
HTML Formatting