Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How do I write CSS within HTML?
Hypertext Markup Language (HTML) is a widely used markup language to create websites. Markup Languages are known for building frameworks or skeleton for a webpage. This framework cannot work entirely on its own and should be designed using CSS (Cascading Style sheets). CSS works on the webpages to make it visually appealing and to customize the website to individual’s needs. The goal of this article is to understand various methods of writing CSS within HTML. Though CSS code and HTML code can be written separately, and linked to each other (External CSS), we’ll talk about the other methods for the purpose of this article.
Methods Used
CSS code can be conveniently composed in a separate file and subsequently linked to the HTML file. However, to integrate and employ the CSS styles within the HTML, there are various approaches available −
Inline CSS
Internal CSS
Combined method
Inline CSS
Inline CSS
Inline CSS involves the utilization of the 'style' attribute directly within HTML elements. It enables swift and personalized styling adjustments for individual elements.
In CSS, styles are determined based on their specificity, which can be expressed as a specificity score. Each method possesses a unique specificity score, and the style with a higher rank is prioritized and displayed on the website. Notably, inline CSS holds the highest specificity score, overriding other styles that may be present.
While inline CSS offers certain advantages, such as its ability to achieve highly specific styling, it also has drawbacks. Managing inline CSS can become cumbersome due to its high specificity and the potential for conflicts with other styles.
Algorithm
Open a HTML file and write the code to print a text.
By using the style attribute in the same line as that of the text, you can change color, background color, font size and text alignment.
To see the changes, save and check.
Example
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Understanding Inline CSS </title> </head> <body> <p style='color: rgb(84, 12, 12);' > Inline CSS is written in the same line as that of the element.</p> </body> </html>
Internal CSS
Internal CSS or Embedded CSS refers to writing CSS code within the head section of the HTML file using the same ‘style’ attribute. It is easy to manage and share the CSS code in this format but the specificity score of this approach is lesser than the Inline code method.
The only difference between external CSS and Internal CSS is that the code is written in a separate file and then linked in external CSS, and the code is written in style tag in the head tag.
Algorithm
Define the style tag, in the head tag.
Define the element class or type and choose the desired color, background color, font- size and text alignment.
Save the file to check the changes.
Example
<html lang="en">
<head>
<style>
h1{
color: black;
font-size: 150%;
}
</style>
</head>
<body>
<h1>Internal CSS is coded in the style tag of head tag.</h1>
</body>
</html>
Combination method
The two methods mentioned above can also be combined to produce desirable outputs, the inline technique can be used to tailor some texts, and the internal approach can serve as a framework for all texts generally. This method is widely used because it offers the best of both worlds and can help in generating ideal output.
Algorithm
Define the style tag, in the head tag.
Define the element class or type and choose the desired color, background color, font- size and text alignment.
Save the file to check the changes.
Example
<html lang="en">
<head>
<style>
h1{
color: black;
}
h2{
color: #1319;
}
p{
color: #1984;
}
</style>
</head>
<body>
<h1>Greetings of the day</h1>
<p>Markup Languages are known for building frameworks or skeleton for a webpage. This framework cannot work entirely on its own and should be designed using Cascading Style sheets. CSS works on the webpages to make it visually appealing and to customize the website to individual’s needs.</p>
<p style="color: rgb(224, 189, 249);"> External CSS is also an option.</p>
</body>
</html>
Conclusion
As discussed in this article, CSS codes can be written using various methods. While choosing the method, individuals should pay attention to their projects’ needs, if it’s a small and easy project or if it's a long and time-consuming project.
Inline ways act as a quick way to style individual elements and customize, but this method can be difficult to manage and tedious. Internal CSS on the other hand is written in a specified position in the style tag and can style many similar types of elements, but this method lacks presentation.
Concludingly, CSS codes should be written keeping in mind the factors like specificity, structure and the needs. By mastering the art of writing CSS within HTML, the process of web development becomes exciting and interesting.
55 Views
