Found 1796 Articles for CSS

How to use text as background using CSS?

Abhishek
Updated on 20-Nov-2023 18:36:34

46 Views

In general, we use text in foreground not as background because text is the most important thing for any website and organizing text on frontend with good visibility, readability and fonts to show the users is also important. But sometimes, you need to show the text as background for other text or HTML element with some content. In that case you can use the z-index property of CSS with different properties to show text as background. There are two different ways of using the z-index property with other properties and selectors to show text as background using CSS as listed ... Read More

How to use font-feature-settings property in CSS?

Abhishek
Updated on 20-Nov-2023 17:49:25

21 Views

The font-feature-settings property is used to control the advance typographic features in open type fonts. The advance typographic features like swashes, small caps and the ligatures can be controlled using the font-feature settings property of CSS. The font-feature-settings property is used by passing two different values as listed below − The first value is the property is used to define the open tyoe feature tags like: "smcp" (small caps), "swsh" (swash). It also has some global values like: "inherit", "initial", and "unset". The second value that is passed to this property will almost be in the form of binary ... Read More

How to use font-variant-settings property in CSS?

Abhishek
Updated on 20-Nov-2023 17:46:59

16 Views

CSS is a way of styling the web pages according to the consumer needs and the design you want. It provides a lot of properties to style our components or pages. The font-variant-settings is also one of those properties that is provided by CSS to style our web pages. The font-variant-settings property provides users a good and healthy low-level control over the fonts with different characteristics and properties. Using font-variant-settings property in CSS The font-variant-settings property can be used in three different ways by giving different types of values to it. The different ways of using this property are explained ... Read More

How to set the size of specific flex-item using CSS?

Abhishek
Updated on 20-Nov-2023 16:25:43

18 Views

In CSS, we can create our own flexbox using some flex properties provided by the CSS. The CSS flexbox is used to create the responsive layout for the mobile and other small screen devices to arrange the layout by adjusting their sizes for those screen sizes. To create a flexbox for the web page to manage items and their sizes, we are allowed to use the display: flex; property and then we can use the flex properties which are associated with this property to arrange the items according to the striking device width. Let us now discuss and understand the ... Read More

How to set the order of flexible items using CSS?

Abhishek
Updated on 20-Nov-2023 15:29:51

16 Views

Generally, all the HTML elements renders on the web page in the same order in which they are defined in the HTML document. But we can change the order of any element using the order property of CSS. We can use the order property on the elements which are defined inside a flexbox or an element that contains the display: flex; property. Once we used the display flex on the parent element, we can use the order property to change the order of the child flexible items using the order property. NOTE − Please make a note that the order ... Read More

How to set the inset shadow using CSS?

Abhishek
Updated on 20-Nov-2023 15:14:31

14 Views

Generally, we use the box-shadow property to apply shadow around any box or container. The box shadow property in CSS by default applies the shadow outside around the boundaries of the container. But we can also use the box shadow property to set the shadow inside the container as well. Let us see how we can use the box shadow property to set the inner shadow to a container and make it look attractive. Syntax We can use the box shadow property with different number of values for different purposes as shown in the below syntax − box-shadow: x-offset ... Read More

How to set the cursor style on browser using CSS?

Abhishek
Updated on 20-Nov-2023 15:10:18

6 Views

Generally, the cursor on any browser window is of arrow type by default. But you can change the cursor style or type to any style of your choice for any kind of text. There are many cursor style options that are available in CSS that you can choose to style your cursor like pointer, zoom-in, zoom-out etc. You can also use any image or icon as a cursor style value to change the cursor style to an image. There is a cursor property provided by the CSS that we can use to style our cursor on browser using CSS. Let ... Read More

How to set the content as a counter?

Abhishek
Updated on 20-Nov-2023 15:06:46

10 Views

In general, we use JavaScript to set the dynamic content as counter for the content on the web page. But in this article, we are going to learn how we can set the content as counter using the CSS counter properties. It is possible to set content as counter by using the counter properties inside the before or after pseudo selectors. Let us now see the counter properties we can use to set the content as counter using CSS. The CSS counters are just like the variables in other languages. We can increment their values using CSS rules or properties. ... Read More

How to set position of an image in CSS?

Abhishek
Updated on 20-Nov-2023 14:54:33

13 Views

In general, the default position of an image is left aligned on the web page. But you can change the position of an image according to your needs and set the position of an image manually on the web page where you have to show that particular image. Let us now discuss about the ways of positioning an image on the webpage using CSS. There are two methods or approaches in general to position an image on the web page using CSS that are listed below − Using the float property of CSS Using the object-position property of CSS ... Read More

How to set padding inside an element using CSS?

Abhishek
Updated on 20-Nov-2023 14:46:07

17 Views

Padding in CSS is used to give some space around the content of the element. You can add the space around the any type of content that is contained by the element. The content can be direct text, or any other nested elements inside it. You can easily add the space you want to set between the content and the boundaries of the element. Padding is the inner space, that is set only around the content and between the boundaries and content of element. Let us see how you can add padding inside an element around its content using CSS. ... Read More

1 2 3 4 5 ... 180 Next
Advertisements