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 507 of 652
Left and Right Alignment using the float Property in CSS
The CSS float property is used to position elements horizontally within their container. It allows elements to "float" to the left or right side, making other content wrap around them. This property is commonly used for creating layouts and aligning content. Syntax selector { float: value; } Possible Values ValueDescription leftElement floats to the left side of its container rightElement floats to the right side of its container noneElement does not float (default value) Example: Float Left and Right The following example demonstrates floating elements to ...
Read MoreAligning elements using the position property in CSS
The CSS position property is used to control how elements are positioned within their containing element or the viewport. It works together with positioning properties like top, right, bottom, and left to precisely place elements. Syntax selector { position: value; top: value; right: value; bottom: value; left: value; } Position Values ValueDescription staticDefault positioning; follows normal document flow relativePositioned relative to its normal position absolutePositioned relative to nearest positioned ancestor fixedPositioned relative to ...
Read MoreCenter alignment using the margin property in CSS
We can center horizontally a block-level element by using the CSS margin property, but CSS width property of that element should be set. The auto value is set for the margin property. Syntax selector { margin: top-bottom-value auto; width: value; } The key points for center alignment using margin are − Set a specific width on the element Use margin: auto or margin: value auto The element must be a block-level element Example: Center a Simple Div Let's see a basic example ...
Read MoreUnderstanding CSS Visual Formatting
Visual Formatting in CSS is based on the Box Model. The CSS Visual Formatting is a model corresponding to an algorithm which processes and transforms each element of the document to generate one or more boxes that conform to the CSS Box Model. The layout of generated boxes depends on several properties such as − Dimensions − Width and height of the element Type − Block-level, inline-level, or inline-block Positioning − Normal flow, absolute, relative, or float Document tree relationships − ...
Read MoreThe :last-child Pseudo-class in CSS
The CSS :last-child pseudo-class selects an element that is the last child element of its parent. This powerful selector allows you to apply specific styles to the final element in a group without adding additional classes or IDs. Syntax selector:last-child { /* CSS declarations */ } Example 1: Styling Table Columns The following example demonstrates how to style the last column of a table with a right border − table { margin: ...
Read MoreDifferent Media Types in CSS
CSS Media Types are device types on which a document is rendered, allowing you to define specific styles for different output devices. This enables you to create optimized layouts for screens, printers, and other media. Syntax /* Using @media rule */ @media media-type { /* CSS rules */ } /* Using @import rule */ @import url("stylesheet.css") media-type; /* Using link element */ Media Types Media Type Description all Stylesheet applies to all media type devices print Stylesheet applies to printers ...
Read MoreThe ::first-line Pseudo-element in CSS
The ::first-line pseudo-element in CSS selects and styles the first line of text within an element. It is denoted by double colons and allows you to apply specific formatting to just the first line of a block-level element's content. Syntax selector::first-line { property: value; } Allowed Properties The ::first-line pseudo-element only accepts certain CSS properties − Property TypeExamples Font propertiesfont-family, font-size, font-weight Color propertiescolor, background-color Text propertiestext-decoration, text-transform, line-height Border propertiesborder, border-radius Example: Basic First Line Styling The following example applies background color and text ...
Read MoreStacking Elements in Layers using z-index Property using CSS
The CSS z-index property is used to control the stacking order of positioned elements. Elements with higher z-index values appear in front of elements with lower values, creating layers on the page. NOTE − If overlapping elements do not have z-index specified, the element that appears last in the HTML document will show up on top. Syntax selector { z-index: value; position: relative | absolute | fixed | sticky; } Important: The z-index property only works on positioned elements (position: relative, absolute, fixed, or sticky). ...
Read MoreAnchor Pseudo-classes in CSS
Using CSS pseudo-class selectors, namely :active, :hover, :link and :visited we can style different states of a link/anchor. For proper functionality, the order of these selectors should be − :link :visited :hover :active Syntax a:link { /* styles for unvisited links */ } a:visited { /* styles for visited links */ } a:hover { /* styles when hovering over links */ } a:active ...
Read MoreHow to use CSS Selectors for styling elements?
CSS selectors are patterns used to select and style specific HTML elements on a web page. They provide precise control over which elements receive styling, allowing developers to target elements by their type, class, ID, or other attributes. Syntax selector { property: value; /* more declarations */ } Types of CSS Selectors The most commonly used CSS selectors include − Class Selector − Targets elements with a specific class attribute ID Selector − Targets a unique element with a specific ID attribute Grouping Selectors ...
Read More