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 70 of 130
Working with Display Block in CSS
The CSS display: block property makes an element behave as a block-level element, taking up the full width of its parent container and starting on a new line. Block elements stack vertically and can have width, height, margins, and padding applied on all sides. Syntax selector { display: block; } Default Block Elements Elements like , , , , and are block-level by default. You can also convert inline elements to block elements using the display property. Example: Converting Inline to Block The following example converts an ...
Read MoreThe outline-style Property in CSS
The CSS outline-style property defines the style of an outline drawn around an element's border. Unlike the border property, the outline is not part of the element's dimensions and does not affect the layout. Syntax selector { outline-style: value; } Possible Values ValueDescription dottedCreates a dotted outline dashedCreates a dashed outline solidCreates a solid outline doubleCreates a double outline grooveCreates a 3D grooved outline ridgeCreates a 3D ridged outline insetCreates a 3D inset outline outsetCreates a 3D outset outline noneNo outline (default) Example: Solid and Double Outline ...
Read MoreInline-level Elements and Inline Boxes in CSS
Inline-level elements have their CSS display property set to either inline, inline-table, or inline-block and these elements do not force a line break above and below themselves. Inline-level boxes are generated by each inline-level element which is part of the positioning scheme and contains child boxes. Inline boxes are boxes which have their content follow inline formatting context. Inline boxes are split into a number of inline boxes whilst those inline boxes that are never split are called atomic inline-level boxes. Anonymous inline boxes are those boxes over which developer has no control. If a block box contains ...
Read MoreThe ::before and ::after Pseudo-element in CSS
The CSS ::before and ::after pseudo-elements are used to insert content before and after an element's actual content, respectively. These pseudo-elements create virtual elements that can be styled and positioned like regular HTML elements. Syntax element::before { content: "text or value"; /* other styles */ } element::after { content: "text or value"; /* other styles */ } Key Points The content property is required for pseudo-elements to appear Content can be text, images, or empty strings ...
Read MoreBlock-level Elements and Block Boxes in CSS
Block-level elements are HTML elements that have their CSS display property set to block, list-item, or table. These elements force a line break before and after themselves, taking up the full width available and stacking vertically. Block-level elements generate block-level boxes, which participate in the block formatting context. Syntax selector { display: block; } Block Container and Block Boxes Block container boxes can contain either block-level boxes (following block formatting context) or inline-level boxes (following inline formatting context). When a block-level element is also a block container, it is called ...
Read MoreType of Boxes Generated in CSS
One or more boxes are generated for every element in a document tree after processing it under the visual formatting model. A generated box has certain CSS properties associated with it and is accordingly rendered in HTML. To display elements, the following are the two common values − block − Starts on a new line and takes the full available width inline − Does not start on a new line and takes only the required width The following types of boxes are generated in CSS − Block-level Elements and Block Boxes Anonymous block boxes ...
Read MoreWorking with CSS Pseudo Classes
CSS pseudo classes are special keywords that allow you to select elements based on their state or position. They enable styling of elements when users interact with them (like :hover) or when they meet certain criteria (like :first-child). NOTE − CSS3 pseudo classes use single-colon notation (:) to distinguish them from pseudo elements (which use double colons ::). Syntax selector:pseudo-class { property: value; } Common Pseudo Classes Pseudo-Class Description Example Usage :hover Selects elements when user hovers over them Button color changes on mouse over ...
Read MoreFixing the Collapsed Parent using CSS
One of the many problems that developers face while using CSS float property is that if all child elements are floated then the parent container will collapse. To avoid parent container collapsing we can use one of the following solutions. The Problem When all child elements inside a parent container are floated, the parent container loses its height and appears to collapse. This happens because floated elements are removed from the normal document flow, so the parent doesn't recognize them when calculating its own height. Example of the Problem The following example demonstrates the collapsed parent ...
Read MoreLeft 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 More