Borders and Backgrounds in CSS

 <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Height, Width, borders and backgrounds</title>
    <link rel="stylesheet" href="CSS/styleFive.css">
</head>

<body>
    <h3>This is heading</h3>
    <p id="firstPara">This is a paragraph</p>

    <h3>This is second heading</h3>
    <p id="secondPara">This is my second paragraph</p>

    <h3>This is third heading</h3>
    <p id="thirdPara">This is my third paragraph</p>
</body>

</html>




CSS File
#firstPara {
    background-color: red;
    height: 100px;
    width: 455px;
    border: 5px solid green;
    /*This line and below three lines works same*/
    /*border-width: 5px;
    border-color: green;
    border-style: solid;*/
    border-radius: 12px;
}

#secondPara {
    background-color: rgb(58, 243, 98);
    height: 100px;
    width: 455px;
    color: white;
    font-size: 30px;
    border-top: 12px solid rgb(1, 1, 249);
    border-left: 12px solid rgb(76, 0, 13);
    border-right: 12px solid rgb(252, 252, 2);
    border-bottom: 12px solid rgb(1, 248, 248);
    border-top-left-radius: 15px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 40px;
}

#thirdPara {
    height: 250px;
    width: 455px;
    color: black;
    border: 2px solid blue;
    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR132TBAD0-GhGhN8_2Xr-3obkFd4NzFbk6Hg&s");
    background-repeat: no-repeat;
    /* repeat-x and repeat-y will make it repeat on x and y axis */
    /*background-position: 0px top;*/
    /*background-position: top center;*/
    /*background-position: bottom center;*/
    /*background-position: left center;*/
    /*background-position: right center;*/
    background-position: center center;
}



Comments

Post a Comment