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 612 of 801
Different 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 MoreThe :lang Pseudo-class in CSS
The CSS :lang() pseudo-class selector is used to select elements with a specific lang attribute. This helps target content in different languages and style them accordingly, making it useful for multilingual websites. Syntax :lang(language-code) { /* CSS declarations */ } The language code is typically a two-letter ISO language code such as en for English, es for Spanish, or it for Italian. Example: Basic Language Targeting The following example shows how to style text differently based on language − ...
Read MoreUnderstanding CSS Selector and Declarations
CSS selectors are used to select HTML elements by matching each element of a given pattern. We define the styles by declaring properties and their values inside the selector block. Syntax selector { property: value; } For example − div { height: 200px; } Above, the selector is div, the property is height and the value is 200px. Types of Selectors CSS has various types of selectors to target different elements and states ? Basic selectors − ID, class, element, ...
Read MoreStyling different states of a link using CSS
Using CSS pseudo-classes, namely :active, :hover, :link and :visited, we can style different states of a link. For proper functionality, the order of these selectors should be: :link, :visited, :hover, :active. Syntax a:pseudo-selector { /* CSS properties */ } Link Pseudo-Classes The following are the key pseudo-classes for styling links − :link − To select unvisited links :visited − To select all visited links :hover − To select links on mouse over :active − To select the active link (when clicked) Example: Basic Link States ...
Read MoreThe width and height properties in CSS
The CSS width and height properties define the dimensions of an element's content area, excluding margins, padding, and borders. These fundamental properties give you precise control over element sizing. Syntax selector { width: value; height: value; } Possible Values ValueDescription autoBrowser calculates dimensions automatically (default) lengthFixed size in px, em, rem, etc. %Percentage of parent element's dimensions initialSets to default value inheritInherits from parent element Example: Fixed Dimensions The following example demonstrates setting specific width and height values − ...
Read MoreSetting Line Height in CSS
The CSS line-height property is used to control the vertical spacing between lines of text within an element. It defines the minimum height of line boxes and accepts only positive values. Syntax selector { line-height: value; } Possible Values ValueDescription normalDefault value, typically 1.2 times the font size numberA number that multiplies the current font size lengthFixed line height in px, em, rem, etc. %Percentage of the current font size Example 1: Using Percentage Values This example demonstrates different line heights using percentage and pixel values ...
Read More