Creating Styled Boxes for Errors, Success, Examples, Notes and Tips | Day 1 | 50 Days of Intermediate HTML + CSS Projects
Tags: html, css, tutorial, beginners
Published: 2022-08-19 21:52:00

##_Creating Styled Boxes for Success, Errors, Notes, Warnings, Examples, and Tips_

---

👉🏻 _Want to make boxes like-_
![GitHub Tip Box](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9u3d6mxjzn8kmkh1uu95.jpg)
This is a box from GitHub

---

**🎯 OBJECTIVE**
Making-

![Styled Box](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7mis35hx0ma3uxfv772w.jpg)
👉🏻 We will make a parent `div` of class `outside`, giving us the background and a child `div` of class `inside` having the content.
👉🏻 We will style it by CSS to get attractive boxes.

---
###🎯 Process 1 <a name="process-1"></a>

###HTML


```
<div class="outside outside-tip">
   <div class="inside inside-tip">
      <div id="head">&#128161; Tip : </div>
         <ul>
             <li>Try this on your own.</li>
             <li>Try playing with the CSS.</li>
         </ul>
    </div>
</div>
```

###CSS

```
body
{
    color: #000000;
    font-size: 19px;
    font-family: 'Nunito Sans', sans-serif;
}
#head
{
    font-weight: 700;
    font-family: 'Chivo', sans-serif;
    font-size: 20px;
    color: #987a00;
}
.outside-tip
{
    border: solid 2px #ffd500;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    line-height: 25px;
    overflow: hidden;
    padding: 15px 60px;
    background-color: rgb(255, 249, 208);
    margin: 60px;
}
```
It will come up as...


![Styled Box for Tip](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6zcdth9unfg1empqzsa9.png)

---

###🎯 Process 2 <a name="process-2"></a>

###HTML

```
    <div class="outside outside-warning">
        <div class="inside inside-warning">
            <div id="head">&#128683; Warning : </div>
               Stay away from frauds..
        </div>
    </div>
```

###CSS

```
body
{
    color: #ff4444;
    font-size: 19px;
    font-family: 'Nunito Sans', sans-serif;
}
#head
{
    font-weight: 700;
    font-family: 'Chivo', sans-serif;
    font-size: 20px;
    color: #ff0a0a;
}
.outside-warning
{
    border: solid 2px #ff4444;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    line-height: 28px;
    overflow: hidden;
    padding: 10px 60px;
    background-color: rgb(255, 235, 235);
    margin: 60px;
}
.inside-warning
{
    border-left: solid 3px #ff4444;
    padding-left: 20px;
}
```
It will come up as...


![Styled Box For Warning](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bla6ugp4e7hbqnspoy89.png)

---

###🎯 Process 3 <a name="process-3"></a>

###HTML

```
    <div class="outside outside-note">
        <div class="inside inside-note">
            <div id="head">Note : </div>
            <ul>
                <li>This is HTML code.</li>
                <li>It is styled by CSS.</li>
            </ul>
        </div>
    </div>
```
###CSS

```
body
{
    color: #000000;
    font-size: 19px;
    font-family: 'Nunito Sans', sans-serif;
}
#head
{
    font-weight: 700;
    font-family: 'Chivo', sans-serif;
    font-size: 20px;
    color: #0078c2;
}
.outside-note
{
    background-color: #f0f7fb;
    border-left: solid 4px #3498db;
    line-height: 25px;
    overflow: hidden;
    padding: 12px;
    margin: 60px;
}
```
It will come up as...


![Styled Box For Note](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qb3yd5w0taqneh9pkunb.png)

---
###Give a Shadow Effect 💡

Give a <u>shadow</u> effect around the boxes to give it a 3D look. Use the css to the parent `div` -

###CSS

```
{
    box-shadow: 0 1px 2px rgba(0,0,0,0.07), 
                0 2px 4px rgba(0,0,0,0.07), 
                0 4px 8px rgba(0,0,0,0.07), 
                0 8px 16px rgba(0,0,0,0.07),
                0 16px 32px rgba(0,0,0,0.07), 
                0 32px 64px rgba(0,0,0,0.07);
}

```
---
###_Colors and their Visual Symbols_ 💡
Keep in mind the _accessibility_ while choosing your colors.

1. _Red_ is used for warnings and to **indicate danger**
2. _Orange_ can be used for **cautions** as well
3. **Notes** can be _blue_
4. **Examples** can be _green_
5. **Tips** can be _yellow_

---

###🎯 _Try these by Yourself_ --

1.
![Styled Box](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oo8wxkrial19n0vrmlrn.png)
2.
![Styled Box](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7mis35hx0ma3uxfv772w.jpg)
3.
![Styled Box](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/szdnsbc0vcy1xsxy4640.png)

---

####📢 Tip of the Day 💡

Want free images and logos for your next project?

Use-
1. [Doodleipsum](https://doodleipsum.com/)
2. [Logoipsum](https://logoipsum.com/)

---

_Check out the whole series!_
_**Share it💚** with someone who may benefit from this_
❤️ Happy Coding!
_**Follow** for more!_