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
Articles by Samual Sam
Page 4 of 151
Fade In Up Animation Effect with CSS
The CSS fade in up animation effect creates a smooth transition where an element starts invisible and positioned below its final location, then gradually appears while moving upward to its intended position. This creates an elegant entrance animation commonly used in modern web design. Syntax @keyframes fadeInUp { 0% { opacity: 0; transform: translate3d(0, 100%, 0); } 100% { opacity: 1; ...
Read MoreIndicate what character set the style sheet written in with CSS
To indicate what character set the style sheet is written in with CSS, use the @charset rule. The @charset rule must be written right at the beginning of the style sheet without even a space before it. The value is held in quotes and should be one of the standard character sets. Syntax @charset "character-set-name"; Example The following example shows how to specify the UTF-8 character set at the beginning of a CSS file − @charset "UTF-8"; ...
Read MoreUsage of CSS :first-line pseudo-element
The CSS :first-line pseudo-element is used to add special styles to the first line of text within a block-level element. This pseudo-element automatically adjusts based on the viewport width and text wrapping. Syntax selector:first-line { property: value; } Example: Basic First-Line Styling The following example demonstrates how to use the :first-line pseudo-element to style the first line of paragraphs − p:first-line { text-decoration: underline; ...
Read MoreCSS outline-width property
The CSS outline-width property is used to set the width of the outline around an element. The outline appears outside the element's border and does not affect the element's dimensions or layout. Syntax selector { outline-width: value; } Possible Values ValueDescription thinSets a thin outline (typically 1px) mediumSets a medium outline (typically 3px) thickSets a thick outline (typically 5px) lengthSets a specific width using px, em, rem, etc. Example The following example demonstrates different outline widths − ...
Read MoreCSS outline-style property
The CSS outline-style property specifies the style for the line that goes around an element's border. Unlike borders, outlines don't take up space and don't affect the element's layout. Syntax selector { outline-style: value; } Possible Values ValueDescription noneNo outline (default value) solidOutline is a single solid line dottedOutline is a series of dots dashedOutline is a series of short lines doubleOutline is two solid lines grooveOutline appears carved into the page ridgeOutline appears raised from the page insetOutline makes the element look embedded outsetOutline makes the element look ...
Read MoreCSS width property
The CSS width property is used to set the width of an element. It defines how wide an element should be, and can accept various types of values including lengths, percentages, or keywords. Syntax selector { width: value; } Possible Values ValueDescription autoBrowser calculates the width automatically (default) lengthDefines width in px, em, rem, cm, etc. %Defines width as a percentage of the parent element initialSets width to its default value inheritInherits width from the parent element Example: Setting Fixed Width The following example demonstrates setting ...
Read MoreSet outline style as a groove with CSS
To set the outline style as a groove, use the outline-style property with the value groove. Under groove, the outline looks as though it is carved into the page. Syntax selector { outline-style: groove; } Example The following example demonstrates how to apply a groove outline style to a paragraph − .groove-outline { outline-width: 3px; outline-style: groove; ...
Read MoreCSS outline property
The outline property is a shorthand property that allows you to specify values for multiple properties such as outline-color, outline-style, and outline-width in a single declaration. Syntax selector { outline: width style color; } Possible Values PropertyValuesDescription outline-widththin, medium, thick, lengthSpecifies the width of the outline outline-stylesolid, dashed, dotted, double, groove, ridge, inset, outsetSpecifies the style of the outline outline-colorcolor name, hex, rgb, rgbaSpecifies the color of the outline Example: Different Outline Styles The following example demonstrates various outline styles and colors − ...
Read MoreSet outline style as a dotted line with CSS
The CSS outline-style property is used to define the style of an element's outline. When set to dotted, it creates a dotted line around the element's border edge. Syntax selector { outline-style: dotted; } Example The following example demonstrates how to create a dotted outline around a paragraph element − .dotted-outline { outline-width: 7px; outline-style: dotted; ...
Read MoreCSS padding-left property
The CSS padding-left property sets the amount of space between an element's content and its left border. This property affects the inner spacing on the left side of an element. Syntax selector { padding-left: value; } Possible Values ValueDescription lengthSpecifies padding in px, em, rem, etc. %Specifies padding as a percentage of the containing element's width initialSets the property to its default value (0) inheritInherits the value from the parent element Example: Left Padding with Different Units The following example demonstrates padding-left using both pixel and ...
Read More