In CSS, the ‘marker-offset’ CSS property is used to specify the distance between the nearest border edges of marker box and principal box. In CSS, the marker is a pseudoelement that refers to the bullet points of the lists. Here, we will learn to set the distance between the nearest border edges of marker box and principal box. Syntax Users can follow the syntax below to set the distance between the nearest border edges of the marker box and the principle box. marker-offset: value; Example In the example below, we have created an unordered list of different programming ... Read More

In CSS, the ‘text-decoration’ property is used to underline, overline, and strikethrough the text. Underlining the text means drawing a line below the text, and overlining the text means drawing a line above the text. Striking through the text means drawing a line on the text to show text is erased. In this tutorial, we will learn to use the different values of the text-decoration CSS property to style text differently. Syntax text-decoration: style decoration color thickness; Values Style – It represents the style of the decorated line, such as solid, dotted, wavy, etc. Decoration - ... Read More

Developers can customize the font of the webpage using various CSS properties. For example, the ‘font-size’ property is used to specify the font size, and the ‘font-weight’ CSS property is used to specify the font weight of the text. Furthermore, there are lots of other CSS properties which we can use to customize the fonts. The ‘font’ CSS property can be used as a shorthand of all properties to customize the font. Syntax Users can follow the syntax below to use the ‘font’ shorthand CSS property to customize the web page's font. font: font-style font-weight font-size/line-height font-family; Values ... Read More

In CSS, the ‘overflow’ property is used to specify the overflow of the content of the HTML element. For example, if the height of the div element is ‘500px’, and the height of the inside content is ‘1000px’, we need to make the content scrollable. In this tutorial, we will learn the difference between the ‘auto’ and ‘scroll’ values of the CSS ‘overflow’ property. Overflow: auto in CSS In CSS, overflow: auto sets the overflow of the HTML element to auto. It means if the content of the div is overflowing, it sets the ‘scroll’ as a value of ... Read More

In this tutorial, we will learn to shake a button when the user hovers using HTML and CSS. Creating a shaking button makes the UX of the application more attractive. We need to create a custom animation using the CSS ‘keyframes’ rules to shake any HTML element. After that, we can use custom keyframes as a value of the ‘animation’ CSS property to shake the button when the user hovers over the button. Syntax Users can follow the syntax below to shake a button on hover using HTML and CSS. .btn:hover { animation: key_frame_name animation_time ... Read More

We can use the ‘iFrame’ in HTML to embed the document in the HTML web page. For example, we can embed youtube videos in the web page using the ‘IFrame’ HTML tag. The ‘iFrame’ contains the border by default. In this tutorial, we will learn various approaches to removing the border from the IFrame using CSS. Use the Frameborder HTML Attribute The ‘IFrame’ contains the ‘frameborder’ HTML attribute. It can have either ‘0’ or ‘1’ as a value. Using the ‘0’ as a value of the ‘frameBorder’ HTML attribute removes the border; otherwise, it adds the border to the ... Read More

Generally, the developer uses JavaScript to add the behaviour to the HTML code. Sometimes, we can also add behaviour to the HTML code using CSS. For example, we can create a slideshow using HTML and CSS rather than using JavaScript with HTML. We can create custom keyframes to animate the slides and create a slideshow. Syntax Users can follow the syntax below to create a slideshow using only HTML and CSS. .slides { width: calc(716px * 2); animation: slideShow 10s ease infinite; } @keyframes slideShow { 30% {margin-left: 0px;} ... Read More

It is important to add animations to icons or images to improve the UX of the application. In this tutorial, we will learn to add animation to the icons. Also, we will learn to reduce or increase the size of the icon during the animation. We will use the ‘transform: scale’ property to change the dimensions of the icon during the animation. Syntax Users can follow the syntax below to reduce the size of an icon during the animation. img { animation: icon 5s infinite; } @keyframes icon { 0% {transform: scale(1);} ... Read More

In CSS, selectors are used to selecting the elements by class name, id, tag, etc. There are also some wildcard selectors available in CSS, which we can use to define the queries to select the HTML elements. Wildcard selectors allow us to select an HTML element containing the particular substring in the value of the particular attribute, such as class or id. In this tutorial, we will learn to use the *, ^, and $ wildcard selectors for classes and id. Contains (*=) wildcard selector in CSS The contains (*=) wildcard selector allows developers to find all HTML elements ... Read More

The SCSS allows developers to write CSS in a more structured way. Also, we can create multiple files for CSS while using the SCSS and import the required file in the main SCSS file. In this tutorial, we will see the objective to put ‘_’ before the filename in SCSS. When should we put ‘_’ in front of the filename in SCSS? Whenever we put the -_’ before the filename in the SCSS, the compiler ignores the file while compiling the SCSS. The file becomes partial if the filename starts with the ‘_’ character. For example, we have two ... Read More