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
Web Development Articles
Page 609 of 801
The :first-child Pseudo-class in CSS
The CSS :first-child pseudo-class selects an element that is the first child element of its parent. This selector is commonly used to apply special styling to the first item in a list, the first paragraph in a section, or the first cell in a table row. Syntax :first-child { /* CSS declarations */ } Example 1: Styling First Table Cell Let's see an example where we remove the left border from the first cell in each table row − ...
Read MoreAbsolute Positioning Using CSS
The CSS position: absolute property removes an element from the normal document flow and positions it relative to its nearest positioned ancestor (any element with position other than static). If no positioned ancestor exists, the element is positioned relative to the document body. Syntax selector { position: absolute; top: value; left: value; right: value; bottom: value; } The position property has the following values − static − Default positioning, follows normal document flow ...
Read MoreCSS Central, Horizontal and Vertical Alignment
CSS provides various methods to align elements and their content horizontally, vertically, or centrally. Understanding these alignment techniques is essential for creating well-structured layouts. Syntax /* Horizontal alignment */ text-align: left | center | right; margin: 0 auto; float: left | right; /* Vertical alignment */ vertical-align: top | middle | bottom; display: flex; align-items: center; Horizontal Alignment Method 1: Text Alignment for Inline Elements Inline elements such as text, spans, and links can be aligned using the text-align property ? .container ...
Read MoreTurning off Float using Clear Property of CSS
The CSS clear property is used to control how elements behave next to floated elements. It specifies which sides of an element should not be adjacent to floating elements, effectively forcing the element to move below any floated content. Syntax clear: value; Possible Values ValueDescription noneThe element is not moved below left or right floated elements. Default value. leftThe element is moved below left floated elements rightThe element is moved below right floated elements bothThe element is moved below both left and right floated elements Example 1: Clearing Left Floated Elements ...
Read MoreThe min-height Property in CSS
The CSS min-height property sets the minimum height for an element's content box. It ensures that the element will never be smaller than the specified minimum height, even if the content would naturally require less space. Syntax selector { min-height: value; } Possible Values ValueDescription lengthSets minimum height in px, em, rem, cm, etc. %Sets minimum height as percentage of parent element autoBrowser calculates minimum height automatically initialSets to default value inheritInherits from parent element Example: Basic Min-Height This example demonstrates how min-height ensures elements maintain ...
Read MoreThe outline-width Property in CSS
The outline-width property can be defined to draw a line of specific thickness around the borders of the element, but the outline is not a part of an element's dimensions, unlike border property. Syntax selector { outline-width: value; } Possible Values ValueDescription thinCreates a thin outline (typically 1px) mediumCreates a medium outline (typically 3px) thickCreates a thick outline (typically 5px) lengthCreates outline with specific width (px, em, rem, etc.) NOTE − The outline-style property needs to be defined before declaring outline-width. Example 1: Thin Outline ...
Read MoreSetting Background Image using CSS
The CSS background-image property is used to set an image as a background for the selected element. The url() function is used in the background-image property to specify the image source. Syntax selector { background-image: value; } Possible Values ValueDescription url('URL')The image URL source linear-gradient()Creates a linear gradient as background radial-gradient()Creates a radial gradient as background conic-gradient()Creates a conic gradient as background repeating-linear-gradient()Repeats a linear gradient pattern repeating-radial-gradient()Repeats a radial gradient pattern repeating-conic-gradient()Repeats a conic gradient pattern Example: Basic Background Image This example shows how to set ...
Read MoreEmbedded or internal Style Sheets in CSS
CSS files can be embedded internally by declaring them in the tag. This decreases the load time of the webpage. Although embedded CSS declarations allow dynamic styles, it should be downloaded at every page request as internal CSS can't be cached. Internal CSS are declared in the tag inside the tag. Syntax The syntax for embedding CSS files is as follows − selector { property: value; } Example 1: Internal Style Sheet for Styling a div ...
Read MoreSetting Margin Space around elements using CSS
The CSS margin property is used to create space around elements, outside of their borders. The margin property is a shorthand for margin-top, margin-right, margin-bottom, and margin-left. Let's say we have set the following margins using the shorthand property − margin: 10px 45px 35px 70px; The above means − 10 pixels for the top margin 45 pixels for the right margin 35 pixels for the bottom margin 70 pixels for the left margin Syntax selector { margin: value; } Possible Values ...
Read MoreWidth and Height of Elements in CSS
To specify the height and width of an element, use the CSS height and width properties, respectively. We can also set the maximum and minimum values for these properties using the max-height, max-width, min-height, and min-width properties. Syntax selector { height: value; width: value; } Possible Values Here are the values of the height and width properties − Value Description auto The dimension is calculated by the web browser length The dimension is defined in length units (px, em, ...
Read More