How to use internal CSS (Style Sheet) in HTML?

HTML Web Development Front End Technology

Cascading Style Sheets is used to format the presentation of a webpage.

CSS is used to style and layout web pages — you can control the presentation of the web page using, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features available within the css properties.

Internal CSS

Internal CSS is used to define within style tags for a single HTML page. It is defined inside the <head> tag of an HTML page, within a <style> tag element.

Example

Following is the example program, uses internal CSS for styling in HTML.


<!DOCTYPE html>
<html>
<head>
   <style>
      body {background-color:tan;}
      h1 {color: whitesmoke;
      font-family: cursive}
      p {color:whitesmoke;
      background-color: dimgrey;
      font-family: monospace}
   </style>
</head>
<body>
   <h1>HTML-HyperText Markup Language </h1>
   <p>The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.</p>
</body>
</html>

Example

Following is the example program, uses internal CSS for styling for <ol> element in HTML.


<!DOCTYPE html>
<html>
<head>
   <style>
      ol.a {
         list-style-type: upper-roman;
      }
   </style>
</head>
<body>
   <h2>List</h2>
   <ol class = "a" >
      <li>GOT</li>
      <li>HOTD</li>
      <li>HBO</li>
   </ol>
</body>
</html>

Example

Following is the example program, uses internal CSS for styling for <table> element in HTML.


<!DOCTYPE html>
<html>
<head>
   <title>Inline CSS</title>
   <style>
      table, th, td {
         border: 3px solid;
      }
   </style>
</head>
<body>
   <table>
   <tr>
      <th>Firstname</th>
      <th>Lastname</th>
   </tr>
   <tr>
      <td>SS</td>
      <td>Rajamouli</td>
   </tr>
   <tr>
      <td>Prashant</td>
      <td>Neel</td>
   </tr>
 </table>
</body>
</html>