CSS Inserting

Keywords

html, css, css inserting, internal style sheet, html css, dataidea, data science, web development, website, css tutorial, external style sheet, inline styling

Photo by DATAIDEA

CSS Inserting

Inserting CSS into an HTML document can be done in several ways:

External CSS

This method involves linking an external CSS file to your HTML document using the <link> element within the <head> section of your HTML file. This is the recommended method for larger projects as it keeps your HTML and CSS separate, making your code more maintainable and easier to manage.

Example:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <!-- Your HTML content here -->
</body>
</html>

In this example, the CSS file styles.css and the HTML file are saved in the same directory/folder

You can try it as well, just follow these steps.

  1. Create a folder in root directory.
  2. Save the HTML file in that folder.
  3. Save the style.css file in that folder.
  4. Run/Open the HTML file using any browser

Internal CSS

With this method, CSS rules are written directly within the <style> element in the <head> section of your HTML document. This is useful for small-scale projects or when you need to apply specific styles to a single page.

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* CSS rules here */
    body {
      background-color: #f0f0f0;
    }
    h1 {
      color: blue;
    }
  </style>
</head>
<body>
  <!-- Your HTML content here -->
</body>
</html>

In this example, CSS rules are defined within the <style> element.

Inline CSS

This method involves applying CSS styles directly to individual HTML elements using the style attribute. While this approach provides the most immediate control over styling, it’s generally considered less maintainable and should be used sparingly.

Example:

<!DOCTYPE html>
<html>
<body>

<h1 style="color: blue;">This is a heading</h1>
<p style="font-size: 16px;">This is a paragraph.</p>

</body>
</html>

In this example, inline styles are applied directly to the <h1> and <p> elements using the style attribute.

Note!

Choose the method that best fits your project’s requirements and development workflow. For larger projects, external CSS files linked via link elements are generally preferred, while smaller projects or quick prototyping may benefit from internal or inline CSS.

To be among the first to hear about future updates of the course materials, simply enter your email below, follow us on (formally Twitter), or subscribe to our YouTube channel.

Back to top