We can define positioning of an element in CSS as relative which renders the element normally. Elements with positioning method as relative are positioned by CSS Positioning properties (left, right, top and bottom).ExampleLet’s see an example for CSS Relative Positioning Method − Live Demo p {    margin: 0; } div:first-child {    position: relative;    top:20px;    background-color: orange;    text-align: center; } PostgreSQL PostgreSQL is a powerful, open source object-relational database system. It has more than 15 years of active development................. OutputFollowing is the output for the above code −ExampleLet’s see ... Read More

The CSS Display property with value inline-block renders an element according to content’s width or provided width whichever is greater, it does not force a line break until parent element’s width is fully utilized. The inline-block displays an element as an inline-level block container. The element itself is formatted as an inline element, but height and width values can be applied Syntax The following is the syntax of CSS display inline-block − Selector { display: inline-block; } Inline Block in div In this example, we have set inline block for our div − .child{ ... Read More

We can remove the default behavior of hyperlinks which is to show a dotted outline around themselves when active or focused by declaring CSS outline property on active/focused links to be none.Solutiona, a:active, a:focus {    outline: none; }ExampleLet’s see how to remove dotted line around active links with an example − Live Demo Remove dotted line around links using css div {    color: #000;    padding:20px;    background-image: linear-gradient(135deg, #dc3545 0%, #9599E2 100%);    text-align: center; } a, a:active, a:focus {    outline: none; } HTML Links Demo Go To Google ... Read More

The outline shorthand property can be defined to draw a line of specific style (required), thickness, and color around the borders of the element, but the outline is not a part of element’s dimensions unlike border property. Syntax The syntax of CSS outline Shorthand property is as follows − Selector { outline: /*value*/ } The value above can be − outline-width outline-style outline-color Outline property with style and color Let’s see an example of the outline Shorthand property. We have set the outline style with color − outline: groove black; Example ... Read More

The outline-color property can be defined to draw a line of a specific color around the borders of the element, but the outline is not a part of element’s dimensions unlike border property. Syntax The syntax of CSS outline-color property is as follows − Selector { outline-color: /*value*/ } The value can be a − Color RGB RGBA HSL HSLA NOTE − The outline-style property needs to be defined before declaring outline-color. Example Let’s see an example for the outline-color property. Here, we have set the outline color for the − ... Read More

We can define positioning of an element in CSS as static which does not renders the element in any special way, but in a normal way. Elements with positioning as static are not affected by any of the CSS Positioning properties (left, right, top and bottom).ExampleLet’s see an example of CSS Static Positioning Method − Live Demo p {    margin: 0; } div:first-child {    position: static;    background-color: orange;    text-align: center; } Demo text This is demo text wherein we are displaying an example for static positioning. OutputFollowing is the ... Read More

CSS visibility property is used to specify a value corresponding to whether the element will be visible or not in the document. Though the element is rendered but if CSS Visibility is set to hidden then it is not made visible. The following are the CSS Visibility values used to control the element’s visibility − Sr.No Value & Description 1 VisibleIt is default, element and its children are visible 2 hiddenIt hides the element and its children are invisible, but element is still rendered and given appropriate space on the page 3 ... Read More

We can hide or remove an element in a HTML document with CSS Visibility and CSS Display properties respectively. To the user, there might not seem any difference in using any of the two properties, but there is.CSS Display − none does not render the element on the document and thus not allocating it any space.CSS Visibility − hidden does renders the element on the document and even the space is allocated but it is not made visible to the user.ExampleLet’s see an example for CSS Display none − Live Demo CSS Display None form {    width:70%; ... Read More

CSS Display None helps developer to hide the element with display property set to none. For element whose display is set to none no boxes are generated for it and even its child elements which might have display set to values other than none.SyntaxFollowing is the syntax for CSS display none −Selector {    display: none; }ExampleLet’s see an example of CSS display none − Live Demo CSS Display None form {    width:70%;    margin: 0 auto;       text-align: center; } * {    padding: 2px;    margin:5px;    box-sizing: border-box; } input[type="button"] {   ... Read More

The CSS Display property with value block renders an element with parent’s full width available, it also forces a line break. An element with display as block renders as a or element. Let us see the syntax with some examples for the display block. Syntax The following is the syntax of CSS display block − Selector { display: block; } Display block Let’s see an example of CSS display block. The display block displays an element as a block element − em{ background-color: #C303C3; color: #fff; ... Read More