به هم ریختگی کد‌های css

با سلام خدمت پشتیبانی محترم سون لرن :

بنده فایل html و css را به صورت جداگانه نوشتم و در حالت عادی به درستی خروجی می‌دهد اما وقتی در تابع خودم اون رو به عنوان یک متغیر include می‌کنم و بعدش با دستورreturn اون متغیر رو فراخوانی می‌کنم کد‌های css ام به هم میریزه متاسفانه در حالی که وقتی کد‌های css رو به فایل html ام لینک می‌کنم به درستی کار می‌کند کد‌ها به این صورت هست :


/*
Plugin Name: LoginPage-Shortcode
Plugin URI: www.google.com
Description: Awesome Design
Version: 1.0.0
Author: Ali-Rezayi
Author URI: https://www.google.com/
Text Domain: LoginPage
*/
function login_page()
{
    $result= include_once "html-css-codes.php";
    return $result;
}
add_shortcode("login","login_page");

در پایین هم محتویات فایل html-css-codes.php رو مشاهده می‌کنید :

<style>
#form
{
    background-color: rgba(36, 33, 33, 0.805);
    border-radius: 20px;
    border-style: solid;
    border-color: yellow;
    border-width: 2px;
    width: 270px;
    height: 300px;
    text-align: center;
    margin-left: 550px;
    padding: 10px;
}
#user
{
    border-radius: 10px;
    margin-top: 80px;
    background-color: gray;
    border-color: yellow;
    border-width: medium;
}
#pass
{
    border-radius: 10px;
    background-color: gray;
    border-color: yellow;
    border-width: medium;
}
#submit
{
    position: absolute;
    top: 0px;
    left: 0px;
    margin-left: 88px;
    background-color: gray;
    border-color: yellow;
    border-radius: 10px;
    border-width: medium;
}
#register
{
    color: rgb(223, 237, 92);
    margin-top: 70px;
}
#title
{
    color: rgb(223, 237, 92);
    font-weight: bold;
    font-size: larger;
}
#First
{
    color: rgb(223, 237, 92);
    margin-right: 10px;
}
#Second
{
    color: rgb(223, 237, 92);
    margin-right: 10px;
}
#Third
{
    margin-right: 210px;
    color: rgb(223, 237, 92);
}
#Fourth
{
    color: rgb(223, 237, 92);
}
.box3
{
    position: relative;
}
style>
<body>
    <br>
    <form action="" method="post" id="form">
        <div id="title">Login Pagediv>
        <div class="box1">
        <label for="user" id="First">Usernamelabel>
        <input type="username" id="user">
        div>
        <br>
        <div class="box2">
        <label for="pass" id="Second">Passwordlabel>
        <input type="password" id="pass">
        div>
        <br>
        <div class="box3">
        <label for="submit" id="Third">Enterlabel>
        <input type="submit" id="submit">
        div>
        <div id="register">Dont have an account ? <a href="www.google.com" id="Fourth">Sign up nowa>div>
    form>
body>

ممنون میشم راهنمایی بفرمایید