CSS has become one of the most important aspects of web design. Displaying elements in the web browser is one of the basics that every front-end programmer must know. There are 3 types of CSS display properties that characterize every HTML element: inline, block and inline-block properties. So which one to choose and why? This …
CSS animations make an element of the web page move or change its appearance during an action by the user. Modern websites use animations to draw the user’s attention and make the navigation interactive. Animations help make the website dynamic and offer a satisfactory user experience. So let’s see how we can make our own …
absolute and relative position properties are used a lot in CSS and seem to be doing the same work, which is positioning an element in the page. But in reality, they’re different. In this tutorial we’ll see how each one of these properties work. 1)-First difference a)- absolute position Let’s just take a simple html …
absolute and relative positions: What’s the difference? Read More »
If you’re new to CSS or have used it for a little while you might have heard the words margin and padding but aren’t quite sure what they mean, or how to use them in your website. Both properties are used to provide extra space or a gap. But what is the difference between them if they both provide …
CSS margin and padding: What are they and how do we use them? Read More »
What is a border? A border is a set of lines that surrounds an element. We can see that a lot with images. Images often have a border, either a rectangular border or a circular border. How can we add borders and style them? To add a border to an element in CSS all you …
CSS border-How to add a border and make it rounded? Read More »
How to change a list style? For both ordered and unordered list, to change a list style type all we have to do is to use the list-style-type CSS property. Let’s say that we have the list below from my previous post that you can check here: https://purpose-code.com/html-lists/ To apply a list-style-type to our list …
