Scribd
Upload
6 views15 pages

05 - Properties - Property Value Types

The document is an ebook by Joe Harrison that provides a comprehensive overview of CSS property value types, including lengths, colors, data types, keywords, and advanced functions. It discusses the usage of different units such as pixels, rem, percentages, and degrees, as well as color formats like hex and rgba. Additionally, it highlights the importance of understanding strings, numbers, pre-defined keywords, custom keywords, and functions in CSS for effective styling.

Uploaded by

kobolnikolas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views15 pages

05 - Properties - Property Value Types

The document is an ebook by Joe Harrison that provides a comprehensive overview of CSS property value types, including lengths, colors, data types, keywords, and advanced functions. It discusses the usage of different units such as pixels, rem, percentages, and degrees, as well as color formats like hex and rgba. Additionally, it highlights the importance of understanding strings, numbers, pre-defined keywords, custom keywords, and functions in CSS for effective styling.

Uploaded by

kobolnikolas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

Learn CSS By Use Cases

ebook by Joe Harrison

Syntax
Property

Value Types
Property Value Types
Syntax

Intro

Each CSS property value can include a


combination of keywords, lengths and functions.
Let’s run through what I consider to be the most
important to know.

Syntax Overview

pixel
rem
%
degree
hex
rgba
string
number
pre-defined keyword
custom keyword
function
fraction
Property Value Types
Syntax

Lengths

px

I use pixels for things that are tiny, like borders or


letter spacing. They are also useful if you want
something to maintain its size (like borders) if the
root font size is changed. When creating very
bespoke designs it can be easier to use pixels,
then convert them to rem later on.

rem

Rem or root em is my “go to” length for anything


with a fixed size. Websites will scale up and down
real nice if you predominantly use rems
throughout your work. When the root font size
changes (i.e. your website has different custom
fonts) everything will scale a lot more naturally. As
a guide, think of 1rem as about 16px.
Lengths
Pixel and rem

px (border)

rem (height) Home

rem (font-size)
Property Value Types
Syntax

Lengths (Continued)

More difficult to learn than px or rem in that the


percentage can either be of it’s parent, or of itself
(bounding box) - depending on the element,
function or context. The main use case for % is to
fill an area of space proportionally. % can be
negative in all contexts.

deg

This allows us to set the degrees of an angle. You


will see them mainly in functions when adding
linear gradient backgrounds or rotating shapes
with transform. Chrome has a cool feature to
toggle the angle in dev tools, like many other
property values.
Lengths
Percentages and degrees

% (width)

Home

deg (gradient)
Property Value Types
Syntax

Colors

hex

Hexadecimal or hex color values are supported in


all browsers and are universally used across a
variety of vector editing tools, such as Figma.
They are mainly used for solid colors that do not
require any opacity.

rgba

The rgba function allows us to define RGB (red,


green, blue) colors but also add a fourth
argument - opacity. This type of color is useful
when opacity/alpha is required - the most
common use case being light text on a colored
background.

Colors
hex and rgba

hex (card)
rgba (title)
rgba (subtitle)

All 255’s is white or 57%


Property Value Types
Syntax

Data Types

string

Strings represent a sequence of characters and


are used in a few CSS properties, like font-family
and content. They are usually reserved for values
that can contain a space character.

number

Number values can be whole integers or a


fractional value represented by a . character (e.g.
0.57). This decimal fraction would equate to 57%
if converted to a percentage. The alpha/opacity
value inside the rgba function we’ve just seen is a
good example of it’s usage. You will also find them
in properties such as - opacity, line-height and
flex.
Data Types
String and number

Custom font that


contains spaces

Decimal fraction (137.5%)


Property Value Types
Syntax

Keywords

Pre-defined Keywords

Throughout CSS we can use pre-defined


keywords that are defined by the property being
used. Unlike strings, they do not need to be
quoted and multiple word keywords are
separated by a dash character.

Custom Keywords

The main place we will see custom keywords is in


the CSS grid area property. Functionally, they are
the same as pre-defined keywords as they do not
require quotes and should be separated by a
dash character. However, the fundamental
difference is that they are defined by the user and
must be referenced in both the grid container and
grid items.
Keywords
Pre-defined and custom

.wrapper .menu-top

Pre-defined Custom

Pre-defined
Pre-defined

Custom keyword
Property Value Types
Syntax

Advanced

Functions

Arguably the most complex property value type


are functions. Functions that are available are
defined by the property being used - like
keywords, consider them contextual.
Syntactically they can be passed multiple
arguments made up of various value types.

Fractions

Like custom keywords, fractions are a part of


flexbox and grid. They allow us to set the
proportion of space an element takes up, inside a
flexbox row or grid column for example. Fractions
inside flexbox are a single integer (1) where as in
grid they are suffixed with an “fr” (1fr). They can
also be considered a CSS length.
Advanced
Functions and fractions

Function

Function

Function Each button


will be 1
Fraction
(33.33%)
Integer (repeat 3 times)
Property Value Types
Syntax

Knowledge Gained

CSS property values can include

keywords, lengths and functions

All lengths have the same format (1xx)

Strings are quoted and numbers can be

whole or a decimal fraction

All keywords should be separated by a

dash character

Functions can accept many different

arguments of various value types

You might also like