Skip to main content

There are three ways to add CSS

  1. Inline CSS => single element
  2. Document level / Internal CSS
  3. External CSS

Inline CSS​

Inline CSS are using the style attribute inside HTML elements. It is used to give CSS for individual HTML tags.

Code :

 <button style=" background-color: black;color: white; border: none;
 border-radius: 5px;padding: 10px;"> Click Here to Learn HTML</button>

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Inline CSS</title>
  </head>
  <body>
    <button
      style=" background-color: black;color: white; border: none; 
    border-radius: 5px;padding: 10px;"
    >
      Click Here to Learn HTML
    </button>
  </body>
</html>

Output :

output-12

Document level​

Document level CSS used <style> element in the <head> section.

Code :

<head>
    <style>
      .btn {
            background-color: black;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 10px;
        }
    </style>
</head>

Example :

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document Level</title>
    <style>
      .btn {
        background-color: black;
        color: white;
        border: none;
        border-radius: 5px;
        padding: 10px;
      }
    </style>
  </head>

  <body>
    <button class="btn">Click Here to Learn HTML</button>

    <button class="btn">Click Here to Learn CSS</button>
  </body>
</html>

Output :

output-13

External CSS​

External CSS are using a <link> element to link to an external CSS file. We can provide external link to <head> section.

External Link Example :

<link rel="stylesheet" href="style.css"/>

Code :

File Name : game.html

<!DOCTYPE html>
<html>
  <head>
    <title>Games</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <button class="btn">Click Here to Play Basketball🏀</button>
    <button class="btn">Click Here to Play Cricket🏏</button>
  </body>
</html>

File Name : study.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Study</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <button class="btn">Click Here to Learn HTML</button>
    <button class="btn">Click Here to Learn CSS</button>
  </body>
</html>

File Name : style.css

.btn {
  background-color: black;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px;
}
game.html file output :
output-14
study.html file output :
output-15