CSS Box Model in 1 Minute #shorts

Показать описание

If you're new to CSS, or just need a quick refresher on the box model, then this video is for you! In 1 minute, I'll show you everything you need to know about the box model in CSS. In this video, I'm going to show you how to use the CSS box model in 1 minute! This box model tutorial will teach you how to create boxes, apply colors, and format text.

The Box Model is one of the most important concepts in HTML and CSS. Let me show you, in one minute, what the Box Model is, how it works and how to use it.

Music:
Edited for this video to suit the format and length

Рекомендации по теме

Комментарии

I watch these not only for the quick reminders and insights … but for that smooth bass backing track.

JonnyReturns

<div class="hello">
<h1>Hello!</h1>

<style> .hello{
width: 100px;
height: 90px;
text-align: center;
background-color: rgba(3, 84, 69, 0.972);
padding: 5px;
border-top: 10px solid black;
border-bottom: 10px solid rgba(3, 83, 68, 0.972);
border-left: 10px solid rgba(12, 168, 173, 0.44);
border-right: 10px solid rgba(12, 168, 173, 0.44);
border-bottom-left-radius: 41px;
border-top-right-radius: 41px;
margin: 10px;
}

h1{
color: white;
}
</style>

ezekielpeace

Hey Sina I just finished your box model video, it was really great and helpful. Here is my attempt at your challenge :D :
<div>Hello!</div>
<style>
div {
width: 70px;
height: 50px;
background-color: #5A8A7A;
font-size: 25px;
color: #fff;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5% 25% 5% 50%;
border-top: 7px outset #000;
border-right: 7px outset #01C385;
border-bottom: 7px outset #01C385;
border-left: 7px outset #43C9FF;
}
<style>

mosmos