Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Articles on Trending Technologies
Technical articles with clear explanations and examples
How to change the font size using CSS?
CSS font-size property is used to control the size of text in HTML elements. You can specify font sizes using various units like pixels, percentages, keywords, or relative units like em and rem. Syntax selector { font-size: value; } Possible Values Value TypeDescriptionExample Pixels (px)Absolute size in pixels16px KeywordsPredefined size keywordssmall, medium, large Percentages (%)Relative to parent element120% Em/RemRelative units1.2em, 1.5rem Example 1: Using Pixel Values The following example demonstrates changing font size using pixel values − Font Size with Pixels ...
Read MoreHow to adjust CSS for specific zoom level?
To adjust CSS for specific zoom level, we use CSS media queries to change element styles when the viewport width changes during zoom operations. This technique is useful for maintaining proper layout and readability across different zoom levels. Syntax @media screen and (min-width: value) { /* Styles for zoom out (larger viewport) */ } @media screen and (max-width: value) { /* Styles for zoom in (smaller viewport) */ } How Zoom Affects Viewport Width When users zoom in or out, the effective viewport width changes ...
Read MoreHow to add space (" ") after an element using :after selector in CSS?
The CSS :after pseudo-selector allows you to insert content after an element. When used with a space character (" ") in the content property, it creates visual spacing after elements without affecting the layout structure. Syntax selector:after { content: " "; } Example: Adding Space After Elements The following example demonstrates how to add space after different elements using the :after selector − body { font-family: Arial, sans-serif; ...
Read MoreHow to add some non-standard font to a website in CSS?
A non-standard font refers to any font that is not part of the default set of fonts available in most browsers. Default fonts like Arial, Times New Roman, and Verdana are pre-installed on most devices, while non-standard fonts must be specifically loaded onto a website to be used. Non-standard fonts can be obtained from services like Google Fonts, Adobe Fonts, or custom font files. They help create unique visual identity and enhance the aesthetic appeal of websites. Syntax @font-face { font-family: 'FontName'; src: url('path/to/font.woff2') format('woff2'), ...
Read MoreHow to add rounded corner to an element using CSS?
Rounded corners add a soft and smooth look to a website and make it more visually appealing. In CSS, the border-radius property is used to create rounded corners on HTML elements such as divs, buttons, forms, or images. Syntax selector { border-radius: value; } Possible Values ValueDescription lengthDefines radius in px, em, rem, etc. %Defines radius as percentage (50% creates circle) 1-4 valuesDifferent values for each corner (top-left, top-right, bottom-right, bottom-left) Individual Corner Properties You can target specific corners using these properties − border-top-left-radius ...
Read MoreHow to position absolute rendering the button in a new line?
The CSS position property controls how elements are positioned within a webpage. When using position: absolute, elements are removed from the normal document flow, allowing precise placement and forcing subsequent elements to appear on new lines. Syntax selector { position: absolute; top: value; left: value; right: value; bottom: value; } Position Property Values ValueDescription staticDefault positioning according to document flow relativePositioned relative to its normal position absolutePositioned relative to nearest positioned ancestor fixedPositioned ...
Read MoreHow to display text Right-to-Left Using CSS?
The CSS direction property is used to set the text direction for elements, allowing you to display text from right-to-left (RTL) or left-to-right (LTR). This is essential for languages like Arabic, Hebrew, and Urdu that are naturally written from right to left. Syntax selector { direction: rtl | ltr | initial | inherit; } Possible Values ValueDescription rtlSets text direction from right to left ltrSets text direction from left to right (default) initialSets the property to its default value inheritInherits the direction from parent element Method 1: ...
Read MoreHow to set logo inside loader using CSS?
To set a logo inside a loader using CSS, you need to create a loader animation and position a logo image at its center. This technique is commonly used to maintain brand identity during page loading states and provides a professional user experience. Syntax .loader { /* Loader styles and animation */ } .loader img { /* Logo positioning and counter-animation */ } @keyframes loaderSpin { /* Loader rotation animation */ } @keyframes logoCounterSpin { /* Logo counter-rotation ...
Read MoreHow flexible items can be of the same length regardless of its content in CSS?
The CSS flex property allows you to create flexible items of equal length regardless of their content. This is achieved by controlling how flex items grow, shrink, and their initial size within a flex container. Syntax selector { flex: flex-grow flex-shrink flex-basis; } Flex Properties The flex property is a shorthand that combines three individual properties − Flex-grow This property defines how much a flex item should grow relative to other flex items when there's extra space in the container. The default value is 0. Flex-shrink ...
Read MoreHow to use font-optical-sizing property in CSS?
The CSS font-optical-sizing property controls whether the browser automatically adjusts the appearance of text glyphs to optimize readability at different font sizes. This property is particularly useful with variable fonts that support optical size variations. Syntax selector { font-optical-sizing: value; } Possible Values ValueDescription autoBrowser automatically optimizes glyph shapes based on font size (default) noneDisables optical sizing adjustments inheritInherits the value from the parent element How Optical Sizing Works When optical sizing is enabled, the browser adjusts glyph characteristics based on font size − ...
Read More