CSS

CSS Display

Posted on by master

Every HTML element is represented by a box that contains content and determines the amount of spacing around the content. The CSS display property specifies how this box appears on the web page relative to other elements, as well as the behavior of its child elements (i.e. the elements inside it).

In CSS there are two “levels” this box can adopt: block and inline. Block-level elements exist on their own line and span the entire width of the page unless another width is specified. <div> and <p> are examples of block-level elements.

Inline-level elements do not break the flow of content — multiple inline elements can exist on the same line. <span>, <b>, and <a> are inline-level elements.

The display property targets these levels and lets us change them for our styling needs. A display rule is written like so:

display: value;

…where value specifies the way the element appears — in other words, its level.

Property values:

ValueDescription
inlineIt is used to displays an element as an inline element.
blockIt is used to displays an element as a block element
contentsIt is used to disappear the container.
flexIt is used to display an element as a block-level flex container.
gridIt is used to display an element as a block-level grid container.
inline-blockIt is used to display an element as an inline-level block container.
inline-flexIt is used to display an element as an inline-level flex container.
inline-gridIt is used to display an element as an inline-level grid container.
inline-tableIt is used to display an inline-level table
list-itemIt is used to display all the elements in <li> element.
run-inIt is used to display an element inline or block level, depending on the context.
tableIt is used to set the behavior as <table> for all elements.
table-captionIt is used to set the behavior as <caption> for all elements.
table-column-groupIt is used to set the behavior as <column> for all elements.
table-header-groupIt is used to set the behavior as <header> for all elements.
table-footer-groupIt is used to set the behavior as <footer> for all elements.
table-row-groupIt is used to set the behavior as <row> for all elements.
table-cellIt is used to set the behavior as <td> for all elements.
table-columnIt is used to set the behavior as <col> for all elements.
table-rowIt is used to set the behavior as <tr> for all elements.
noneIt is used to remove the element.
initialIt is used to set the default value.
inheritIt is used to inherit the property from it’s parents’ elements.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {color: red;}

p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
</style>
</head>
<body>
<h1>The display Property</h1>

<h2>display: none:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex1">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

<h2>display: inline:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex2">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

<h2>display: block:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex3">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

<h2>display: inline-block:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex4">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

</body>
</html>

Output:

CSS Dimension

Posted on by master

All HTML elements in a box model are represented as rectangular boxes. The dimensions of the box model are calculated by using the height and width of the content area that gets applied to the element.

Each box is associated with a content area and many optional areas, such as padding, border, and margin.

We have the following properties that allow you to control the dimensions of a box.

  • The height property is used to set the height of a box.
  • The width property is used to set the width of a box.
  • The line-height property is used to set the height of a line of text.
  • The max-height property is used to set a maximum height that a box can be.
  • The min-height property is used to set the minimum height that a box can be.
  • The max-width property is used to set the maximum width that a box can be.
  • The min-width property is used to set the minimum width that a box can be.

Example of CSS Height and Width:

<!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 Dimension</title>
    <style>
        div {
            height: 200px;
            width: 50%;
            background-color: powderblue;
        }
    </style>
</head>

<body>
    <h2>Set the height and width of an element</h2>

    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, animi.</div>
</body>

</html>

Output:

Example of CSS Max-Width:

<!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 Dimension</title>
    <style>
        div {
            height: 200px;
            width: 500px;
            background-color: powderblue;
        }
    </style>
</head>

<body>
    <h2>Set the max width of an element</h2>

    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, animi.</div>
</body>

</html>

Output:

CSS Padding

Posted on by master

Padding is used to create space around an element’s content, inside of any defined borders.

CSS has properties for specifying the padding for each side of an element:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

All the padding properties can have the following values:

  • length – specifies a padding in px, pt, cm, etc.
  • % – specifies a padding in % of the width of the containing element
  • inherit – specifies that the padding should be inherited from the parent 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 Padding</title>
    <style>
        p {
            background-color: rgb(153, 206, 28);
        }

        p.padding {
            padding-top: 50px;
            padding-right: 100px;
            padding-bottom: 150px;
            padding-left: 200px;
        }
    </style>
</head>

<body>
    <p>This is a paragraph with no specified padding.</p>
    <p class="padding">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, accusamus?</p>
</body>

</html>

Output:

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: