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


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>

Updated on: 11-Nov-2022

4K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements