To create a basic list, use the element. Use the to place the list items in the . To form it a list group, use the CSS styled. Let us see how to transform a basic list into a list group with HTML and CSS. First, we will create an unordered list. Create an unordered list The element is used to create an unordered list. The list items are set using the elements − Lion Tiger Leopard Cheetah Jaguar ... Read More

We will see how to create a coupon with CSS. For that, we need to set the company name on the top, an image below, After that comes with coupon code and a text representing when the coupon will expire. Set the Parent Container for the Coupon We gave set the parent cdiv here. Within this we will set the divs for the text, image, etc − Style the parent container − .couponContainer { border: 5px dashed #bbb; width: 80%; border-radius: 15px; margin: 0 auto; max-width: 600px; } Set the Container for the ... Read More

To separate the content on an HTML web page, the element is used. The tag only consists of the opening tag i.e.; no closing tag is required. Insert a horizontal rule i.e., a line using the element. To style the element, the border properties play a major role. The border shorthand property or if you want to style a specific area of the horizontal line, then border-top, border-bottom, border-left, etc. properties can be used. Let us see how to style the element with HTML and CSS. Set the hr element For our example, we have ... Read More

To create empty circle on a web page, use the border-radius property. To align multiple circles on a web page, set the display property to inline-block. Let us see how to create empty circles with HTML and CSS. Create a container for circles Set a div container for the multiple circles we wish to create on a web page − Create the empty circles Use the border-radius property with the value 50% to create a circle. To align the circles ... Read More

The labels on a web page can be used to symbolize danger, warning, information symbols in the form of colors. With Bootstrap, pre-defined classes are available. However, even CSS styles can help us to achieve the same without using Bootstrap. Labels The element is used to set different labels for information, success, warning and danger. These are the different classes for each label we will set with CSS − Success Info Warning Danger Other Style the buttons The labels are styled like this − span { font-size: 18px; font-weight: 600; ... Read More

To create a design like notes, we need to style it according with CSS on a web page. Consider the sticky notes provided by Google Keep. It provided different color label options. Let us see how to create some notes. Set Different Divs for Notes Here, we are creating three notes, representing danger success and information. We have set different divs − Danger!Operation may damage your computer Success!Operation has been performed successfully Info!Need more resources to perform this operation Danger Note For our ... Read More

A callout messages are like notification visible on the bottom of the page. Set the offers or coupons here for the users. With that, if a user is not interested in these messages, then a cross sign to close it is also place on the top of the callout message. Let us see how to create callout messages with HTML and CSS. Create a container for the callout A div container is set for the callout that includes the callout heading, message, close button, etc − Check our offers × ... Read More

The alert message can be seen on web pages. As an example, we can consider a message while deleted an account on a social media website. Even coupons are provided in the form of alert message on some websites. Other examples can be “Your order is confirmed” or even ““Your password is about to expire. Please update it now.” Let us see how to create alert messages with HTML and CSS. Create a container for the alerts A div is set for the alter message. Within that the alert message is set with the close button symbol − ... Read More

On an E-commerce website, you must have seen product cards for specific products. It includes the product name, image, price, any discount, etc. On a web page, we can easily create a product card with CSS. With that, the Buy Now or Add to Cart button is also placed on this card so it’s easier for users to directly buy. Set the div for the card Under the div for the product card, set the product image and the product name as a heading. Rest, place the product details and price in the . Also, the buy button is set ... Read More

Under the Team page, or authors page, you must have seen the profile card of employees or authors. Such profile cards include the profile image, name, and profile. A button can also be created to allow users to contact. In most cases, such buttons are optional. Let us see how to create a profile card with CSS. Set a div for the profile card A parent div is set for the card. First, set the profile image, then the name, designation and location. At the end, set a button using the element − ... Read More