The scroll-behavior property specifies whether to smoothly animate the scroll position, instead of a straight jump, when the user clicks on a link within a scrollable box. CSS Syntax: Property Values auto——>Allows a straight jump “scroll effect” between elements within the scrolling box. This is default. smooth—–> Allows a smooth animated “scroll effect” between elements within the… Continue reading CSS scroll-behavior Property
Author: Manmohan Sabar
CSS Layout – display: inline-block
Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element. Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not. Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next… Continue reading CSS Layout – display: inline-block
How TO – Hide Scrollbar
Add overflow: hidden; to hide both the horizontal and vertical scrollbar. Example: Output: To only hide the vertical scrollbar, or only the horizontal scrollbar, use overflow-y or overflow-x: Example: To only hide the vertical scrollbar, or only the horizontal scrollbar, use overflow-y or overflow-x: Note: overflow: hidden will also remove the functionality of the scrollbar. It is not possible to scroll inside the page.… Continue reading How TO – Hide Scrollbar
CSS Gradients
CSS gradients let you display smooth transitions between two or more specified colors. CSS defines three types of gradients: Linear Gradients (goes down/up/left/right/diagonally) Radial Gradients (defined by their center) Conic Gradients (rotated around a center point) CSS Linear Gradients To create a linear gradient you must define at least two color stops. Color stops are… Continue reading CSS Gradients
How to Create an Image with Transparent Text with CSS
Transparent text on an image, you need to have your image or background image in a <div> element, and the content block in another <div>. ransparent text on an image, you need to have your image or background image in a <div> element, and the content block in another <div>. Or instead of the opacity property, you can just set an… Continue reading How to Create an Image with Transparent Text with CSS
CSS Layout – Horizontal & Vertical Align
Center Align Elements To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container. The element will then take up the specified width, and the remaining space will be split equally between the two margins: Center Align Text… Continue reading CSS Layout – Horizontal & Vertical Align
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
letter-spacing Property
The letter-spacing property increases or decreases the space between characters in a text. CSS Syntax: letter-spacing: normal|length|initial|inherit; Definition and Usage The letterSpacing property sets or returns the space between characters in a text. Tip: To set or return the spacing between words in a text, use the wordSpacing property. Example: Out put:
CSS background-position
How to position a background-image: The background-position property sets the starting position of a background image. By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally. How to position a background-image to be centered at top: 1. Output- How to position a background-image to be bottom right: output: