- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS - unset
The CSS keyword unset, when applied to a property, sets it to the inherited value, if the property is naturally inherited from its parent; else to the initial value, in case of absence of inheritance.
The keyword unset can be applied to any CSS property, including the CSS shorthand property all.
CSS unset - Basic Example
In the following example, the CSS keyword unset is applied to the margin-top, font-size, and color properties for the elements h1, p, and ul.
This keyword resets these properties to their inherited values, allowing these elements to inherit or fall back to the default styles defined by the browser or parent elements.
<html> <head> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; color:red; } header { background-color: #333; color: white; padding: 10px; text-align: center; } nav { background-color: #555; color: white; padding: 10px; text-align: center; } .content { margin: 20px; padding: 20px; background-color: #fff; border: 1px solid #ddd; } .sidebar { width: 150px; background-color: #eee; padding: 10px; float: left; } .main-content { margin-left: 220px; } .footer { clear: both; background-color: #333; color: white; text-align: center; padding: 10px; } h1, p, ul { margin-top: unset; font-size: unset; color: unset; } ul { list-style-type: none; padding: 0; display: flex; } li { margin: 10px; } </style> </head> <body> <header> <h1>Header</h1> </header> <nav> <ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </nav> <div class="content"> <div class="sidebar"> <h2>Sidebar</h2> <p>This is a sidebar content.</p> </div> <div class="main-content"> <h2>Main Content</h2> <p>This is the main content area with various elements.</p> </div> </div> <div class="footer"> <p>Footer</p> </div> </body> </html>
Advertisements
To Continue Learning Please Login
Login with Google