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
      Functions

      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.

      Value Functions

      CSS value functions allow you to generate values for CSS properties dynamically. These functions take parameters and return a value that can be used in place of a static value.

      Syntax

      selector {
         property: function([argument]? [, argument]!);
      }
      • The function name appears first in the value syntax, followed by a opening parenthesis (. The argument(s) come next, and a closing parenthesis ) completes the function.
      • Multiple parameters are accepted by functions, and their formatting is the same as that of CSS property values.
      • Though optional, whitespace is permitted inside parenthesis. Multiple arguments are separated by commas in certain functional notations and by spaces in others.

      Transform Functions

      The CSS data type called <transform-function> represents visual transformations and is employed as a value within the transform property.

      Translate Functions

      Following table lists translate functions:
      Functions
      Description
      translateX()
      Translates an element horizontally.
      translateY()
      Translates an element veritcally.
      translateZ()
      Translates an element along the z-axis.
      translate()
      Translates an element on the 2D plane.
      translate3d()
      Translates an element in 3D space.

      Rotation Functions

      Following table lists rotation functions:
      Functions
      Description
      rotateX()
      Rotates an element around the horizontal axis.
      rotateY()
      Rotates an element around the vertical axis.
      rotateZ()
      Rotates an element around the z-axis.
      rotate()
      Rotates an element around a fixed point on the 2D plane.
      rotate3d()
      Rotates an element around a fixed axis in 3D space.

      Scaling Functions

      Following table lists scaling functions:
      Functions
      Description
      scaleX()
      Scales an element up or down horizontally.
      scaleY()
      Scales an element up or down vertically.
      scaleZ()
      Scales an element up or down along the z-axis.
      scale()
      Scales an element up or down on the 2D plane.
      scale3d()
      Scales an element up or down in 3D space.

      Skew Functions

      Following table lists skew functions:
      Functions
      Description
      skewX()
      Skews an element in the horizontal direction.
      skewY()
      Skews an element in the vertical direction.
      skew()
      Skews an element on the 2D plane.

      Matrix Functions

      Following table lists matrix functions:
      Functions
      Description
      matrix()
      Describes a homogeneous 2D transformation matrix.
      matrix3d()
      Describes a 3D transformation as a 4×4 homogeneous matrix.

      Perspective Functions

      Following table lists perspective functions:
      Functions
      Description
      perspective()
      Sets the distance between the user and the z=0 plane.

      Math Functions

      Mathematical expressions can be used in CSS to represent numeric values using math functions.

      Basic Arithmetic Functions

      Following table lists basic arithmetic functions:
      Function
      Description
      calc()
      Performs basic arithmetic calculations on numerical values.

      Comparision Functions

      Following table lists comparision functions:
      Function
      Description
      min()
      Determines the minimum value from a given set of values.
      max()
      Determines the maximum value from a given list of values.
      clamp()
      Calculates the central of a minimum, central, and maximum values.

      Stepped Value Functions

      Following table lists stepped value functions:
      Function
      Description
      round()
      Calculates a rounded number based on a rounding strategy.

      Trignometric Functions

      Following table lists trignometric functions:
      Function
      Description
      sin()
      Calculates the trigonometric sine of a number.
      cos()
      Calculates the trigonometric cosine of a number
      tan()
      Calculates the trigonometric tangent of a number.
      asin()
      Calculates the trigonometric inverse sine of a number.
      acos()
      Calculates the trigonometric inverse cosine of a number.
      atan()
      Calculates the trigonometric inverse tangent of a number.
      atan2()
      Calculates the trigonometric inverse tangent of two-numbers in a plane.

      Filter Functions

      The CSS data type <filter-function> denotes a graphical effect capable of changing the look of an input image. It's used within the filter and backdrop-filter properties.
      Function
      Description
      blur()
      Increases the image gaussian blur.
      brightness()
      Brightens or darkens an image..
      contrast()
      Increases or decreases the image contrast.
      drop-shadow()
      Applies a drop shadow behind an image.
      grayscale()
      Converts an image to grayscale.
      hue-rotate()
      Changes the overall hue of an image.
      invert()
      Inverts the colors of an image.
      opacity()
      Adds transparency to an image.
      saturate()
      Changes the overall saturation of an image.
      sepia()
      Increases the sepia of an image.

      Color Functions

      The CSS data type <color> defines various ways to represent colors.
      Function
      Description
      rgb()
      Specifies a given color according to its red, green, blue and alpha (transparency) components.
      hsl()
      Specifies a given color according to its hue, saturation, lightness and alpha (transparency) components.
      hwb()
      Specifies a given color according to its hue, whiteness and blackness components.
      lch()
      Specifies a given color according to its lightness, chroma and hue components.
      oklch()
      Specifies a given color according to its lightness, chroma, hue and alpha (transparency) components.
      lab()
      Specifies a given color according to its lightness, a-axis distance and b-axis distance in the lab colorspace.
      oklab()
      Specifies a given color according to its lightness, a-axis distance, b-axis distance in the lab colorspace and alpha (transparency).
      color()
      Specifies a particular, specified colorspace rather than the implicit sRGB colorspace
      color-mix()
      Mixes two color values in a given colorspace by a given amount.

      Image Functions

      The CSS data type <image> offers graphical representations of images or gradients.

      Gradient Functions

      Following table lists gradient functions:
      Function
      Description
      linear-gradient()
      Linear gradients transition colors progressively along an imaginary line.
      radial-gradient()
      Radial gradients transition colors progressively from a center point (origin).
      conic-gradient()
      Conic gradients transition colors progressively around a circle.
      repeating-linear-gradient()
      Is similar to linear-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.
      repeating-radial-gradient()
      Is similar to radial-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.
      repeating-conic-gradient()
      Is similar to conic-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.

      Image Functions

      Following table lists image functions:
      Function
      Description
      image-set()
      Picks the most appropriate CSS image from a given set, primarily for high pixel density screens.
      cross-fade()
      Blends two or more images at a defined transparency.
      paint()
      Defines an <image> value generated with a PaintWorklet.

      Counter Functions

      CSS counter functions can theoretically be used anywhere a <string> is available, however they are typically used in conjunction with the content property.
      Function
      Description
      counter()
      Returns a string representing the current value of the named counter if there is one.
      counters()
      Enables nested counters, returning a concatenated string representing the current values of the named counters, if there are any.

      Shape Functions

      The CSS data type <basic-shape> signifies a visual shape and is employed in properties such as clip-path, offset-path, and shape-outside.
      Function
      Description
      circle()
      Defines a circle shape.
      ellipse()
      Defines an ellipse shape.
      inset()
      Defines an inset rectangle shape.
      polygon()
      Defines a polygon shape.
      path()
      Accepts an SVG path string to enable a shape to be drawn.

      Reference Functions

      In order to reference a value defined elsewhere, the following functions are used as a value of properties.
      Function
      Description
      attr()
      Uses the attributes defined on HTML element.
      env()
      Uses the user-agent defined as environment variable.
      url()
      Uses a file from the specified URL.
      var()
      Uses the custom property value instead of any part of a value of another property.

      Grid Functions

      The following functions are used to define a CSS Grid.
      Function
      Description
      fit-content()
      Clamps a given size to an available size according to the formula min(maximum size, max(minimum size, argument)).
      minmax()
      Defines a size range greater-than or equal-to min and less-than or equal-to max.
      repeat()
      Represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern.

      Font Functions

      Alternate glyph usage is managed through the use of CSS font functions in combination with the font-variant-alternates property.
      Function
      Description
      stylistic()
      This function activates stylistic alternates for certain characters using a font-specific name associated with a number.
      styleset()
      This function activates stylistic alternatives for groups of characters. The parameter is a font-specific name associated with a number, such as ss02.
      character-variant()
      This function allows distinct stylistic variations for individual characters, unlike styleset(), which creates coherent glyphs for a character set.
      swash()
      This function activates swash glyphs with a font-specific name associated with a number, e.g. swsh 2 and cswh 2.
      ornaments()
      This function activates ornaments such as fleurons and dingbat glyphs using a font-specific name associated with a number, such as ornm 2.
      annotation()
      This function allows annotations such as circled digits or inverted characters using a font-specific name associated with a number, for example, nalt 2

      Easing Functions

      The values for transition and animation properties come from the following functions.
      Function
      Description
      linear()
      Easing function that interpolates linearly between its points..
      cubic-bezier()
      Easing function that defines a cubic Bézier curve.
      steps()
      Iteration along a specified number of stops along the transition, displaying each stop for equal lengths of time.