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
      Data Types

      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.

      Data Types

      
      CSS data types define the types of values that can be used for various CSS properties. Each CSS property expects a specific type of value, and understanding these data types is essential for properly styling and formatting web content.
      The types listed below are the most common, however it is not a complete list of all types defined in any CSS specification.

      Syntax

      selector {
         property: <unit-data-type>;
      }
      CSS syntax uses a keyword between the inequality signs "<" and ">" to indicate data types.

      Textual Data Types

      These types include keywords, identifiers, strings, and URLs.

      Pre-defined Keywords

      Represents a predefined keyword that is specific to the property it's used with (e.g., auto, inherit, none).

      CSS-wide keywords

      The table given below lists all the CSS-wide keywords:
      Property
      Description
      <custom-ident>
      A user-defined identifier, such as a name given with the grid-area property.
      <dashed-ident>
      Using CSS Custom Properties, a <custom-ident> begin with two dashes.
      <string>
      A string that has been quoted, such as the value for the content property.
      url()
      A reference to a resource, such the background-image value.

      Numeric Data Types

      These data types represent quantities, indexes, and positions. The following table lists all the numeric data types:
      Property
      Description
      <integer>
      One or more decimal units (0–9).
      <number>
      Real numbers may include a fractional component, such as 1 or 1.54.
      <dimension>
      A numerical value that includes a unit, such as 23px or 15em.
      <percentage>
      A numerical value that includes a percentage symbol, such as 15%.
      <ratio>
      A ratio is represented as <number> / <number>.
      <flex>
      CSS Grid Layout introduces a flexible length, represented by a <number> with the fr unit attached for grid track sizing.

      Quantities

      Distance and other quantities are defined using these types. The following table lists all the quantities:
      Property
      Description
      <length>
      Lengths are a dimension that refers to distances.
      <angle>
      Angles are represented as a <dimension> with deg, grad, rad, or turn units, and used in properties such as linear-gradient().
      <time>
      Duration units are represented as a <dimension> with a s or ms unit.
      <resolution>
      This is a <dimension> with the unit identifier dpi, dpcm, dppx, or x.

      Combinations of Types

      CSS properties that accept both a dimension and a percentage value fall in this category. The percentage value will be converted to a quantity relative to the allowable dimension. Properties that take both a percentage and a dimension will use one of the following types:
      Property
      Description
      <length-percentage>
      A type that can take a a length or a percentage value.
      <angle-percentage>
      A type that can take a a angle or a percentage value.
      <time-percentage>
      A type that can take a a time or a percentage value.

      Color

      Color related properties define the <color> data type and additional types related to colors.
      The following table lists all the color related data types:
      Property
      Description
      <color>
      A color represented as a keyword or a numerical value.
      <color-interpolation-method>
      Determines the color space used when creating a transition between different <color> values.
      <hex-color>
      Describes the hexadecimal color syntax of an sRGB color using the primary color components (red, green, blue) denoted as hexadecimal numbers, along with its transparency.
      <system-color>
      Commonly linked to the default color selections for different components on a webpage.
      <alpha-value>
      Represents the transparency of a color. The value can be either a <number> (0 is fully transparent, 1 is fully opaque) or a <percentage> (0 is fully transparent, 100% is fully opaque).
      <hue>
      Define the <angle> of the color wheel for the <absolute-color-functions> component using units such as, deg, grad, rad, turn, or a unitless number (interpreted as deg).
      <hue-interpolation-method>
      Determines the algorithm that is used for interpolation between hue values. This method specifies how to find a midpoint between two hue values based on a color wheel. It is a component of the <color-interpolation-method> data type.
      <named-color>
      Specified as a <ident> in syntax, depicts colors by names such as red, blue, black, or light green.

      Images

      CSS Images Specification defines image-related data types, such as gradients. The following table lists all the images related data types:
      Property
      Description
      <image>
      A URL pointing to an image or color gradient.

      2D Positioning

      The following table lists all the 2D Positioning related data types:
      Property
      Description
      <position>
      Determines the position of an object region by providing a keyword value, such as top or left, or a <length-percentage>.

      Calculation Data Types

      CSS math functions use these data types in calculations. The following table lists all the calculation data types:
      Property
      Description
      <calc-sum>
      A calculation is a series of calculated values separated by addition (+) and subtraction (-) operators. This data type requires that both values contain units.
      <calc-constant>
      Defines CSS keywords for numeric constants such as e and π, which can be used in CSS math functions.

      Display

      The table given below lists all the display related data types:
      Property
      Description
      <display-box>
      Determines if an element creates display boxes or not.
      <display-inside>
      Determines the inner display of an element, which specifies the formatting context type, for a non-replaced element.
      <display-internal>
      Determines the internal display values, which have relevance only to that particular layout model.
      <display-legacy>
      A single-keyword syntax has been used for display property in CSS 2, which required separate keywords for block-level and inline-level variants of the same layout model.
      <display-listitem>
      The keyword list-item makes the element to generate a ::marker pseudo-element with the content that is specified by the list-style properties, along with a main box of the specified type for its own contents.
      <display-outside>
      An element's outer display type, which is essential in flow layout, is determined by the <display-outside> keywords.

      Other Data Types

      The table given below lists some more data types:
      Property
      Description
      <absolute-size>
      Defines absolute font size in the font shorthand and font-size properties.
      <basic-shape>
      Defines different shapes used for properties such as clip-path, shape-outside, and offset-path.
      <blend-mode>
      Specifies the color scheme that should be used when elements overlap.
      <box-edge>
      Defines different box edges, such as content-box and border-box.
      <easing-function>
      Control the speed of a transition or animation between two states of an element.
      <filter-function>
      Signifies a graphical effect, which changes the appearance of an input image.
      <generic-family>
      Signifies the keyword values for generic font families.
      <gradient>
      Demonstrates a progressive transition between two or more colors.
      <ident>
      Signifies an arbitrary string that is used as an identifier.
      <line-style>
      Specifying how a line appears or doesn't appear in a certain context are included in the <line-style> enumerated value type.
      <overflow>
      The keyword values used in relation to the shorthand overflow property and the longhand overflow-block, overflow-inline, overflow-x, and overflow-y properties are indicated by the enumerated value type <overflow>.
      <relative-size>
      Define a relative size to the calculated size of the parent element.
      <transform-function>
      The transformation functions are responsible for rotating, scaling (resizing), skewing (distorting), or moving an element in two-dimensional (2D) and three-dimensional (3D) space.