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 666 of 801
Indicate 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 !important rule
The !important rule in CSS provides a way to give maximum priority to a CSS declaration. When applied, it ensures that the property value will override any other conflicting styles, regardless of specificity or source order. Syntax selector { property: value !important; } How CSS Cascade Works Without !important Normally, CSS follows the cascade rule where styles applied later override earlier styles. Here's an example ? p { color: red; ...
Read MoreFade Out Left Animation Effect with CSS
The fade out left animation effect smoothly moves an element to the left while reducing its opacity to zero, creating a disappearing effect that slides leftward. This animation combines translation and opacity changes for a smooth exit transition. Syntax @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; ...
Read MoreWhich element is used to add special style to the first letter of the text in a selector with CSS
The CSS :first-letter pseudo-element is used to apply special styling to the first letter of the first line in a block-level element. This is commonly used to create drop caps or emphasize the beginning of paragraphs. Syntax selector:first-letter { property: value; } Example The following example demonstrates how to style the first letter of paragraphs with different effects − p:first-letter { font-size: 3em; color: ...
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 MoreHow to change the color of focused links with CSS
Use the :focus pseudo-class to change the color of focused links. This styling applies when a user clicks on a link or navigates to it using keyboard tabbing. Possible values could be any color name in any valid format. Syntax a:focus { color: value; } Example You can try to run the following code to implement the color of the focused link − a:focus { color: #0000FF; ...
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 MoreUsage of :first-child pseudo-class in CSS
The CSS :first-child pseudo-class is used to select and style an element that is the first child of its parent element. This selector only targets the very first child element, regardless of its type. Syntax selector:first-child { property: value; } Example: Basic Usage The following example demonstrates how :first-child selects the first paragraph inside a div element − div > p:first-child { text-indent: 25px; ...
Read MoreCommonly used pseudo-classes in CSS
CSS pseudo-classes allow you to style elements based on their state or position without adding extra classes to your HTML. These powerful selectors help create interactive and dynamic styling effects. Syntax selector:pseudo-class { property: value; } Commonly Used Pseudo-Classes Pseudo-ClassDescription :linkStyles unvisited links :visitedStyles visited links :hoverStyles elements when mouse hovers over them :activeStyles elements when being clicked/activated :focusStyles elements that have keyboard focus :first-childStyles the first child element of its parent :langStyles elements based on their language attribute Example: Link States The following example demonstrates ...
Read MoreUsage of :hover pseudo-class in CSS
The :hover pseudo-class is used to add special styles to an element when a user hovers their mouse cursor over it. This creates interactive effects that enhance user experience and provide visual feedback. Syntax selector:hover { property: value; } Example: Link Hover Effect The following example changes the color of a link when you hover over it − a { color: #0066cc; text-decoration: none; ...
Read More