The opacity property specifies the opacity/transparency of an element. Transparent Image The opacity property can take a value from 0.0 – 1.0. The lower value, the more transparent: Example <!DOCTYPE html> <html> <head> <style> img { opacity: 0.5; } </style> </head> <body> <h1>Image Transparency</h1> <p>The opacity property specifies the transparency of an element. The lower the value, the more… Read More »
What are Pseudo-Elements? A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to: Style the first letter, or line, of an element Insert content before, or after, the content of an element Syntax The syntax of pseudo-elements:selector::pseudo-element { property: value;} The ::first-line Pseudo-element The ::first-line pseudo-element is used to add a… Read More »
What are Pseudo-classes? A pseudo-class is used to define a special state of an element. For example, it can be used to: Style an element when a user mouses over it Style visited and unvisited links differently Style an element when it gets focus Syntax The syntax of pseudo-classes:selector:pseudo-class { property: value;} Anchor Pseudo-classes Links can be displayed… Read More »
A combinator is something that explains the relationship between the selectors. A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator. There are four different combinators in CSS: descendant selector (space) child selector (>) adjacent sibling selector (+) general sibling selector (~) Descendant Selector The descendant… Read More »
Center Align Elements To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container. The element will then take up the specified width, and the remaining space will be split equally between the two margins: Example <!DOCTYPE html>… Read More »
The display: inline-block Value Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element. Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not. Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the… Read More »
The CSS float property specifies how an element should float. The CSS clear property specifies what elements can float beside the cleared element and on which side. The float Property The float property is used for positioning and formatting content e.g. let an image float left to the text in a container. The float property can have one of the following values: left –… Read More »
CSS Overflow The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area. The overflow property has the following values: visible – Default. The overflow is not clipped. The content renders outside the element’s box hidden – The overflow is clipped, and the rest… Read More »
The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky). The position Property The position property specifies the type of positioning method used for an element. There are five different position values: static relative fixed absolute sticky Elements are then positioned using the top, bottom, left, and right properties. However,… Read More »
The display property is the most important CSS property for controlling layout. The display Property The display property specifies if/how an element is displayed. Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline. Block-level Elements A block-level element always starts on a new line… Read More »