Front End Technology Articles - Page 597 of 745

The margin property defines the space around an HTML element. It is possible to use negative values to overlap content. It specifies a shorthand property for setting the margin properties in one declaration.ExampleYou can try to run the following code to set margins −                            All four margins will be 20px                      Top margin will be 15px, left and right margin will be 4% of the total width of the document, bottom margin will be -10px          

The :visited pseudo-class is used to add special style to a visited link. Possible values could be any color name in any valid format. Example                    a:visited {             color: #006600          }                     Click this link    

The outline-color property allows you to specify the color of the outline. Its value should either be a color name, a hex color, or an RGB value, as with the color and border-color properties.ExampleYou can try to run the following code to implement outline-color property −                            This text is having thin solid blue outline.                

The outline-style property specifies the style for the line that goes around an element. It can take one of the following values −none − No border. (Equivalent of outline-width:0;)solid − Outline is a single solid line.dotted − Outline is a series of dots.dashed − Outline is a series of short lines.double − Outline is two solid lines.groove − Outline looks as though it is carved into the page.ridge − Outline looks the opposite of groove.inset − Outline makes the box look like it is embedded in the page.outset − Outline makes the box look like it is coming out of the ... Read More

The :link pseudo-class is used to add special style to an unvisited link. Possible values could be any color name in any valid format. Example                    a:link { color:#000000; }                                Demo Link          

CSS pseudo-classes are used to add special effects to some selectors. You do not need to use JavaScript or any other script to use those effects.The most commonly used pseudo-classes are −ValueDescription:linkUse this class to add special style to an unvisited link.:visitedUse this class to add special style to a visited link.:hoverUse this class to add special style to an element when you mouse over it.:activeUse this class to add special style to an active element.:focusUse this class to add special style to an element while the element has focus.:first-childUse this class to add special style to an element that ... Read More

The z-index property is used along with the position property to create an effect of layers. You can specify which element should come on top and which element should come at the bottom. ExampleYou can try to run the following code to implement the z-index property −                                                     

Even the simplest designs can look fantastic and work correctly with a little CSS knowledge, which will increase your design abilities and improve the user experience on your website. To specify where an element appears on the page, we use the CSS position property. The position property determines the element's final positioning when combined with the top, right, bottom, and left CSS properties. There are various possible values for the position property: absolute, sticky, fixed, relative, and static. In this article we are going to learn about the CSS fixed positioning. CSS fixed positioning An element with a ... Read More

An element with position: absolute is positioned at the specified coordinates relative to your screen top-left corner.You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document.Move Left - Use a negative value for left. Move Right - Use a positive value for left. Move Up - Use a negative value for top. Move Down - Use a positive value for top.ExampleYou can try to run the following code to implement absolute positioning −                            This div has absolute positioning.          

Relative positioning changes the position of the HTML element relative to where it normally appears. So "left:20" adds 20 pixels to the element's LEFT position.You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document. Move Left - Use a negative value for left. Move Right - Use a positive value for left. Move Up - Use a negative value for top. Move Down - Use a positive value for top.ExampleYou can try to run the following code to implement relative positioning −                           ... Read More