The CSS background-position property is used to set an initial position for a background image relative to the origin.SyntaxThe syntax of CSS background-position property is as follows −Selector {    background-position: /*value*/ }The following examples illustrate CSS background-position property −Example Live Demo div {    margin: 30px;    padding: 100px;    background-image: url("https://www.tutorialspoint.com/images/C-programming.png"), url("https://www.tutorialspoint.com/images/Swift.png"), url("https://www.tutorialspoint.com/images/xamarian.png");    background-repeat: no-repeat;    background-position: 15% 20%, top, right;    border: 1px solid; } OutputThis gives the following output −Example Live Demo p {    margin: 20px;    padding: 80px;    background-image: url("https://www.tutorialspoint.com/images/dbms.png"), url("https://www.tutorialspoint.com/images/Operating-System.png");   ... Read More

The CSS margin property is used to set the margin area around the selected element around its borders. The margin property is a shorthand for margin-top, margin-right, margin-bottom, and margin-left. Let’s say we have set the following margins using the shorthand property − margin: 10px 45px 35px 70px; The above means − 10 pixels for the top margin 45 pixels for the right margin 35 pixels for the bottom margin 70 pixels for the left margin Syntax The syntax of CSS margin property is as follows − Selector { margin: ... Read More

To specify the height and width of an element, use the CSS height and width properties, respectively. We can also set the maximum and minimum values for these properties using the max-height, max-width, min-height, and min-width properties. Syntax The following is the syntax of height and width properties in CSS − Selector { height: /*value*/ width: /*value*/ } Here are the values of the height property − auto − The height is calculated by the web browser length − The height is defined in length units % − The height is ... Read More

CSS plays a key role in font styling. The CSS font properties allow us to change the font-family, font-size, font-weight, font-kerning, and a lot more properties. The CSS font property is a shorthand for font-style, font-variant, font-weight, font-size/line-height and font-family. Further, we can apply styles to the text through text-decoration using CSS text-shadow, text-stroke, text-fill-color, color, etc. color − This property is used to change the color of the text. font-family − This property is used to set the font face for an element. font-kerning − To make the character spacing uniform and increase readability, the font-kerning property is ... Read More

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