How to include CSS in HTML?

Submitted 4 years, 2 months ago

Ticket #357

Views 385

Language/Framework CSS

Priority Low

Status Closed

Thanks

Submitted on Feb 22, 21

rocky

add a comment

1 Answer

Verified

There are 3 ways to style an HTML element (or more), using CSS:

1: Inline style:

<!doctype html)
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Test Doc</title>
  </head>
  <body>
    <!-- This paragraph will have red color and gray background -->
    <p style="color: red; background-color: gray;">Some text in here</p>
  </body>
</html>

2. Internal style

<!doctype html)
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Test Doc</title>
    <style>
      /* style all paragraphs */
      p {
          color: red;
          background-color: gray;
      }
   
      /* to apply style to only one element, use an ID */
      #p-with-id {
          fond-size: 20px;
      }
      /* to apply style to multiple tags, use classes */
      .blue-text { color: blue; }
      .yellow-bkg { background-color: yellow; }
      .red-text { color: red; font-weight: bold; font-style: italic; }
    </style>
  </head>
  <body>
    <!-- This paragraph will have red color and gray background -->
    <p>Some text in here</p>
    <p id="p-with-id">Paragraph with ID</p>
    <p class="blue-text">Blue text class</p>
    <p class="blue-text yellow-bkg">Blue text and yellow background</p>
    <p class="red-text">Red text</p>
  </body>
</html>

3. External style
In this case, CSS code goes in a file with .css extension.
In this example, both index.html and style.css will be located in same directory

<!-- index.html file -->

<!doctype html)
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Test Doc</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- This paragraph will have red color and gray background -->
    <p>Some text in here</p>
    <p id="p-with-id">Paragraph with ID</p>
    <p class="blue-text">Blue text class</p>
    <p class="blue-text yellow-bkg">Blue text and yellow background</p>
    <p class="red-text">Red text</p>
  </body>
</html>

/* style.css file */

/* style all paragraphs */
p {
    color: red;
    background-color: gray;
}
   
/* to apply style to only one element, use an ID */
#p-with-id {
    fond-size: 20px;
}
      
/* to apply style to multiple tags, use classes */
.blue-text { color: blue; }

.yellow-bkg { background-color: yellow; }

.red-text { 
    color: red; 
    font-weight: bold;  
    font-style: italic; 
}

Submitted 4 years, 1 month ago