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 610 of 801
A Practical Guide to Font Styling using CSS
CSS plays a key role in font styling. The CSS font properties allow us to change the font-family, font-size, font-weight, font-kerning, and a lot more properties. The CSS font property is a shorthand for font-style, font-variant, font-weight, font-size/line-height and font-family. Further, we can apply styles to the text through text-decoration using CSS text-shadow, text-stroke, text-fill-color, color, etc. Syntax /* Individual font properties */ selector { font-family: family-name; font-size: value; font-weight: value; font-style: value; } /* Font shorthand property */ selector ...
Read MoreRemoving Dotted Line around Active Links using CSS
We can remove the default behavior of hyperlinks which is to show a dotted outline around themselves when active or focused by declaring CSS outline property on active/focused links to be none. Syntax a, a:active, a:focus { outline: none; } Example Let's see how to remove dotted line around active links with an example − Remove dotted line around links using css div { ...
Read MoreThe outline Shorthand Property in CSS
The CSS outline shorthand property is used to draw a line around an element's border. Unlike the border property, the outline does not affect the element's dimensions or layout and is drawn outside the border area. Syntax selector { outline: outline-width outline-style outline-color; } Possible Values PropertyDescriptionValues outline-widthSpecifies the thickness of the outlinethin, medium, thick, or length units (px, em, etc.) outline-styleSpecifies the line style (required)dotted, dashed, solid, double, groove, ridge, inset, outset outline-colorSpecifies the color of the outlineColor names, hex values, rgb(), etc. Example: Basic Outline ...
Read MoreThe outline-color Property in CSS
The CSS outline-color property is used to set the color of an outline around an element. Unlike borders, outlines do not take up space and are drawn outside the element's dimensions. Syntax selector { outline-color: value; } Possible Values ValueDescription color nameNamed color like red, blue, green hexHexadecimal color like #ff0000 rgb()RGB values like rgb(255, 0, 0) rgba()RGB with alpha transparency hsl()Hue, saturation, lightness values hsla()HSL with alpha transparency Note: The outline-style property must be defined before using outline-color. Example: Basic Outline Color The following ...
Read MoreStatic Positioning Using CSS
CSS static positioning is the default positioning method for HTML elements. When an element has position: static, it appears in the normal document flow and is not affected by the top, right, bottom, or left properties. Syntax selector { position: static; } Key Points Static positioning is the default value for all HTML elements Elements are positioned according to the normal document flow CSS positioning properties (top, right, bottom, left) have no effect Elements cannot be moved from their natural position Example: Basic Static Positioning The ...
Read MoreControlling the Visibility of elements Working with CSS
The CSS visibility property controls whether an element is visible or hidden on a web page. Unlike the display property, visibility: hidden keeps the element's space in the layout while making it invisible. Syntax selector { visibility: value; } Possible Values Value Description visible Default value. Element and its children are visible hidden Element is invisible but still takes up space in layout collapse Used only for table elements. Removes row/column space initial Sets visibility to its default value ...
Read MoreDisplay None Using in CSS
CSS display: none is used to completely hide an element from the webpage. When an element has display: none, it is removed from the document flow and takes up no space on the page. The element and all its child elements become invisible and are not rendered by the browser. Syntax selector { display: none; } Key Characteristics Element is completely removed from the document flow Takes up no space on the page Child elements are also hidden, regardless of their display property Different from visibility: hidden, which hides ...
Read MoreWorking 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 More