CSS Methods
CSS Styling Methods
1. Inline CSS
Inline CSS is used to apply a unique style to a single HTML element. It uses the style attribute within the HTML tag.
Example:
<p style="color: red;">This is inline CSS</p>2. Internal CSS
Internal CSS is used to define styles in a single HTML document. It is placed inside a <style> element in the <head> section of the HTML file.
Example:
<style>
.example {
color: green;
font-weight: bold;
}
</style>3. External CSS
External CSS is used to apply styles to multiple HTML pages. It is linked to an HTML document using the <link> element.
Example:
<link rel="stylesheet" href="styles.css">In the external CSS file styles.css, you can define your styles:
p {
font-size: 16px;
color: blue;
}Example
<html>
<head>
<title>Styling methods in CSS</title>
<!-- External styling -->
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<!-- internal styling -->
<style>
h1#new {
color: red;
background-color: yellow;
}
p.para {
background-color: violet;
}
</style>
<h1 id="new">Styling Methods</h1>
<p class="para">This program is free software; you can redistribute it
and/or modify it under the terms of the GNU General Public License as published
by the Free Software Foundation; either version 3 of the License, or at your
option any later version.</p>
<!-- inline styling -->
<p style="color:green;background-color: lightgreen; font-size:20px;">This
program is free software; you can redistribute it and/or modify it under the terms
of the GNU General Public License as published by the Free Software Foundation;
either version 3 of the License, or at your option any later version.</p>
</body>
</html>
Summary
1. Inline CSS: Styles applied directly to HTML elements.
2. Internal CSS: Styles defined within a <style> element in the HTML document.
3. External CSS: Styles defined in a separate CSS file and linked to the HTML document.