Teachnique
      CourseRoadmaps
      Login

      IntroductionSyntaxSelectorsInclusionMeasurement UnitsColorsBackgroundsFontsTextImagesLinksTablesBordersBorder BlockBorder InlineMarginsListsPaddingCursorOutlinesDimensionScrollbarsInline BlockDropdownsVisibilityOverflowClearfixFloatArrowsResizeQuotesOrderPositionHyphensHoverDisplayFocusZoomTranslateHeightHyphenate CharacterWidthOpacityZ-IndexBottomNavbarOverlayFormsAlignIconsImage GalleryCommentsLoadersAttr SelectorsCombinatorsRootBox ModelCountersClipWriting ModeUnicode-bidimin-contentAllInsetIsolationOverscrollJustify ItemsJustify SelfTab SizePointer EventsPlace ContentPlace ItemsPlace SelfMax Block SizeMin Block SizeMix Blend ModeMax Inline SizeMin Inline SizeOffsetAccent ColorUser Select

      GridGrid LayoutFlexboxVisibilityPositioningLayersPseudo ClassesPseudo Elements@ RulesText EffectsPaged MediaPrintingLayoutsValidationsImage SpritesImportantData Types

      TutorialRounded CornerBorder ImagesMulti BackgroundColorGradientsBox ShadowBox Decoration BreakCaret ColorText ShadowText2d transform3d transformTransitionAnimationMulti columnsBox SizingTooltipsButtonsPaginationVariablesMedia QueriesFunctionsMath FunctionsMaskingShapesStyle ImagesSpecificityCustom Properties

      IntroductionViewportGrid ViewMedia QueriesImagesVideosFrameworks

      Questions and AnswersQuick GuideReferencesColor ReferencesWeb browser ReferencesWeb safe fontsUnitsAnimation

      PX to EM converterColor Chooser & Animation

      Useful ResourcesDiscussion

      Feedback

      Submit request if you have any questions.

      Course
      All

      CSS Tutorial

      This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.

      All

      The shorthand CSS property all resets all properties of an element, with the exception of unicode bidi, direction and CSS custom properties.
      It can reset properties to their original or inherited values or to the values explicitly defined in another cascade layer or in the stylesheet origin.

      Constituent Properties

      This property serves as a concise representation for all CSS properties, with the exception of unicode bidi, direction and CSS custom properties.
      The all property is specified with one of the global CSS keyword values. It is important to note that none of these values impact the unicode bidi and direction properties.

      Possible values

      The following is the list of possible values of all properties.
      • initial - Indicates that all properties of the element should be reset to their initial values.
      • inherit - Indicates that all properties of the element should be set to their inherited values.
      • unset - Indicates that the element's properties should set to inherited values in case of default inheritance, else to their initial values.
      • revert - Specifies the behavior depending on the stylesheet origin associated with the declaration:
      • revert-layer - Specifies the rollback of all properties of the element to a previous cascade layer, if available. This is still in experimental phase.If no other cascade layer is available, the properties of the element are reset to the matching rule in the current layer, if available, or to an earlier style origin.

      Syntax

      all = initial | inherit | unset | revert | revert-layer

      CSS all - Basic Example

      • In the following example, the CSS all property is used to completely adjust all styling properties within specific elements.
      • The first <div> with id=custom1 showcases the default styling without the all property, while subsequent <div> elements (custom2, custom3, and custom4) demonstrate the impact of all: inherit;, all: initial;, and all: unset; respectively.
      <html>
      <head>
      <style> 
         html {
            font-size: x-large;
            color: #2c3e50; 
         }
         #custom1 {
            background-color: #ecf0f1;
            color: #e74c3c; 
            font-family: 'Verdana', sans-serif;
            font-weight: bold;
         }
         #custom2 {
            background-color: #ecf0f1; 
            color: #e74c3c; 
            font-family: 'Verdana', sans-serif;
            font-weight: bold;
            all: inherit;
         }
         #custom3 {
            background-color: #ecf0f1;
            color: #e74c3c; 
            font-family: 'Verdana', sans-serif;
            font-weight: bold;
            all: initial;
         }
         #custom4 {
            background-color: #ecf0f1; 
            color: #e74c3c; 
            font-family: 'Verdana', sans-serif;
            font-weight: bold;
            all: unset;
         }
      </style>
      </head>
      <body>
      <p>No all property:</p>
      <div id="custom1">Hello from a creative and innovative universe!</div>
      <p>all: inherit:</p>
      <div id="custom2">Discover the virtually endless possibilities in your head.</div>
      <p>all: initial:</p>
      <div id="custom3">Welcome the start of an interesting new trip.</div>
      <p>all: unset:</p>
      <div id="custom4">Use the power of new ideas to realize your full potential.</div>
      </body>
      </html>