DEV Community: AKSH DESAI

CSS Border-Radius Tutorial

AKSH DESAI — Sun, 19 Mar 2023 05:10:43 +0000

Code

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box - Radius</title>

    <style>
    #box {
      border: 2px solid blue;
      width: 400px;
      /* padding: 25px; */
      /* border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px; */

      /* border-radius: 30px 100px; */

      border-radius: 100%;
    }

    #circle {
      border: 2px solid brown;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background-color: blueviolet;
      outline: 3px solid blue;
      outline-offset: 8px;
    }
  </style>
  </head>

  <body>
    <h1> Yahoo Baba Box Radius </h1>

    <div id="box">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur eaque
      iusto soluta esse quis omnis? Debitis a fugit dicta natus.
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur eaque
      iusto soluta esse quis omnis? Debitis a fugit dicta natus.
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur eaque
      iusto soluta esse quis omnis? Debitis a fugit dicta natus.
    </div>

    <div id="circle">

    </div>
  </body>

  <script>
  let circle = document.getElementById("circle");
  circle.contentEditable = true;
</script>
</html>

Output

Thank You.
You can follow us on:
Youtube
Instagram

CSS Overflow Tutorial

AKSH DESAI — Sun, 19 Mar 2023 05:07:36 +0000

Code

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> Overflow </title>

  <style>
    #box {
      border: 1px solid red;
      width: 500px;
      height: 500px;
      /* overflow: hidden; */
      overflow: auto;
    }

    img {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>

  <h1> Yahoo Baba CSS Overflow </h1>

  <div id="box">

    <img src="/11/aksh.jpg" alt="">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae, dicta! Consectetur laudantium rerum quod nam, ullam adipisci fuga vero incidunt repudiandae ratione totam officiis molestias fugiat minima illo voluptatem itaque voluptate accusamus sequi id, recusandae deserunt. Asperiores aperiam aut iusto1.
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae, dicta! Consectetur laudantium rerum quod nam, ullam adipisci fuga vero incidunt repudiandae ratione totam officiis molestias fugiat minima illo voluptatem itaque voluptate accusamus sequi id, recusandae deserunt. Asperiores aperiam aut iusto2.
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae, dicta! Consectetur laudantium rerum quod nam, ullam adipisci fuga vero incidunt repudiandae ratione totam officiis molestias fugiat minima illo voluptatem itaque voluptate accusamus sequi id, recusandae deserunt. Asperiores aperiam aut iusto3.
  </div>
</body>

</html>

Output

Thank You.
You can follow us on:
Youtube
Instagram

CSS Box-Sizing Tutorial

AKSH DESAI — Sun, 19 Mar 2023 05:05:03 +0000

Code

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Box - Sizing </title>

  <style>
    #box {
      border: 10px solid red;
      width: 500px;
      padding: 350px;
      box-sizing: border-box;
    }
  </style>
</head>

<body>

  <h1> Yahoo Baba Box-Sizing</h1>

  <div id="box">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut saepe debitis quasi incidunt rerum quibusdam odit quam, recusandae dolores expedita, vel dignissimos sunt delectus commodi laboriosam accusamus. Porro, fuga sed!ld ll
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut saepe debitis quasi incidunt rerum quibusdam odit quam, recusandae dolores expedita, vel dignissimos sunt delectus commodi laboriosam accusamus. Porro, fuga sed!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut saepe debitis quasi incidunt rerum quibusdam odit quam, recusandae dolores expedita, vel dignissimos sunt delectus commodi laboriosam accusamus. Porro, fuga sed!ld ll
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut saepe debitis quasi incidunt rerum quibusdam odit quam, recusandae dolores expedita, vel dignissimos sunt delectus commodi laboriosam accusamus. Porro, fuga sed!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut saepe debitis quasi incidunt rerum quibusdam odit quam, recusandae dolores expedita, vel dignissimos sunt delectus commodi laboriosam accusamus. Porro, fuga sed!ld ll
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut saepe debitis quasi incidunt rerum quibusdam odit quam, recusandae dolores expedita, vel dignissimos sunt delectus commodi laboriosam accusamus. Porro, fuga sed!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut saepe debitis quasi incidunt rerum quibusdam odit quam, recusandae dolores expedita, vel dignissimos sunt delectus commodi laboriosam accusamus. Porro, fuga sed!ld ll
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut saepe debitis quasi incidunt rerum quibusdam odit quam, recusandae dolores expedita, vel dignissimos sunt delectus commodi laboriosam accusamus. Porro, fuga sed!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut saepe debitis quasi incidunt rerum quibusdam odit quam, recusandae dolores expedita, vel dignissimos sunt delectus commodi laboriosam accusamus. Porro, fuga sed!
  </div>
</body>

</html>

Output

Thank You.
You can follow us on:
Youtube
Instagram

CSS Min-Width & Max-Width Tutorial

AKSH DESAI — Sun, 19 Mar 2023 05:03:22 +0000

Code

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    #first {
      border: 3px solid;
      min-width: 600px;
      max-width: 800px;
    }


    img {
      width: 100%;
    }
  </style>
</head>

<body>
  <h1> Yahoo Baba Css Min-Width and Max-Width</h1>

  <div id="first">

    <img src="/11/aksh.jpg" alt="">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis soluta animi quisquam, quia quos voluptas perferendis labore, totam ipsum illo similique repellendus harum ipsam. Voluptas odio alias voluptatibus reprehenderit libero.
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis soluta animi quisquam, quia quos voluptas perferendis labore, totam ipsum illo similique repellendus harum ipsam. Voluptas odio alias voluptatibus reprehenderit libero.
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis soluta animi quisquam, quia quos voluptas perferendis labore, totam ipsum illo similique repellendus harum ipsam. Voluptas odio alias voluptatibus reprehenderit libero.
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis soluta animi quisquam, quia quos voluptas perferendis labore, totam ipsum illo similique repellendus harum ipsam. Voluptas odio alias voluptatibus reprehenderit libero.
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis soluta animi quisquam, quia quos voluptas perferendis labore, totam ipsum illo similique repellendus harum ipsam. Voluptas odio alias voluptatibus reprehenderit libero.
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis soluta animi quisquam, quia quos voluptas perferendis labore, totam ipsum illo similique repellendus harum ipsam. Voluptas odio alias voluptatibus reprehenderit libero.
  </div>
</body>

</html>

Output

Thank You.
You can follow us on:
Youtube
Instagram

CSS Min-height & Max-height Tutorial

AKSH DESAI — Thu, 16 Mar 2023 11:50:19 +0000

10. Code

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Min Height and Max Height</title>

  <style>
    #first {
      width: 700px;
      min-height: 100px;
      max-height: 200px;
      border: 2px solid red;
    }
  </style>
</head>

<body>

  <h1> Yahoo Baba. CSS Min-Height and Max-Height </h1>

  <div id="first">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero quasi quod numquam veritatis sequi facilis aperiam ipsam ea quia maxime?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero quasi quod numquam veritatis sequi facilis aperiam ipsam ea quia maxime?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero quasi quod numquam veritatis sequi facilis aperiam ipsam ea quia maxime?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero quasi quod numquam veritatis sequi facilis aperiam ipsam ea quia maxime?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero quasi quod numquam veritatis sequi facilis aperiam ipsam ea quia maxime?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero quasi quod numquam veritatis sequi facilis aperiam ipsam ea quia maxime?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero quasi quod numquam veritatis sequi facilis aperiam ipsam ea quia maxime?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero quasi quod numquam veritatis sequi facilis aperiam ipsam ea quia maxime?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero quasi quod numquam veritatis sequi facilis aperiam ipsam ea quia maxime?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero quasi quod numquam veritatis sequi facilis aperiam ipsam ea quia maxime?
  </div>
</body>

<script>
  document.getElementById("first").contentEditable = 'true'
</script>

</html>

Output

Thank You.
You can follow us on:
Youtube
Instagram

CSS Height & Width

AKSH DESAI — Thu, 16 Mar 2023 11:48:06 +0000

9. Code

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    #first {
      border: 3px solid blue;
      width: 700px;
      height: 100px;
    }
  </style>
</head>

<body>
  <h1> Yahoo Baba CSS Width and Height </h1>

  <div id="first">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti excepturi unde culpa laudantium tempore ad tempora distinctio quibusdam reprehenderit eius.
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti excepturi unde culpa laudantium tempore ad tempora distinctio quibusdam reprehenderit eius.
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti excepturi unde culpa laudantium tempore ad tempora distinctio quibusdam reprehenderit eius.
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti excepturi unde culpa laudantium tempore ad tempora distinctio quibusdam reprehenderit eius.
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti excepturi unde culpa laudantium tempore ad tempora distinctio quibusdam reprehenderit eius.
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti excepturi unde culpa laudantium tempore ad tempora distinctio quibusdam reprehenderit eius.
  </div>
</body>

</html>

Output

Thank You.
You can follow us on:
Youtube
Instagram

CSS Margin Tutorial

AKSH DESAI — Thu, 16 Mar 2023 11:45:52 +0000

Code

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    h1 {
      margin: 50px auto;
      border: 3px solid red;
      width: 450px;
      text-align: center;
    }

    #first {
      border: 1px solid black;
      margin-bottom: 30px;
    }

    #second {
      border: 2px solid red;
      margin: 30px 200px 10px 300px;
    }
  </style>
</head>

<body>
  <h1> Yahoo Baba CSS Margin </h1>

  <div id="first">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem est tempora sed provident vitae soluta accusantium eveniet laborum, voluptates similique quas molestiae ullam natus nobis porro iste? Quam, a ratione.
  </div>

  <div id="second">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos consectetur inventore suscipit voluptas qui, magnam aliquam, unde ab et alias natus sed nobis, saepe voluptates. Doloremque facilis fugiat hic incidunt!
  </div>

  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum molestiae perspiciatis eos possimus quis consequuntur temporibus tenetur soluta totam itaque!
</body>

</html>

Output

Thank You.
You can follow us on:
Youtube
Instagram

CSS Padding Tutorial

AKSH DESAI — Thu, 16 Mar 2023 09:26:37 +0000

7. Code

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .test {
      border: 2px solid black;
      padding: 10px;
      margin: 10px;
    }
  </style>
</head>

<body>
  <h1> Yahoo Baba CSS Padding </h1>

  <div class="test">
    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti illo assumenda aspernatur quae quidem, veniam modi voluptatibus, nemo cum qui dolorem quos nulla. Deserunt autem reprehenderit minima animi, quasi eligendi. </p>
  </div>
</body>

</html>

Output

Thank You.
You can follow us on:
Youtube
Instagram

CSS Outline

AKSH DESAI — Thu, 16 Mar 2023 09:23:29 +0000

6. Code

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      color: white;
      background-color: rgb(41, 40, 40);
      margin: 0;
      font-size: 50px;
    }

    p {
      border: 3px solid red;
      outline: 5px double green;
      outline-offset: 3px;
    }
  </style>
</head>


<body>
  <h1> Yahoo Baba Css Outline </h1>

  <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Possimus, facilis. </p>

  <br>
  <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad, magni. </p>
</body>

</html>

Output

Thank You.
You can follow us on:
Youtube
Instagram

CSS Border

AKSH DESAI — Thu, 16 Mar 2023 09:21:00 +0000

5. Code

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
    * {
      /* border: solid blue; */
      /* margin: 0; */
    }

    h1 {
      border-width: 10px;
      border-style: outset double double groove;
      border-color: purple;

      border-block: 3px solid red;
      border-block-end: 4px solid white;
    }
  </style>
  </head>

  <body>
    <h1> Yahoo Baba Css Color</h1>

    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, nemo?
    </p>

    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, nemo?
    </p>
  </body>

</html>

Output

Thank You.
You can follow us on:
Youtube
Instagram

CSS Basic Selectors

AKSH DESAI — Thu, 16 Mar 2023 09:18:27 +0000

4. Code

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .aksh span {
      font-size: 30px;
      color: green;
    }

    ul#rudra li {
      color: purple;
    }
  </style>
</head>

<body>
  <h1> Hello World </h1>

  <div class="aksh"> <span> hi </span> Hello World </div>

  <h1> Hello World </h1>

  <div class="aksh"> Hello World </div>

  <ul>
    <li>1</li>
    <li>2</li>
  </ul>

  <ul id="rudra">
    <li>1</li>
    <li>2</li>
  </ul>

</body>

</html>

Output

Thank You.
You can follow us on:
Youtube
Instagram

CSS Color & Background Color

AKSH DESAI — Thu, 16 Mar 2023 09:14:55 +0000

3 - Code

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1 style="color: rgb(234, 226, 226); background-color: pink;"> Web Development </h1>

  <p style="color: rgb(209, 195, 195); background-color: blue;"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore veniam maxime laboriosam similique laudantium aut! Fugiat quia ullam sapiente quos <span style="background-color: red;"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, nisi. </span> cupiditate consequatur laudantium quas, doloremque inventore, officiis aperiam exercitationem blanditiis ab! Facilis adipisci libero dolores quidem autem vitae natus ea vero cupiditate amet magni ipsum dolorum eum accusantium veritatis nam, culpa voluptatum in saepe aspernatur laudantium? At tempora fugiat in odio dignissimos eum accusamus voluptates consequuntur aliquam odit beatae, exercitationem quidem, reiciendis officia minus delectus, similique atque quis. Reprehenderit laborum nihil doloribus eius alias laboriosam optio repellendus voluptas, dolores exercitationem officia, error dolorem. Qui recusandae adipisci minus excepturi, fugit repudiandae.</p>

  <p style="color: rgb(220, 201, 201); background-color: red;"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, ullam nesciunt! Eius magnam quod assumenda consequuntur cupiditate quam rem omnis vitae illo, aut porro aperiam odio veniam voluptatum ipsa eaque praesentium libero amet minus vel reiciendis dignissimos! Sunt, odit at. Deserunt voluptates perferendis, ratione, repellat amet earum sequi consequatur excepturi voluptatem laboriosam nostrum. Nobis debitis temporibus ad nihil vero sapiente quasi tenetur cumque laudantium consectetur inventore sequi fugiat numquam quisquam eaque culpa ut illo omnis incidunt blanditiis, nemo pariatur. Eos nisi explicabo natus laboriosam sequi fugit, repellat eum totam quo rerum voluptatum, quas, commodi eius. Ipsa, placeat? Adipisci, nam repellendus. </p>


</body>

</html>

Output

Thank You.
You can follow us on:
Youtube
Instagram