1. Home
  2. Docs
  3. Web Technology I
  4. Style Sheet Language
  5. Inserting CSS

Inserting CSS

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.
Screenshot 2024 03 04 190221

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.
Screenshot 2024 03 04 190549

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:

Screenshot 2024 03 04 190952

index.html:

Screenshot 2024 03 04 191134

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:

Screenshot 2024 03 04 191327

index.html:

Screenshot 2024 03 04 191456

Pros: Allows modularization of styles.
Cons: Similar to linking external styles, but with the ability to import multiple stylesheets.

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

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 in html

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.

How can we help?

Leave a Reply

Your email address will not be published. Required fields are marked *