OneBite.Dev - Coding blog in a bite size

add css in html

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

Title: Adding CSS in HTML - A Simple Guide

Introduction:

Cascading Style Sheets, or CSS, is a fantastic tool designed to help adorn your HTML web pages. Used effectively, it can make your site visually stunning, user-friendly, and highly accessible. This article provides simple steps and a code snippet to integrate CSS into your HTML document.

Code snippet - CSS in HTML

HTML:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: blue;
}

p {
  color: darkblue;
}
</style>
</head>
<body>

<h1>Welcome to My Homepage</h1>
<p>A short paragraph to welcome viewers to the site.</p>

</body>
</html>

Code Explanation for CSS in HTML

This tutorial piece displays simple CSS code embedded in an HTML document. It starts with an HTML5 declaration (<!DOCTYPE html>) followed by the HTML opening (<html>).

Next, the ‘head’ section containing the ‘style’ tag, encapsulates all the CSS properties inserted. In this instance, we’re altering the appearance of three elements: the body of the document, a level one heading (h1), and a paragraph (p).

The CSS within the style tags indicates that:

  • The ‘body’ will be shown in a ‘linen’ background color.
  • The ‘h1’ heading will display in a ‘blue’ color.
  • The ‘p’ (paragraph) will display in a ‘darkblue’ color.

Following the ‘style’ tag, the body of the HTML document is outlined. Inside, there is an ‘h1’ heading and a ‘p’ text employed for illustration purposes to show how the described CSS rules are applied. The final closing tag for <html> signifies the end of the document.

Overall, this example is a basic demonstration of how you may use CSS to modify the style of your HTML elements. With more complex combinations, CSS allows an extensive range of styling possibilities to spruce up your website’s design!

css