Computer scienceFrontendCSSBasic propertiesWorking with Text

Text Alignment

Theory

Photo captions

Report a typo

Imagine that you have to create a small chat. It's almost done, but the chat doesn't look like you'd want it to. Your messages and the messages of the interlocutor are aligned to the left. It is very inconvenient to read this way and it is completely impossible to understand which message was sent to you and which is the one you sent.

List of messages aligned to the left

You need to write property and value to help separate your messages, as is usually done in chats. (The class of your messages is .white. Please do not use the end value to solve this problem.)

List of messaged aligned to both sides

Write HTML and CSS code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>chat</title>
</head>
<body>
<div class="main">
<div class="header_container">
<p class="chat_head">
Hagrid
</p>
</div>
<div class="chat">
<div class="white">Hagrid! there's an owl</div>
<div class="black">Pay him</div>
<div class="white">What?</div>
<div class="black">He wants payin fer deliverin' the paper. Look in the pockets. Give him five Knuts</div>
<div class="white">Knuts?</div>
<div class="black">The little bronze ones.</div>
</div>
</div>
</body>
</html>


Completed 1 of 2
Write at the end of the CSS rules to align the .white element
The code is valid
___

Create a free account to access the full topic