Skip to main content

CSS Tutorial 19

 <!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

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

    <title>Height, width, border and background. </title>

    <style>

        #firstpara {

            background-color: red;

            height: 100px;

            width: 200px;

            border-radius: 11px;

            border: green 3px solid;

        }


        /* border-color: green;

    border-style: solid;  

    border-width: 3px;} */

        #secondpara {

            height: 100px;

            width: 200px;

            background-color: lightcoral;

            border-left: red 3px solid;

            border-right: darkorchid 5px solid;

            border-top: green 8px solid;

            border-bottom: darkblue 2px solid;

            border-top-right-radius: 2px;

            border-top-left-radius: 5px;

            border-bottom-right-radius: 7px;

            border-bottom-left-radius: 11px;

        }


        #thirdpara {

            height: 500px;

            width: 500px;

            background-image: url(RCoder.JPG);

            border: red 2px solid;

            background-repeat: no-repeat;

            background-position: top left;

            /* background-position: center left; */

            /* background-position: bottom right; */

            /* background-position: left left; */

            background-position: center;

        }

    </style>


</head>


<body>

    <h2>This is Heading.</h2>

    <p id="firstpara">This is paragraph.</p>


    <h2>This is Heading.</h2>

    <p id="secondpara">This is paragraph.</p>


    <h2>This is Heading.</h2>

    <p id="thirdpara">This is paragraph.</p>


    <h2>This is Heading.</h2>

    <p id="fourthpara">This is paragraph.</p>


</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

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 displ...
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