OneBite.Dev - Coding blog in a bite size

include css in html

Code snippet for how to include css in html with sample and detail explanation

Integrating CSS into HTML is a key aspect of web development that enhances the visual appeal and user experience of a website. This article will walk you through the essential steps of joining CSS with HTML in a straightforward and comprehensive manner.

Code Snippet: Including CSS in HTML

There are three main methods for incorporating CSS into HTML: Inline, External, and Internal. Here’s a simple demonstration using each approach:

  1. Inline Style: Here, the CSS code is applied directly to the HTML tags using the ‘style’ attribute.
<p style="color: blue;">This is a paragraph.</p>
  1. Internal (or Embedded) Style: CSS styles are inserted in the ‘head’ section of the HTML document within ‘style’ tags.
<head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>
  1. External Style Sheet: The CSS styles are written separately in a .css file, then linked to the HTML file using the ‘link’ element.
<head>
    <link rel="stylesheet" href="styles.css">
</head>

Given that styles.css contains:

p {
    color: blue;
}

Code Explanation for Including CSS in HTML

  1. Inline Style: The ‘style’ attribute within the ‘p’ tag includes CSS properties. In this case, the color of the paragraph text would be blue.

  2. Internal Style: Within the ‘head’ tag, the ‘style’ tag is used to introduce CSS properties. The paragraph text is specified to appear in blue color. This is applicable to all paragraphs in the document.

  3. External Style Sheet: In this method, a link is made to an external .css file (in the example, ‘styles.css’) using the ‘link’ element. This lets you use the same .css file in multiple HTML documents, which is highly effective for maintaining larger websites. The .css file contains a style rule that turns all paragraph texts blue.

Remember, CSS in HTML helps in enriching your website or web application by providing various styling options. Each method has its advantages and can be chosen based on the project requirement.

css