CSS Image Sprites

Image Sprites An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number…

CSS Dropdowns

Create a hoverable dropdown with CSS. Basic Dropdown Create a dropdown box that appears when the user moves the mouse over an element. Example <style> .dropdown {   position: relative;   display: inline-block; } .dropdown-content {   display: none;  …

CSS Opacity and Transparency

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 the value, the more transparent. Example img {   opacity: 0.5; }

CSS Pseudo-elements

What are Pseudo-Elements? A CSS pseudo-element is used to style specific 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 an element Style the…

CSS Pseudo-classes

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 moves the mouse over it Style visited and unvisited links differently Style…

CSS Combinators

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 combinator (space) Child combinator (>) Next sibling combinator (+) Subsequent-sibling combinator (~) Descendant…

CSS Layout – Align

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…

CSS Layout – display: inline-block

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…

CSS Layout – float and clear

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…

CSS Layout – Overflow

The CSS overflow property controls what happens to content that is too big to fit into an area. CSS Overflow The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is…