OneBite.Dev - Coding blog in a bite size

use css with html

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

Title: Using CSS with HTML

The combination of CSS and HTML is a cornerstone in the world of web design and development. This article will provide a basic tutorial on how to utilize CSS within an HTML file, simplifying the process for beginners.

Code snippet: The Initial CSS and HTML Setup

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .main-content {
          color: blue;
        }        
    </style>
</head>
<body>
    <div class="main-content">
        Hello, this is main content.
    </div>
</body>
</html>

Code Explanation for the Initial CSS and HTML Setup

The above script denotes a simple webpage written in HTML with an embedded CSS in the head segment.

1.<!DOCTYPE html>: This line is the document type declaration and it lets the browser know the version of HTML the page is written in.

  1. <html>: This is the root element of any HTML file.

In the <head> tag:

  1. <style>: This is CSS’s opening and closing tag, and any CSS you’d like to apply to your webpage should be contained within these tags.

In this case, two CSS styling rules are applied:

  1. body { font-family: Arial, sans-serif; }: This line changes the default font of the webpage to Arial or any sans-serif fonts.

  2. .main-content {color: blue;}: Here, a CSS class named .main-content is created and given a rule to change the text color to blue.

In the <body> tag:

  1. <div class="main-content">: A <div> is a container used to group other HTML elements. By giving it the class name main-content, it now carries the attributes of the .main-content class in the CSS rule - which in this case, turns the text blue.

With these basic steps, you can start to apply and experiment with different CSS styles on your HTML elements. Remember, the key to mastering CSS or any programming language is practice!

css