Category: CSS


css specificity interview question

Specificity allows browsers to decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity only applies when the same element is targeted by multiple declarations. Inline...


Making max width work in internet explorer

If you have ever had to pull your hair out over why the max-width property is not having any effect on your markup in internet explorer, the solution is quite simple, yet baffling. It...


css – align text to an image vertically

Have you ever wanted to align the text next to an image vertically? It can be done using vertical-align property as shown below. Here, we show how to align the text to top, middle,...


simple css reset

I use the following css reset in almost all my projects. It does the job for me. I hope it helps you, too. [codepen_embed height=”266″ theme_id=”0″ slug_hash=”YqvbwN” default_tab=”result” user=”kavitshah8″]See the Pen simple css reset...


css : center element vertically and horizontally

CSS transform allows us to modify the coordinate space of any element. transform can have one of the following functions as its value : rotate skew scale matrix translate perspective Using the translate function...


css – circular profile pictures

Nowadays, circular profile pictures are very popular. It’s really simple to create the circular profile picture from a given square image using border-radius. Following example, renders an original square image as well as the...


css – vertically align text

Let’s see the example on horizontally aligning the text using text-align: center as shown in the below pen. [codepen_embed height=”345″ theme_id=”0″ slug_hash=”ONEPKQ” default_tab=”css,result” user=”kavitshah8″]See the Pen horizontally-aligned by Kavit Shah (@kavitshah8) on CodePen.[/codepen_embed] To...


pseudo elements vs pseudo classes

pseudo elements They allow you to style certain parts of a document. For example, you can style the first letter of each paragraph. MDN list of pseudo elements The following video demonstrates the pseudo...

Show Buttons
Hide Buttons