Tag: CSS

Use of :even and :odd pseudo-classes with list items in CSS

The :nth-child() selector in CSS is used to match the elements based on their position in a group of siblings. It matches every element that is the nth-child. The: even and: odd pseudo-class is used with the list of items such as paragraph, article items which is basically a list content. Odd  Pseudo Class The… Continue reading Use of :even and :odd pseudo-classes with list items in CSS

CSS Comments

CSS comments are not displayed in the browser, but they can help document your source code. Comments are used to explain the code, and may help when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment is placed inside the <style> element, and starts with /* and ends with */: Example: Output:… Continue reading CSS Comments

!important Rule in CSS

The !important rule in CSS is used to add more importance to a property/value than normal. In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element! Out put: Example Explained In the example above. all three paragraphs will get a red background color, even though the ID… Continue reading !important Rule in CSS

CSS Pseudo element :not()

Elements that don’t match a list of selectors are represented by the:not() CSS pseudo-class. It is referred to as the negation pseudo-class since it stops users from selecting particular options. Syntax: :not(<complex-selector-list>) :not(.foo) will match anything that isn’t .foo, including and <HTML> and <body> The most specific selector in its comma-separated list of selectors replaces… Continue reading CSS Pseudo element :not()

Change the background image on scroll using CSS

We can change the background image of the webpage on scroll without changing the foreground contents. 1. Create HTML Create seven <div> tags with the following classes: <div class=”image one”></div> <div class=”image two”></div> <div class=”image three”></div> <div class=”image four”></div> <div class=”image five”></div> <div class=”image six”></div> <div class=”image seven”></div> <div class=”content”>W3DOCS</div> 2. Add CSS Set the height of… Continue reading Change the background image on scroll using CSS

Creative text styling with the CSS mix-blend-mode property

mix-blend-mode is a CSS property that defines how the content of an element should blend with the content of the element’s parent and its background. mix-blend-mode gives CSS developers greater flexibility to create native designs using real text on images, thereby removing the need to use often bloated images edited with tools like Photoshop. One… Continue reading Creative text styling with the CSS mix-blend-mode property

Parallax scrolling effect using CSS

Parallax is an effect used in various websites to make webpages attractive. In this effect, as we scroll, the background of the webpages moves at a different speed than the foreground making it look beautiful to the eyes. This effect can be easily implemented with the help of CSS. Implementation of the effect using CSS… Continue reading Parallax scrolling effect using CSS

How is the border-box different from the content-box in CSS.

The border-box and content-box are the two different values of box-sizing property. The box-sizing property in CSS defines how the user should calculate the total width and height of an element i.e. padding and borders, are to be included or not. Content-box: This is the default value of the box-sizing property. In this mode, the width and height properties include only the… Continue reading How is the border-box different from the content-box in CSS.