CSS Types

CSS (Cascading Style Sheets) utilizes various types of values and units to define the styles applied to HTML elements. Understanding these types is crucial for creating precise and responsive designs. This guide explores the different types of CSS values, providing comprehensive explanations and practical code examples.

1. CSS Units

CSS units specify the measurement of property values. They are categorized into absolute and relative units, each serving different purposes based on design requirements.

a. Absolute Units

Absolute units are fixed and do not change relative to other elements or the viewport. They are best used when precise control over the layout is required.

/* Absolute Units */
.box {
    width: 200px;       /* Pixels */
    height: 5cm;        /* Centimeters */
    font-size: 12pt;    /* Points */
    margin: 1in;        /* Inches */
    border-width: 0.5mm;/* Millimeters */
}
        

Example:

This box uses absolute units for its dimensions.
        

b. Relative Units

Relative units are scalable and adapt based on other values like font size or viewport dimensions. They are ideal for responsive designs.

/* Relative Units */
.container {
    width: 80%;          /* Percentage of parent element */
    height: 50vh;        /* 50% of viewport height */
    font-size: 1.5em;    /* 1.5 times the font size of the parent */
    padding: 2rem;       /* 2 times the root element's font size */
    margin: 5vw;         /* 5% of viewport width */
}
        

Example:

This container uses relative units for its dimensions.
        

Relative units adapt based on the context in which they are used, making them highly effective for creating flexible and responsive layouts.

Back to Table of Contents

2. CSS Color Types

Colors in CSS can be defined using various formats, each offering different levels of control and flexibility.

a. Named Colors

CSS provides a set of predefined color names that can be used directly.

/* Named Colors */
.text-primary {
    color: blue;
}

.background-secondary {
    background-color: lightgray;
}
        

This text is blue.
This div has a light gray background.
        

b. Hexadecimal Colors

Hex codes represent colors using a combination of six hexadecimal digits, preceded by a hash (#).

/* Hexadecimal Colors */
.header {
    background-color: #3498db; /* Blue */
}

.footer {
    color: #2ecc71; /* Green */
}
        

This header has a blue background.
This footer text is green.
        

c. RGB and RGBA

The rgb() function defines colors using red, green, and blue components. The rgba() function adds an alpha channel for opacity.

/* RGB and RGBA Colors */
.button {
    background-color: rgb(52, 152, 219); /* Blue */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
}

.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
        

Click Me
This overlay is semi-transparent.
        

d. HSL and HSLA

The hsl() function defines colors using hue, saturation, and lightness. The hsla() function adds an alpha channel for opacity.

/* HSL and HSLA Colors */
.card {
    background-color: hsl(120, 100%, 50%); /* Bright green */
    padding: 20px;
    border-radius: 10px;
    color: white;
}

.banner {
    background-color: hsla(240, 100%, 50%, 0.3); /* Semi-transparent blue */
    padding: 15px;
    border-radius: 5px;
}
        

This card has a bright green background.
This banner has a semi-transparent blue background.
        

e. CurrentColor and Transparent

currentColor refers to the current value of the color property, while transparent makes the element fully transparent.

/* currentColor and Transparent */
.alert {
    color: red;
    border: 2px solid currentColor;
    background-color: transparent;
    padding: 10px;
}
        

This alert has a red border and transparent background.
        

Using currentColor ensures consistency between text and border colors, while transparent allows underlying elements or backgrounds to show through.

Back to Table of Contents

3. CSS Functions

CSS functions perform specific operations and return values that can be used within declarations. They add dynamic capabilities to your stylesheets.

a. calc()

The calc() function allows you to perform calculations to determine property values, enabling more flexible layouts.

/* calc() Function */
.container {
    width: calc(100% - 50px);
    height: calc(100vh - 100px);
    padding: calc(2em + 10px);
    margin: calc(5% - 20px);
}
        

This container uses calc() for its dimensions.
        

The calc() function enables complex sizing by combining different units, providing greater control over element dimensions.

b. var()

The var() function retrieves the value of a CSS variable, allowing for reusable and maintainable styles.

/* CSS Variables */
:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --padding-large: 20px;
}

.button {
    background-color: var(--primary-color);
    color: white;
    padding: var(--padding-large);
    border: none;
    border-radius: 5px;
}

.button-secondary {
    background-color: var(--secondary-color);
}
        

Primary Button
Secondary Button
        

Using CSS variables with the var() function promotes consistency and simplifies updates across your stylesheet.

c. rgba()

The rgba() function defines colors with red, green, blue, and alpha (transparency) components, allowing for semi-transparent elements.

/* rgba() Function */
.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    color: white;
    padding: 20px;
    border-radius: 10px;
}
        

This overlay uses rgba() for a semi-transparent background.
        

The rgba() function is particularly useful for creating overlays, shadows, and other effects that require transparency.

Back to Table of Contents

4. CSS Keywords

CSS keywords are predefined values that can be used as property values, offering a standardized way to apply certain styles.

a. Global Keywords

Global keywords can be used with any CSS property. They include:

/* Global Keywords */
inherit        /* Inherits the value from its parent */
initial        /* Sets the property to its default value */
unset          /* Resets the property to its natural value */
revert         /* Reverts the property to the value established by the user-agent stylesheet */
        

Example:

/* Using global keywords */
.child {
    color: inherit;    /* Inherits color from parent */
    margin: initial;   /* Resets margin to default */
    padding: unset;    /* Unsets padding */
}
        

    Parent Element
    
Child Element inherits color, resets margin and unsets padding.

        

b. Property-Specific Keywords

Some properties have specific keywords that define their behavior.

/* Display Property Keywords */
.display-block {
    display: block;
}

.display-inline {
    display: inline;
}

.display-none {
    display: none;
}
        

This div is displayed as block.
This span is displayed as inline.
This paragraph is not displayed.
        

Using keywords like block, inline, and none allows you to control the rendering and visibility of elements efficiently.

Back to Table of Contents

5. CSS URLs and Data URIs

URLs in CSS are used to link external resources such as images, fonts, and other media. Data URIs allow embedding small files directly into CSS.

a. URL Function

The url() function specifies the location of an external resource.

/* URL Function */
.background-image {
    background-image: url('images/background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}
        

    This div has a background image.

        

b. Data URI

Data URIs allow embedding small files directly within CSS, reducing HTTP requests.

/* Data URI */
.icon {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
    AAAFCAYAAACNbyblAAAAHElEQVQI12P4
    //8/w38GIAXDIBKE0DHxgljNBAAO
    9TXL0Y4OHwAAAABJRU5ErkJggg==');
    width: 20px;
    height: 20px;
    display: inline-block;
    background-size: contain;
}
        

Data URIs are particularly useful for embedding small icons or images directly into your CSS, improving load times by reducing external requests.

Back to Table of Contents

6. CSS Strings

Strings in CSS are sequences of characters used for values like font names, content in pseudo-elements, and URLs.

a. Font Family Strings

Font names that contain spaces or special characters must be enclosed in quotes.

/* Font Family Strings */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
        

<p>This paragraph uses a font family defined with a string.</p>
        

b. Content in Pseudo-elements

Strings are used with the content property in pseudo-elements like ::before and ::after.

/* Content with Strings */
.title::before {
    content: "★ ";
    color: gold;
}

.title::after {
    content: " ★";
    color: gold;
}
        

<h2 class="title">Featured</h2>
        

c. URLs in CSS

Strings are also used to define URLs within functions like url().

/* URL in Strings */
.logo {
    background-image: url("images/logo.png");
    width: 100px;
    height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
}
        

<div class="logo"></div>
        

Strings are essential for defining textual values within CSS, enhancing the flexibility and expressiveness of your styles.

Back to Table of Contents

7. CSS Numbers

Numbers in CSS represent numerical values without units, often used in combination with units or functions.

a. Unitless Numbers

Some CSS properties accept unitless numbers, which are interpreted differently based on the property.

/* Unitless Numbers */
.line-height {
    line-height: 1.5; /* Multiplier of the font size */
}

.opacity {
    opacity: 0.8; /* Opacity level */
}
        

<p class="line-height">This paragraph has a line height of 1.5.</p>
<div class="opacity">This div has an opacity of 0.8.</div>
        

b. Integers and Decimals

Numbers can be integers or decimals, providing flexibility in defining precise values.

/* Integers and Decimals */
.box {
    width: 100px;     /* Integer */
    height: 50.5px;   /* Decimal */
}
        

<div class="box">This box has integer and decimal dimensions.</div>
        

Numbers in CSS allow for precise control over various properties, enhancing the detail and quality of your designs.

Back to Table of Contents

8. CSS Lists

CSS lists are used to define multiple values within a single property, enabling more complex styling.

a. Shorthand Properties with Lists

Shorthand properties can accept multiple values separated by spaces or commas.

/* Shorthand Properties with Lists */
.border {
    border: 2px solid red;
}

.margin {
    margin: 10px 20px 30px 40px; /* top, right, bottom, left */
}

.background {
    background: url('images/bg.jpg') no-repeat center center / cover;
}
        

<div class="border">This div has a red border.</div>
<div class="margin">This div has customized margins.</div>
<div class="background">This div has a background image.</div>
        

b. Lists in Functions

Functions like linear-gradient() accept lists of values to create complex effects.

/* Lists in Functions */
.gradient {
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
        

<div class="gradient">This div has a rainbow gradient background.</div>
        

Lists enable the combination of multiple values within single properties, allowing for more intricate and dynamic styling.

Back to Table of Contents

9. CSS Time Units

Time units in CSS are used to define durations for transitions, animations, and delays.

a. Seconds and Milliseconds

The most common time units are seconds (s) and milliseconds (ms).

/* Time Units */
.transition {
    transition: background-color 0.5s ease;
}

.animation {
    animation: fadeIn 2s forwards;
}
        

<button class="transition">Hover Over Me</button>
This div fades in over 2 seconds.
        

Time units allow for precise control over the timing of dynamic effects, enhancing the interactivity and responsiveness of web elements.

Back to Table of Contents

10. CSS Angle Units

Angle units are used in properties that require directional values, such as gradients and transforms.

a. Degrees, Gradians, Radians, and Turns

CSS supports multiple angle units:

/* Angle Units */
.rotation-degrees {
    transform: rotate(45deg);
}

.rotation-gradients {
    background: linear-gradient(90grad, red, blue);
}

.rotation-radians {
    transform: rotate(3.1416rad);
}

.rotation-turns {
    transform: rotate(0.25turn);
}
        

<div class="rotation-degrees">Rotated by 45 degrees.</div>
<div class="rotation-gradients">Gradient at 90 gradians.</div>
<div class="rotation-radians">Rotated by π radians.</div>
<div class="rotation-turns">Rotated by 0.25 turns.</div>
        

Angle units provide flexibility in defining rotational values, allowing for precise and varied directional styling.

Back to Table of Contents

11. CSS Frequency Units

Frequency units are used in properties related to sound and radio frequencies.

a. hertz (Hz) and kilohertz (kHz)

The Hz and kHz units measure frequency in hertz and kilohertz respectively.

/* Frequency Units */
.sound-effect {
    sound-frequency: 440Hz; /* A4 note */
}

.radio-wave {
    wave-frequency: 100kHz;
}
        

Sound frequency: 440Hz (A4 note)
Radio wave frequency: 100kHz
        

Frequency units are specialized and primarily used in multimedia and communication-related CSS properties.

Back to Table of Contents

12. CSS Resolution Units

Resolution units measure the density of pixels in images and displays, affecting the clarity and sharpness of visuals.

a. dots per inch (dpi), dots per centimeter (dpcm), and dots per pixel (dppx)

Common resolution units include:

/* Resolution Units */
.image-high-res {
    background-image: url('images/high-res.png');
    background-size: 300px 300px;
    background-repeat: no-repeat;
    background-resolution: 300dpi;
}

.image-standard-res {
    background-image: url('images/standard-res.png');
    background-size: 150px 150px;
    background-repeat: no-repeat;
    background-resolution: 72dppx;
}
        

High Resolution Image
Standard Resolution Image
        

Resolution units are essential for optimizing images for different display densities, ensuring visual fidelity across various devices.

Back to Table of Contents

Conclusion

CSS types encompass a wide range of value formats and units that provide the flexibility and precision needed for effective web design. This guide has covered the fundamental types, including units, colors, functions, keywords, URLs, strings, numbers, lists, time units, angle units, frequency units, and resolution units.

By mastering these CSS types, you can create more dynamic, responsive, and visually appealing web pages. Continue exploring advanced CSS concepts and best practices to further enhance your styling capabilities and build sophisticated web interfaces.

Back to Table of Contents