CSS - Data Types


Numeric Data Types


In CSS, integers are whole numbers without fractional parts. They can be positive or negative and are used for setting values such as lengths, widths, heights, and other numerical properties.

Examples of integer values in CSS

width: 100px;
margin-top: -20px;
z-index: 10;

In the above examples, 100, -20, and 10 are integer values used to set the width, margin-top, and z-index properties.

Floating-point numbers

Floating-point numbers, also known as real numbers, are numbers that contain a decimal point. They allow for more precise values compared to integers. In CSS, floating-point numbers are used when you need to set fractional values.

Examples of floating-point values in CSS

opacity: 0.5;
line-height: 1.2;
transform: scale(1.5);

In these examples, 0.5, 1.2, and 1.5 are floating-point numbers used to set the opacity, line-height, and transform scale properties.

Note that while integers are always written without a decimal point, floating-point numbers must include the decimal point, even if the fractional part is zero. For example, 1.0 is a valid floating-point number, while 1 is an integer.

Knowing the difference between integers and floating-point numbers in CSS helps you set accurate and precise values for various properties, allowing for greater control over the layout and look of your web pages.

Textual Data Types


In CSS, strings are textual data in single quotes ('') or double quotes (""). They are used for font families, URLs, content values, and other properties that need textual input.

CSS String Examples

font-family: "Arial", sans-serif;
content: 'Hello, world!';
background-image: url("images/background.jpg");

In the examples, "Arial", 'Hello, world!', and "images/background.jpg" are string values used to set the font-family, content, and background-image properties.

The choice between single and double quotes is a preference and consistency matter. If your string has quotes, use the other quote type to avoid escaping. For example, content: "It's a beautiful day!"; uses double quotes because the string has a single quote.


Identifiers in CSS are names for classes, IDs, and keyframes. They select and style elements or define reusable styles. Identifiers must follow these rules:

  • They can have letters (a-z, A-Z), digits (0-9), hyphens (-), and underscores (_).
  • They can't start with a digit or only have digits.
  • They are case-sensitive.

CSS Identifier Examples

#header { /* ID selector */ }
.button { /* Class selector */ }
@keyframes fade-in { /* Keyframe identifier */ }

In these examples, #header is an ID selector, .button is a class selector, and fade-in is a keyframe identifier.

Using identifiers lets you target elements and apply styles to them. For example, you can use a class selector to style all elements with a class or an ID selector to style a unique element with an ID. Keyframe identifiers define animations in CSS.

Understanding string and identifier data types in CSS is important for setting textual values, defining classes and IDs, and working with animations. They provide versatility and the ability to create specific selections for styling.

Color Data Types

Color Keywords

Color keywords are color names used to set colors in CSS. They let you set colors without using numbers. CSS supports 140 standard color keywords, such as red, blue, green, yellow, and more.

Example: CSS Color Keywords

color: red;
background-color: lightblue;
border-color: darkgreen;

In these examples, red, lightblue, and darkgreen are color keywords used to set the text color, background color, and border color.


RGB (Red, Green, Blue) is a color model that represents colors by setting the amount of red, green, and blue light needed to create a color. In CSS, RGB values are written as rgb(red, green, blue), where each value is a number between 0 and 255.

RGBA (Red, Green, Blue, Alpha) adds an alpha channel for opacity to the RGB color model. The alpha value is a number between 0 (fully transparent) and 1 (fully opaque).

Example: CSS RGB and RGBA

color: rgb(255, 0, 0);
background-color: rgba(0, 0, 255, 0.5);
border-color: rgb(0, 128, 0);

In these examples, rgb(255, 0, 0) represents red, rgba(0, 0, 255, 0.5) represents blue with 50% opacity, and rgb(0, 128, 0) represents green.


HSL (Hue, Saturation, Lightness) is a color model that represents colors using hue, saturation, and lightness values. In CSS, HSL values are written as hsl(hue, saturation, lightness), where hue is a degree on the color wheel (0 to 360), saturation is a percentage, and lightness is also a percentage.

HSLA (Hue, Saturation, Lightness, Alpha) adds an alpha channel for opacity to the HSL color model, similar to RGBA.

Example: CSS HSL and HSLA

color: hsl(0, 100%, 50%);
background-color: hsla(240, 100%, 50%, 0.7);
border-color: hsl(120, 100%, 25%);

In these examples, hsl(0, 100%, 50%) represents red, hsla(240, 100%, 50%, 0.7) represents blue with 70% opacity, and hsl(120, 100%, 25%) represents dark green.


Hexadecimal color values are another way to represent colors in CSS. They are written as #RRGGBB, where RR (red), GG (green), and BB (blue) are hexadecimal values between 00 and FF. Hexadecimal color values can also be written in short form as #RGB when each pair of values is the same.

Example: CSS Hexadecimal

color: #FF0000;
background-color: #00FF00;
border-color: #00F;

In these examples, #FF0000 represents red, #00FF00 represents green, and #00F is the short form for #0000FF, which represents blue.

Structural Data Types


In CSS, lengths specify sizes and distances for properties such as width, height, margin, padding, etc. Lengths can be expressed using different units, which can be either absolute or relative.

Absolute lengths are fixed units that are not dependent on any other factors. They are used when you need control over the size of an element. Some examples of absolute length units in CSS include:

Unit Description
px pixels, the most widely used absolute length unit
pt points, 1pt is equal to 1/72 of an inch
cm centimeters, 1cm is equal to 37.8 pixels at 96 DPI
mm millimeters, 1mm is equal to 1/10 of a centimeter
in inches, 1in is equal to 96 pixels at 96 DPI

Example of absolute length units in CSS

width: 200px;
padding: 10pt;
margin-left: 1cm;
border-width: 5mm;
height: 2in;

Relative lengths are units that are relative to other factors, such as the size of the containing element or the viewport size. They are useful for creating responsive designs that adapt to different screen sizes. Some examples of relative length units in CSS include:

Unit Description
em relative to the font-size of the element
rem relative to the font-size of the root element
vw viewport width, 1vw is equal to 1% of the viewport's width
vh viewport height, 1vh is equal to 1% of the viewport's height
% percentage, relative to the size of the containing element

Example of relative length units in CSS

font-size: 1.5em;
padding: 2rem;
width: 50vw;
height: 75vh;
margin-left: 10%;

Using the right length units in CSS is important for creating layouts that are both precise and adaptable to different devices and screen sizes.


Percentages in CSS are relative values that are based on the size of the containing element. They are often used for specifying widths, heights, margins, and paddings of elements, making them responsive to the size changes of their parent container.

Percentage values are written with the % symbol and represent a fraction of the containing element's property. For example, if an element has a width of 50%, it will occupy half of its parent's width.

Example of percentage values in CSS

width: 75%;
height: 50%;
margin-top: 10%;
padding-left: 5%;
font-size: 150%;

In these examples:

  • width: 75% sets the element's width to 75% of its parent's width.
  • height: 50% sets the element's height to 50% of its parent's height.
  • margin-top: 10% sets the element's top margin to 10% of its parent's width.
  • padding-left: 5% sets the element's left padding to 5% of its parent's width.
  • font-size: 150% sets the element's font size to 150% of its parent's font size.

Note that percentage values for margin and padding are always calculated based on the width of the containing block, even when applied to the height of an element.

Using percentage values in CSS allows for the creation of flexible and responsive layouts that can adapt to different container sizes. They are useful when combined with other CSS layout techniques, such as flexbox or CSS grid.

Special Data Types


In CSS, URLs reference external resources, such as images, fonts, and stylesheets. URLs are specified using the url() function, which takes a string value representing the location of the resource.

Example: Background Image URL

background-image: url("images/background.jpg");

Example: Font Face URL

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff');

The background-image property is set using a URL value pointing to an image file located in the "images" directory.

The @font-face rule uses URLs to specify the locations of web font files in different formats (WOFF2 and WOFF). This allows the browser to load the appropriate font file based on its support for each format.

URL values in CSS can be either absolute or relative. Absolute URLs contain the full path to the resource, including the protocol (e.g., https://), domain name, and file path. Relative URLs specify the location of the resource relative to the current document or stylesheet.

Using URLs in CSS enables you to include external resources, such as images and fonts, to improve the visual appearance of your web pages.


Functions in CSS calculate values or generate dynamic content. They are written with a function name followed by parentheses, which may contain one or more arguments. CSS provides several built-in functions for different purposes, such as color manipulation, mathematical calculations, and string manipulation.

Example: CSS Functions

color: rgba(255, 0, 0, 0.5);
width: calc(100% - 20px);
content: attr(data-tooltip);
transform: rotate(45deg);
  • The rgba() function specifies a color with an alpha channel for transparency.
  • The calc() function performs a mathematical calculation to determine the width of an element by subtracting 20 pixels from 100% of its parent's width.
  • The attr() function retrieves the value of the data-tooltip attribute and uses it as the content of a pseudo-element.
  • The rotate() function, which is part of the transform property, rotates an element by 45 degrees.

Other commonly used CSS functions include:

  • linear-gradient() and radial-gradient() for creating gradient backgrounds
  • min(), max(), and clamp() for responsive value calculations
  • url() for referencing external resources (as mentioned in the previous section)

Functions in CSS allow for more complex calculations, color manipulations, and content generation, expanding the possibilities of what you can achieve with CSS.