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
Front End Technology Articles
Page 508 of 652
The :lang Pseudo-class in CSS
The CSS :lang() pseudo-class selector is used to select elements with a specific lang attribute. This helps target content in different languages and style them accordingly, making it useful for multilingual websites. Syntax :lang(language-code) { /* CSS declarations */ } The language code is typically a two-letter ISO language code such as en for English, es for Spanish, or it for Italian. Example: Basic Language Targeting The following example shows how to style text differently based on language − ...
Read MoreUnderstanding CSS Selector and Declarations
CSS selectors are used to select HTML elements by matching each element of a given pattern. We define the styles by declaring properties and their values inside the selector block. Syntax selector { property: value; } For example − div { height: 200px; } Above, the selector is div, the property is height and the value is 200px. Types of Selectors CSS has various types of selectors to target different elements and states ? Basic selectors − ID, class, element, ...
Read MoreStyling different states of a link using CSS
Using CSS pseudo-classes, namely :active, :hover, :link and :visited, we can style different states of a link. For proper functionality, the order of these selectors should be: :link, :visited, :hover, :active. Syntax a:pseudo-selector { /* CSS properties */ } Link Pseudo-Classes The following are the key pseudo-classes for styling links − :link − To select unvisited links :visited − To select all visited links :hover − To select links on mouse over :active − To select the active link (when clicked) Example: Basic Link States ...
Read MoreThe width and height properties in CSS
The CSS width and height properties define the dimensions of an element's content area, excluding margins, padding, and borders. These fundamental properties give you precise control over element sizing. Syntax selector { width: value; height: value; } Possible Values ValueDescription autoBrowser calculates dimensions automatically (default) lengthFixed size in px, em, rem, etc. %Percentage of parent element's dimensions initialSets to default value inheritInherits from parent element Example: Fixed Dimensions The following example demonstrates setting specific width and height values − ...
Read MoreSetting Line Height in CSS
The CSS line-height property is used to control the vertical spacing between lines of text within an element. It defines the minimum height of line boxes and accepts only positive values. Syntax selector { line-height: value; } Possible Values ValueDescription normalDefault value, typically 1.2 times the font size numberA number that multiplies the current font size lengthFixed line height in px, em, rem, etc. %Percentage of the current font size Example 1: Using Percentage Values This example demonstrates different line heights using percentage and pixel values ...
Read MoreUnderstanding the difference between CSS Border and Outline
The CSS border and outline properties are both used to add visual boundaries around elements, but they behave very differently. Understanding their key differences will help you choose the right property for your styling needs. Syntax selector { border: width style color; outline: width style color; } Key Differences FeatureBorderOutline Takes up spaceYes, affects element dimensionsNo, drawn outside the element Individual sidesCan style each side separatelyApplied to all sides at once Border radiusSupports rounded cornersDoes not follow border radius Offset supportNoYes, with outline-offset ...
Read MoreWorking with CSS Overflow Property
The CSS overflow property controls what happens when content is larger than its container. It allows you to clip content, provide scrollbars, or let content extend beyond the container boundaries. Syntax selector { overflow: value; } Possible Values Value Description visible Default value. Content is not clipped and renders outside the element's box hidden Clips content that overflows. Clipped content is not visible scroll Clips content and adds scrollbars to view the overflow auto Automatically adds scrollbars only when content ...
Read MoreChanging the look of Cursor using CSS
The CSS cursor property allows you to change the appearance of the mouse cursor when it hovers over specific elements. This property enhances user experience by providing visual feedback about interactive elements and their functionality. Syntax selector { cursor: value; } Possible Values Value Description auto Browser sets the cursor automatically (default) pointer Hand pointer, indicates a link text I-beam cursor, indicates selectable text move Four-arrow cursor, indicates moveable element not-allowed Crossed circle, indicates prohibited action ...
Read MoreControlling the Position of Table Caption using CSS
The CSS caption-side property is used to control the position of a table caption. It determines whether the caption appears at the top or bottom of the table. By default, table captions are placed at the top of the table. Syntax caption { caption-side: value; } Possible Values ValueDescription topPlaces the caption at the top of the table (default) bottomPlaces the caption at the bottom of the table Example 1: Caption at Bottom The following example demonstrates placing the table caption at the bottom − ...
Read MoreDefine Paddings for Individual Sides in CSS
CSS allows us to set side specific padding for elements. We can easily specify padding sizes for individual sides of an element. The padding-top, padding-right, padding-bottom and padding-left properties define the top, right, bottom and left padding respectively. The padding shorthand property can also be used to achieve the same output by specifying values in clock-wise direction. Syntax The syntax of CSS individual padding properties is as follows − selector { padding-top: value; padding-right: value; padding-bottom: value; padding-left: value; } ...
Read More