HTML is building’s framework, but CSS (Cascading Style Sheets) is the interior design.
It’s turns a plain, text-heavy page into a visually stunning experience.
we have three primary methods to use CSS. Each has its own ideal use cases.
CSS (Cascading Style Sheets) is the style language of the web. While HTML acts as the structural framework or “skeleton” of a website, CSS functions as the interior design. It turns plain, text-heavy code into a visually engaging experience by controlling layouts, colors, fonts, and responsiveness.
When designing a website, there are three primary methods to inject CSS into an HTML document, each serving a distinct purpose.
Types of CSS
1. Inline CSS
Inline CSS is used to apply a unique style directly to a single HTML element. The style rules are written directly inside the HTML tag using the style attribute.
Inside the HTML tag
<p style="color: blue; font-size: 18px;">Hello Friends</p>
Enter fullscreen mode Exit fullscreen mode
2.Internal CSS
Internal CSS is defined within the <head> section of an HTML document, wrapped entirely inside a <style> tag. This method applies styles to the entirety of that single HTML page.
Inside the HTML file:
<head>
<style>
body {
background-color: #f4f4f4;
}
h1 {
color: darkgreen;
text-align: center;
}
</style>
</head>
Enter fullscreen mode Exit fullscreen mode
3.External CSS
External CSS is the best way to style websites. All CSS rules are written in a completely separate file with a .css extension and linked to your HTML files using the <link> tag inside the <head> section.
In style.css:
body {
font-family: Arial, sans-serif;
margin: 0;
}
.hello {
background-color: blue;
color: white;
}
Enter fullscreen mode Exit fullscreen mode
In index.html:
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="hello">Hello Friends</h1>
</body>
Enter fullscreen mode Exit fullscreen mode
답글 남기기