OneBite.Dev - Coding blog in a bite size

embed css in html

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

CSS, or Cascading Style Sheets, is a design language that gives your HTML elements style properties like color, font, size, and more. Understanding how to embed CSS in HTML is essential for everyone who works with web development.

Code Snippet: Embedding CSS in HTML

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
        background-color: lightblue;
    }
    h1 {
        color: navy;
        margin-left: 20px;
    }
  </style>
</head>
<body>
  <h1>Introduction to CSS</h1>
  <p>CSS stands for Cascading Style Sheets...</p>
</body>
</html>

Code Explanation for Embedding CSS in HTML

This simple code snippet demonstrates how to embed CSS directly into an HTML file. Remember that CSS is used to design or add styles to your web pages.

  1. The HTML <!DOCTYPE html> declaration helps with browser compatibility. It’s not a tag, but it helps your page render correctly.

  2. The html tags include everything about your website, from the structure to the presentation.

  3. The head tag contains meta-information about your document. This is also where the style tag should be placed when embedding CSS.

  4. Within the head tag, there’s a style tag. This is where we place our CSS code when we’re embedding it directly into an HTML document.

  5. The body tag includes everything that displays on your website like headings, paragraphs, images, hyperlinks, tables, lists, etc.

  6. The CSS rules are defined inside the style tag: The body rule sets the background-color to light blue, while the h1 rule sets the text color to navy and the margin to the left side to 20 pixels.

Now you have changed the whole background color for your website to light blue and your h1 headings to navy with a left margin of 20 pixels. This is just a straightforward example of embedding CSS in HTML; once you become more comfortable with it, you can start creating more elaborate styles.

css