Scribd
Upload
4 views

css file

The document provides a CSS stylesheet for a chat application interface. It includes styles for the body, chat container, header, chat box, messages, and input area, ensuring a responsive and visually appealing layout. Key features include a flexbox layout, color schemes for sent and received messages, and user-friendly input fields.

Uploaded by

priyankarsarkar172
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
4 views

css file

The document provides a CSS stylesheet for a chat application interface. It includes styles for the body, chat container, header, chat box, messages, and input area, ensuring a responsive and visually appealing layout. Key features include a flexbox layout, color schemes for sent and received messages, and user-friendly input fields.

Uploaded by

priyankarsarkar172
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
You are on page 1/ 3

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background-color: #f0f0f0;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

.chat-container {

width: 100%;

max-width: 400px;

background: white;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

border-radius: 10px;

overflow: hidden;

.chat-header {

background: #007bff;

color: white;

text-align: center;

padding: 15px;

font-size: 18px;

font-weight: bold;
}

.chat-box {

height: 400px;

overflow-y: auto;

padding: 10px;

background: #f9f9f9;

.message {

margin: 10px 0;

padding: 10px;

border-radius: 8px;

max-width: 80%;

.message.sent {

background: #007bff;

color: white;

margin-left: auto;

.message.received {

background: #e0e0e0;

color: black;

margin-right: auto;

}
.chat-input {

display: flex;

padding: 10px;

background: #fff;

border-top: 1px solid #ccc;

.chat-input input {

flex: 1;

padding: 10px;

border: 1px solid #ccc;

border-radius: 5px;

margin-right: 10px;

.chat-input button {

background: #007bff;

color: white;

border: none;

padding: 10px;

border-radius: 5px;

cursor: pointer;

You might also like