There are three ways to insert a CSS; internal or embedded, external, and inline. Here, we will cover the basics of the internal style sheet. An internal style sheet is a section on an HTML page that contains style definitions. When using internal CSS, we must add a new tag, <style>, inside the <head> tag. The HTML code below contains an example of <style> usage.

Other useful CSS articles:

In the following CSS example I will show you how to alter a table’s column properties using an internal CSS file. As you will see in the following CSS and HTML example, you need to add a “class=’className'” to your table column and put your CSS in a “.className{}”. The CSS will be included in the HTML file.

<html>
 <head>
  <title>Internal Style Sheet Example</title>
   <style type="text/css">
   <!--
   .className{
     background-color: #FF0000;
     background-image:url('background.jpg');
   -->
  </style>
 </head>
<body>
<table>
 <tr>
  <td class="className">
    Column 1
  </td>
  <td>
    Column 2
  </td>
 </tr>
</table>
</body>
</html>

This is the style tag that you need to add in the head portion of your HTML document.

<style type="text/css">
<!--
.className{
background-color: #FF0000;
background-image:url('background.jpg');
-->
</style>

Finally this is the table itself. I will modify the first column with the CSS.

<table>
 <tr>
  <td class="className">
   Column 1
  </td>
  <td>
   Column 2
  </td>
</tr>
</table>

Be sure to add an HTML comment after the <style> tag to protect older browsers.

<!-- Open the comment
-->  Close the comment

Using the above CSS and HTML samples you can modify a table’s columns using an internal CSS. The modifications will be specific to one column and not all table columns.

Summary

Advantages

  • Internal style sheets affect only the page they are on.
  • Internal style sheets can use classes and IDs.
  • They don’t require that you upload multiple files.
  • They may have higher precedence than external style sheets.

Disadvantages

  • They affect only the page they are on.
  • Internal style sheets increase page load times.

In Closing

Thank you so much for reading, and I hoped you have learned something new and valuable that you can use and remember to share the article if you’ve enjoyed it, and leave us a comment.