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
CSS Articles
Page 34 of 130
How 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 MoreHow to use CSS to separate content and design?
CSS allows you to separate content (HTML structure) and design (visual styling) by keeping styling information in separate CSS files rather than mixing it with HTML. This separation makes websites easier to maintain, more organized, and allows for consistent styling across multiple pages. Syntax /* External CSS file */ selector { property: value; } Benefits of Separating Content and Design Maintainability − Easier to update styles across multiple pages Reusability − Same CSS file can be used for multiple HTML pages Cleaner Code − HTML focuses on structure, CSS ...
Read MoreHow to change background-color on a specific wider viewport in CSS ?
The method through which we can determine the device being used for surfing is by using what we call, "viewport" widths. CSS media queries allow you to change background colors and other styles based on specific viewport widths, making your website responsive across different devices. Syntax @media screen and (min-width: value) { selector { background-color: color; } } Understanding Viewports In web development, a viewport is the visible area of a web page on a device. There are ...
Read More