CSS In Class [object Object]

Simple HTML Page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Link this HTML file to an external stylesheet named 'style.css'.
    This stylesheet contains the styling rules that will be applied to the HTML elements. -->
    

    <title>Basic CSS Example</title>
</head>
<body>

    <header>
        <h1>Welcome to CSS Basics</h1>
    </header>
    <nav>
        <!-- Your page can have multiple menus, we are going to use the following items as top menu bar so let's define
             a class to this ul item and add css later
             that is class="top-menu" -->
        <ul class="top-menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <section ><img src="images/img1.jpg" alt="name of the image" style="float:right;height:250px;">
        
        <!-- We want to write some styles for h2, lets update our css file. -->
        <h2>Styling Text</h2>
        <p>Ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ab, tempore incidunt cum nobis, autem repellat repellendus dolorum ullam saepe quas, explicabo ea! Veniam itaque possimus illo repellat ut error.Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam ipsa itaque architecto adipisci culpa nesciunt reprehenderit odio sit natus pariatur voluptate nihil quidem veritatis aliquid, quam ut recusandae, quo consequatur.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aperiam eaque nihil voluptate deserunt architecto sequi voluptates sunt quod odit, atque, tempora eligendi distinctio fugit quaerat ratione. Quae deleniti quisquam mollitia. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid officiis incidunt commodi eum ipsa autem. Ipsum quibusdam sed minima dolore libero sequi corporis ab nobis corrupti, nesciunt soluta nemo veritatis. <strong>This text is bold.</strong> <em>This text is italic.</em></p>
    </section>

    <section >
        <h2>Styling Background</h2>
        <!-- We want to create a colored box with some styles
             let's use class that is class="colored-box" and update
             the css file for this class. -->
        <div >
            <p>This is a colored box with a background.</p>
        </div>
    </section>

    <section >
        <h2>Changing Font</h2>
        <!-- We want to use custom font with some styles
             let's use class that is class="custom-font"" and update
             the css file. -->
        <p>This text uses a custom font.</p>
    </section>

    <footer>
        <p>© 2024 CSS Basics</p>
    </footer>

</body>
</html>

Example: style.css

body {
    font-family: Arial, sans-serif;
    margin: 20;
    padding: 0;
    background-color: rgba(255, 193, 127, 0.299);
}

header {
    background-color: #333;
    color: white;
    padding: 1em;
    margin-bottom: 10px;
}
nav {
    background-color: bisque;
    padding: 1em;
}
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.top-menu li {
    display: inline-block;
    margin-right: 20px;
}

.top-menu a {
    text-decoration: none;
    color: rgb(219, 16, 16);
    font-weight: bold;
}

.top-menu a:hover {
    color: rgb(1, 12, 1);
}

footer {
    background-color: #333;
    color: white;
    padding: 1em;
}

.colored-box {
    background-color: rgb(221, 230, 173);
    padding: 20px;
    border: 1px solid #999;
    border-radius: 8px;
    margin: 10px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: fit-content;
}

.custom-font {
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    text-align: center;
    padding: 10px;
}

dipaish/css24.md

Simple HTML Page

Example: style.css