HTML CSS Integration

How to Integrate CSS in HTML?

HTML CSS integration refers to the procedure of combining HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) to create visually appealing and dependent web pages.

HTML provides the structure and content material of a web site, even as CSS defines the presentation and layout of the content.

CSS (Cascading Style Sheets):

CSS is a style sheet language used to define the presentation, layout, and design of HTML documents.

It allows developers to control the appearance of various elements on a webpage, including fonts, colors, margins, padding, positioning, and more.

CSS rules are applied to HTML elements either inline, embedded within the HTML document, or in an external CSS file.

Inline CSS

Inline CSS refers to styling HTML elements directly within the HTML markup using the style attribute.

                          
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML CSS Integration</title>
</head>
<body style="background-color: #f0f0f0; font-family: Arial, sans-serif;">
    <div style="max-width: 800px; margin: 50px auto; padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);">
        <h1 style="color: #333;">Welcome to HTML CSS Integration</h1>
        <p>This is a basic example of HTML and CSS integration.</p>
        <div style="background-color: #f2f2f2; padding: 10px; border: 1px solid #ccc; border-radius: 3px; margin-top: 20px;">
            <p>This is a styled box.</p>
        </div>
    </div>
</body>
</html>

External CSS File

HTML (index.html) file:

In your head tag add this "<link rel="stylesheet" href="styles.css">"

Create a new file called "style.css" that will contains a css file.

                          
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML CSS Integration</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Welcome to HTML CSS Integration</h1>
        <p>This is a basic example of HTML and CSS integration.</p>
        <div class="box">
            <p>This is a styled box.</p>
        </div>
    </div>
</body>
</html>

CSS (styles.css) file:

                          
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 800px;
    margin: 50px auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    color: #333;
}

.box {
    background-color: #f2f2f2;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-top: 20px;
}