Internal CSS is a form of CSS using which you can add CSS to HTML documents. It helps to design the layout of a single HTML web page and change the styles of a web page within HTML code.
What Is CSS?
CSS stands for Cascading Style Sheets. It used to format the layout of a webpage. With the help of CSS, you can change the background image, background color, display color, images, fonts, size of the text, spacing between the text, layering of the texts, different layouts for different devices, and customize web pages for different screen sizes.
In other words, CSS helps describe the presentation of your web page written in markup languages like HTML, XML, etc. It has a simple mechanism for formatting and modifying the contents of a web page.
Internal CSS
Internal CSS is one of the most widely used CSS forms for changing, styling, and modifying the unique styles of a single web page. You can use the internal CSS by integrating the <style> element in the <head> section of a HTML web page.
Internal CSS can be applied to the whole web page but not on multiple web pages and you can style several web pages by using the same code on every page.
How to Use Internal CSS?
Internal CSS is a way of adding the CSS codes in the <style> element of <head> section of the document.
All the changes done by the internal CSS can be applied only to a single web page. You can use internal CSS for one-page websites or projects where you do not want to use external CSS.
Example:
The example below sets the text color of all the <h1> elements(heading of the page) to yellow, and the text color of all the <p> elements(paragraph of the page) to black. Furthermore, the web page will be displayed with an "aliceblue" background color:
|
<!DOCTYPE html> <html> <head> <style> body {background-color: aliceblue;} h1 {color: yellow;} p {color: black;} </style> </head> <body> <h1>This is a heading of the HTML web page</h1> <p>This is a paragraph for writing the content on the web page.</p> </body> </html> |
Here, we are setting the color of the background to red and the heading to yellow. We also implemented a margin in the heading of the internal CSS style sheet.
|
<!DOCTYPE html> <html> <head> <style> body { background-color: red; } h1 { color: yellow; margin-left: 80px; } </style> </head> <body> <h1>The internal style sheet is applied on this heading of the web page.</h1> <p>This is a paragraph which will not be affected by any changes made in the CSS style sheet.</p> </body> </html> |
Internal CSS is only used for one-page HTML websites. You can add internal CSS to multiple HTML web pages; however, it is not a good practice in website development. Internal CSS is mostly used when creating templates for your web page.
Conclusion
Internal CSS is only beneficial for single-page HTML websites. If you use internal CSS in your HTML web page, you cannot reference this stylesheet to the <link> elements. It can make the modification and changes in a website more complex and challenging.
Internal CSS is not favorable for large projects where you are required to have more than one web page, therefore, the most common way to add CSS, is to keep the styles in external CSS files.
If you want to learn more about Internal CSS and other topics related to Web Development, you can enroll in the Full Stack Web Development Certificate Course offered by Simplilearn.
You can also join Simplilearn’s SkillUp platform for free courses and revolutionize your profession with certificates and specializations. The courses in the Skill Up program are designed to enhance your knowledge and skills and improve your career prospects. For more information on these programs, visit Simplilearn.
