Skip to main content

CSS Tutorial 24

 <!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>CSS Display Property</title>

    <style>

        *{

            box-sizing: border-box;

        }

        header {

            margin: auto;

            border: 2px solid firebrick;

            /* width: 30%; */

        }


        img {

            /* display: inline; this is most property display inline, block and inline block */

            /* if you select display inline so...... you do not set width but */

            /* you select display block than you set box/items width */

            display: block;

            margin: auto;

            width: 50px;

        }


        h3 {

            font-family: cursive;

            margin: 0px;

            text-align: center;

        }


        .box {

            border: 2px solid seagreen;

            margin: 7px;

            padding: 10px;

            width: 30%;

            background-color: tan;

            box-sizing: border-box;

            text-align: center;

            display: inline-block;

        }

    </style>

</head>


<body>

    <header>

        <img src="RCoder.JPG" alt="">

        <h3>This is Header's H3</h3>

    </header>


    <div class="cont">


        <div class="box">

            <h4>Heading</h4>

            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo illo, dolores nulla quod deleniti

                iusto

                voluptates sit, consequuntur dignissimos sint alias maiores fugiat voluptatibus, beatae esse

                reiciendis

                deserunt omnis architecto consectetur. Provident repellat dolore delectus. Nostrum, suscipit ipsam

                praesentium voluptate blanditiis sit iusto consequatur corrupti? Odit quae vero est facilis!</p>

        </div>



        <div class="box">

            <h4>Heading</h4>

            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo illo, dolores nulla quod deleniti

                iusto

                voluptates sit, consequuntur dignissimos sint alias maiores fugiat voluptatibus, beatae esse reiciendis

                deserunt omnis architecto consectetur. Provident repellat dolore delectus. Nostrum, suscipit ipsam

                praesentium voluptate blanditiis sit iusto consequatur corrupti? Odit quae vero est facilis!</p>

        </div>


        <div class="box">

            <h4>Heading</h4>

            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo illo, dolores nulla quod deleniti

                iusto

                voluptates sit, consequuntur dignissimos sint alias maiores fugiat voluptatibus, beatae esse reiciendis

                deserunt omnis architecto consectetur. Provident repellat dolore delectus. Nostrum, suscipit ipsam

                praesentium voluptate blanditiis sit iusto consequatur corrupti? Odit quae vero est facilis!</p>

        </div>

        <div class="box">

            <h4>Heading</h4>

            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo illo, dolores nulla quod deleniti

                iusto

                voluptates sit, consequuntur dignissimos sint alias maiores fugiat voluptatibus, beatae esse reiciendis

                deserunt omnis architecto consectetur. Provident repellat dolore delectus. Nostrum, suscipit ipsam

                praesentium voluptate blanditiis sit iusto consequatur corrupti? Odit quae vero est facilis!</p>

        </div>

        <div class="box">

            <h4>Heading</h4>

            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo illo, dolores nulla quod deleniti

                iusto

                voluptates sit, consequuntur dignissimos sint alias maiores fugiat voluptatibus, beatae esse reiciendis

                deserunt omnis architecto consectetur. Provident repellat dolore delectus. Nostrum, suscipit ipsam

                praesentium voluptate blanditiis sit iusto consequatur corrupti? Odit quae vero est facilis!</p>

        </div>

        <div class="box">

            <h4>Heading</h4>

            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo illo, dolores nulla quod deleniti

                iusto

                voluptates sit, consequuntur dignissimos sint alias maiores fugiat voluptatibus, beatae esse reiciendis

                deserunt omnis architecto consectetur. Provident repellat dolore delectus. Nostrum, suscipit ipsam

                praesentium voluptate blanditiis sit iusto consequatur corrupti? Odit quae vero est facilis!</p>

        </div>

    </div>

</body>


</html>

Labels:

Comments

Post a Comment

Popular posts from this blog

HTML Tutorial 9

 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Inline & Block Elements</title> </head> <body>      </body> </html>
Post a Comment
Read more

HTML Tutorial 5

 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Heading Paragraphs and Emmet</title> </head> <body> <h1>Heading 1 for Rajendra </h1>     <h2>Heading 2 for Rajendra </h2>     <h3>Heading 3 for Rajendra </h3>    <!-- if you need some example world so you use loram12 for 12 words --> <p> • Incompatible: the chosen fixed size may be too large for a user's available live space, causing the user to scroll in order to view the whole page; a fixedWeb page may also appear too small, leaving unsightly blank spaces.     <!-- <br> tag use for a line break or line change and it is self closing tags -->     <br>• Totalitarian: the Web does not want to run the risk of being under too mu...
Post a Comment
Read more