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
      @ Rules

      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.

      @ Rules

      In CSS, at-rules are special instructions or statements that begin with the "@" symbol. They are used to control or modify the behavior of the stylesheet and are typically used for tasks such as defining media queries, importing external stylesheets, or specifying font faces.
      At-rules are a way to extend and enhance the capabilities of CSS beyond basic selectors and property-value pairs.
      An at-rule begins with at (@) sign, followed by an identifier and further includes everything upto the next semicolon (;) or next CSS block.

      Syntax

      /* General structure */
      @identifier (RULE);

      Types of @ Rules

      Regular

      CSS provides different regular at-rules, based on the identifier and each has a different syntax.
      • @charset: Specifies the character encoding of an external stylesheet.
      • @import: Used to import an external CSS file into the current stylesheet.
      • @namespace: Used to declare and define XML namespaces within a CSS stylesheet.

      Nested

      A subset of nested statements that serve as both standalone style sheet statements and components within conditional group rules.
      • @media: Content of conditional group rule gets applied, if the device meets the criteria of the condition defined using media query.
      • @supports: Content of conditional group rule gets applied, if the given condition is met by the browser.
      • @page: Defines the layout of printed pages.
      • @font-face: Defines custom fonts to be used in a web page.
      • @keyframes: Defines the aspect of intermediate steps in a CSS animation sequence.
      • @counter-style: Defines the different custom counter styles that are not predefined.
      • @font-feature-values: Defines the common names in font-variant-alternates for feature activated in OpenType. It deals with the usage of alternate glyphs and these glyphs are defined in @font-feature-values
      • @property: Defines the usage of custom properties and variables.
      • @layer: Defines a layer and sets the order of precedence, when there are multiple cascade layers.

      CSS @ Rules - @page Example

      Here is an example of usage of @page:
      <html>
      <head>
      <style>
         @page :first {
            margin-left: 80%;
            margin-top: 80%;
      }
      
      p {
         page-break-after: always;
      }
      </style>
      </head>
      <body>
         <p>Page One.</p>
         <p>Page Two.</p>
         <button>Print</button>
      
         <script>
            document.querySelector("button").addEventListener("click", () => {
            window.print();
            });
         </script>
      </body>
      </html>

      CSS @ Rules - @keyframes Example

      Here is an example of usage of @keyframes:
      <html>
      <head>
      <style>
         p {
            animation-duration: 3s;
            animation-name: slidein;
         }
      
         @keyframes slidein {
            from {
               margin-left: 100%;
               width: 300%;
            }
      
            to {
               margin-left: 0%;
               width: 100%;
            }
         }
      </style>
      </head>
      <body>
         <p>
            The text appears from right to left
            </p>
      </body>
      </html>

      CSS @ Rules - @property Example

      Here is an example of usage of @property:
      <html>
      <head>
      <style>
         @property --item-size {
            syntax: "<percentage>";
            inherits: true;
            initial-value: 40%;
         }
      
         .container {
            display: flex;
            height: 100px;
            border: 3px dotted black;
      
         /* set custom property values on parent */
            --item-size: 50%;
            --item-color: tomato;
            --item-border: 5px solid green;
         }
      
         /* use custom properties to set item size and background color */
         .item {
            width: var(--item-size);
            height: var(--item-size);
            border: var(--item-border);
            background-color: var(--item-color);
         }
      
         /* set custom property values on element itself */
         .second {
            --item-size: initial;
            --item-color: inherit;
         }
      </style>
      </head>
      <body>
         <div class="container">
            <div class="first item">First Item</div>
            <div class="second item">Second Item</div>      
         </div>
      
         <script>
            window.CSS.registerProperty({
            name: "--item-color",
            syntax: "<color>",
            inherits: false,
            initialValue: "peachpuff",
         });
         </script>
      </body>
      </html>

      CSS @ Rules - Rule List

      The table given below lists all the CSS @ Rules:
      @Rule
      Example
      @charset
      @charset "UTF-8";
      @container
      @container (width > 400px) { h1 {font-size: 2em;} }
      @counter-style
      @counter-style sample {}
      @font-face
      @font-face { font-family: "CustomFont"; src: url("customfont.woff2") format("woff2"); }
      @font-feature-value
      @font-feature-values "CustomFont" {@swash { fancy: 2; }}
      @font-palette-values
      @font-palette-values One { font-family: "Bungee Spice";}
      @import
      @import ur();
      @keyframes
      @keyframes sample-slide { from { transform: translateY(100%) } }
      @layer
      @layer sample-layer{ .margin-lg { margin: 5px; } }
      @media
      @media screen and (max-width: 600px) {}
      @namespace
      @namespace svg url();
      @page
      @page { size: 5in 6in; margin-left: 4in }
      @property
      @property sample-property { rules }
      @supports
      @supports (transform-origin: 10% 10%) {}