Here are the different style of Inserting CSS:
There are several ways to insert CSS (Cascading Style Sheets) into an HTML document. Here are the common methods:
1. Inline Styles:
- Inline styles are added directly to individual HTML elements using the
style
attribute.
Pros: Quick and easy for small styling adjustments.
Cons: Can lead to code duplication and reduced maintainability.
2. Internal Styles (Embedded):
- Internal styles are included within the HTML document using the
<style>
tag in the<head>
section.
Pros: Keeps styles in the same document, avoiding additional HTTP requests.
Cons: May still lead to code duplication in larger projects.
3. External Styles (Linked):
- External styles are stored in a separate CSS file and linked to the HTML document using the
<link>
tag.
styles.css:
index.html:
Pros: Promotes code reusability and maintainability.
Cons: Requires an additional HTTP request.
4. Importing External Styles (CSS @import):
- Styles can also be imported into a CSS file using the
@import
rule.
styles.css:
index.html:
Pros: Allows modularization of styles.
Cons: Similar to linking external styles, but with the ability to import multiple stylesheets.
writing comments in CSS
In CSS, you can write comments to provide explanations, documentation, or reminders within your stylesheets. Here’s how you can write comments in CSS:
Single-line Comments:
Single-line comments start with <!--
and end with -->
. Anything between these symbols is treated as a comment and is ignored by the CSS parser.
Multi – line Comments:
Multi-line comments also begin with <!--
and end with
, but they can span multiple lines. You can use multi-line comments for longer explanations or comments that need to be more detailed.-->