Author: master

CSS Margin

Posted on by master

The margin property defines the space around an HTML element. It is possible to use negative values to overlap content.

The values of the margin property are not inherited by the child elements. Remember that the adjacent vertical margins (top and bottom margins) will collapse into each other so that the distance between the blocks is not the sum of the margins, but only the greater of the two margins or the same size as one margin if both are equal.

We have the following properties to set an element margin.

  • The margin specifies a shorthand property for setting the margin properties in one declaration.
  • The margin-bottom specifies the bottom margin of an element.
  • The margin-top specifies the top margin of an element.
  • The margin-left specifies the left margin of an element.
  • The margin-right specifies the right margin of an element.

Example:

<!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>CSS Margin</title>
    <style>
        div {
            border: 2px solid black;
            margin-top: 100px;
            margin-bottom: 100px;
            margin-right: 150px;
            margin-left: 80px;
            background-color: lightblue;
        }
    </style>
</head>
</style>
</head>

<body>
    <h2>CSS Margin </h2>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure blanditiis earum sapiente non dicta consequatur
        nostrum hic maiores alias. Asperiores sunt perferendis illo? Quia ab temporibus quas tempore accusantium vel
        autem nostrum repellat eum adipisci, ullam minima asperiores voluptas corrupti, doloremque laboriosam, aperiam
        eos vero sunt perferendis sint. Vitae, quos!</div>
</body>

</html>

Output:

CSS Outline Offset

Posted on by master

The CSS outline-offset Property sets the amount of space between an outline and the edge or border of an element.

An outline is a line drawn around elements outside the border edge. The space between the element and its outline is transparent. Also, the outline may be non-rectangular. The default value is 0.Example:

Example:

<!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>CSS Outline</title>
    <style>
        p.one {
            border: 1px solid black;
            outline-style: solid;
            outline-color: red;
            outline-width: thin;
        }

        p {
            border: 1px solid black;
            outline-style: solid;
            outline-color: red;
            outline-offset: 15px;
        }
    </style>
</head>
</head>

<body>
    <p>www.learnscripting.org</p>

</body>

</html>

Output:

CSS Outline Shorthand

Posted on by master

CSS Outline – Shorthand property

The outline property is a shorthand property for setting the following individual outline properties:

  • outline-width
  • outline-style (required)
  • outline-color

The outline property is specified as one, two, or three values from the list above. The order of the values does not matter.

Example

<!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>CSS Outline Shorthand</title>
    <style>
        p.one {
            outline: dashed;
        }

        p.two {
            outline: dotted rgb(195, 0, 255);
        }

        p.three {
            outline: 5px solid green;
        }

        p.four {
            outline: thick ridge pink;
        }
    </style>
</head>

<body>
    <p class=one>www.learscripting.org</p>
    <p class=two>www.learscripting.org</p>
    <p class=three>www.learscripting.org</p>
    <p class=four>www.learscripting.org</p>
</body>

</html>

CSS Outline Width

Posted on by master

Example

<!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>CSS Outline</title>
    <style>
        p.one {
          border: 1px solid black;
          outline-style: solid;
          outline-color: red;
          outline-width: thin;
        }
        
        p.two {
          border: 1px solid black;
          outline-style: solid;
          outline-color: red;
          outline-width: medium;
        }
        
        p.three {
          border: 1px solid black;
          outline-style: solid;
          outline-color: red;
          outline-width: thick;
        }
        
        p.four {
          border: 1px solid black;
          outline-style: solid;
          outline-color: red;
          outline-width: 4px;
        }
        </style>
        </head>
</head>
<body>
    <p class=one>www.learscripting.org</p>
    <p class=two>www.learscripting.org</p>
    <p class=three>www.learscripting.org</p>
    <p class=four>www.learscripting.org</p>
</body>
</html>

Output:

CSS Outline

Posted on by master

CSS Outline Properties

An outline is a line drawn around an element – outside the border. This can be use to make an element “stand out”.

The CSS outline properties specify the style, color, and width of an outline.

Outline Style

The outline-style property specifies the style of the outline.

The outline-style property can have one of the following values:

  • dotted – Defines a dotted outline
  • dashed – Defines a dashed outline
  • solid – Defines a solid outline
  • double – Defines a double outline
  • groove – Defines a 3D grooved outline. The effect depends on the outline-color value
  • ridge – Defines a 3D ridged outline. The effect depends on the outline-color value
  • inset – Defines a 3D inset outline. The effect depends on the outline-color value
  • outset – Defines a 3D outset outline. The effect depends on the outline-color value
  • none – Defines no outline
  • hidden – Defines a hidden outline

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {
    border: 1px solid black;
    outline-color:rgb(153, 0, 255);
}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
</style>
</head>
<body>

<h2>The outline-style Property</h2>

<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline</p>
<p class="ridge">A ridge outline</p>
<p class="inset">An inset outline</p>
<p class="outset">An outset outline</p>

</body>
</html>

Output:

CSS Rounded Border

Posted on by master

The border-radius property is used to add rounded borders to an element:

1.Normal border

2. Round border

3. Rounder border

4.Roundest border

Example:

<!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>Border Width</title>
    <style>
        p.one {
            border: 2px solid red;
            border-radius: 5px;
        }

        p.two {
            border: 2px solid rgb(76, 0, 255);
            border-radius: 8px;
        }

        p.three {
            border: 2px solid rgb(0, 255, 34);
            border-radius: 12px;
        }
    </style>
</head>

<body>
    <p class="one">www.learnscripting.org</p>
    <p class="two">www.learnscripting.org</p>
    <p class="three">www.learnscripting.org</p>
</body>

</html>

Output:

CSS Border Shorthand

Posted on by master

To shorten the code, it is also possible to specify all the individual border properties in one property.

The border property is a shorthand property for the following individual border properties:

  • border-width
  • border-style (required)
  • border-color

Example:

<!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>Border Width</title>
    <style>
        p.one {
            border: dotted red;
        }

        p.two {
            border: 15px solid green;
        }

        p.three {
            border: dashed blue;
        }
    </style>
</head>

<body>
    <p class="one">www.learnscripting.org</p>
    <p class="two">www.learnscripting.org</p>
    <p class="three">www.learnscripting.org</p>
</body>

</html>

Output: