In the world of web development, styling plays a crucial role in enhancing the appeal of the website and the user experience. Cascading style sheet (CSS) provides the means to apply styles to HTML documents in VScode or in any IDE.
There are 3 ways in which a user can add CSS to HTML:
Inline CSS
Internal CSS
External CSS
Inline CSS
CSS styles can be added inside the HTML tags. This is one of the methods used to add CSS to HTML. One disadvantage of this method is that it can lead to confusion, especially when dealing with a high amount of CSS. To address this issue, other methods are implemented.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline CSS Example</title>
</head>
<body style="background-color: #f0f0f0; font-family: Arial, sans-serif;">
<h1 style="color: #333;">Hello, Ticha!</h1>
<p style="font-size: 16px; line-height: 1.5;">This is an example of inline CSS.</p>
</body>
</html>
Internal CSS
CSS styles are added to the HTML file by writing inside the *tags. This method is slightly more efficient and less confusing compared to inline styling. To maintain efficiency with this method, it is advisable to place the * *tags before the * tag, as the compiler reads the code line by line.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline CSS Example</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<!-- Additional HTML content -->
</body>
</html>
External CSS
In this method, we are charged with creating an external stylesheet for the CSS style. This method is less confusing since the CSS file is separated from the HTML with a .css file extension and linked to the HTML using the tag and the tag should be wrapped inside the
HTML file
<!DOCTYPE html>
<html>
<head>
<title>External CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Hello, Ticha!</h2>
</body>
</html>
External CSS file
Note that the external CSS file most have the .css extension at the end of the filename
/* styles.css */
h2 {
color: green;
font-size: 20px;
}
In conclusion, mastering the art of connecting HTML and CSS documents is a fundamental skill for any web developer. Whether you choose inline CSS, external CSS, or leverage tools like Emmet, the goal remains the same: to create well-structured, visually appealing websites.
Keep exploring, keep coding, and keep creating amazing things.
Happy coding!"
Top comments (0)