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 71 of 130
Center alignment using the margin property in CSS
We can center horizontally a block-level element by using the CSS margin property, but CSS width property of that element should be set. The auto value is set for the margin property. Syntax selector { margin: top-bottom-value auto; width: value; } The key points for center alignment using margin are − Set a specific width on the element Use margin: auto or margin: value auto The element must be a block-level element Example: Center a Simple Div Let's see a basic example ...
Read MoreUnderstanding CSS Visual Formatting
Visual Formatting in CSS is based on the Box Model. The CSS Visual Formatting is a model corresponding to an algorithm which processes and transforms each element of the document to generate one or more boxes that conform to the CSS Box Model. The layout of generated boxes depends on several properties such as − Dimensions − Width and height of the element Type − Block-level, inline-level, or inline-block Positioning − Normal flow, absolute, relative, or float Document tree relationships − ...
Read MoreThe :last-child Pseudo-class in CSS
The CSS :last-child pseudo-class selects an element that is the last child element of its parent. This powerful selector allows you to apply specific styles to the final element in a group without adding additional classes or IDs. Syntax selector:last-child { /* CSS declarations */ } Example 1: Styling Table Columns The following example demonstrates how to style the last column of a table with a right border − table { margin: ...
Read MoreDifferent 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 More