Scribd
Upload
3 views12 pages

21 - Properties - Single Use Properties

The document discusses single-use CSS properties that are important yet rarely utilized in code, suggesting they could be included in a reset.css file. It highlights properties such as line-height, letter-spacing, pointer-events, and white-space, explaining their specific use cases and syntax. The author emphasizes that while these properties are not critical, they contribute to a polished and professional appearance in web design.

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
3 views12 pages

21 - Properties - Single Use Properties

The document discusses single-use CSS properties that are important yet rarely utilized in code, suggesting they could be included in a reset.css file. It highlights properties such as line-height, letter-spacing, pointer-events, and white-space, explaining their specific use cases and syntax. The author emphasizes that while these properties are not critical, they contribute to a polished and professional appearance in web design.

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/ 12

Learn CSS By Use Cases

ebook by Joe Harrison

Properties
Single Use

Properties
Featuring
line-height letter-spacing pointer-events
Single Use Properties
Properties

Intro

These are properties that in my opinion, have


just a single or very minimal number of use
cases. Each one is equally important to know,
but you will find that most are used rarely
throughout your CSS code. I believe that many
could reside in your reset.css file.

Syntax

All of the properties have a very simple syntax,


accepting single pre-defined keywords or
lengths. Keywords will be specific to the
property being used. The line-height property
accepts a floating decimal which can exceed 1.
Single Use Properties
Properties

Special Power

Although these properties are not critical


requirements when building websites, they
assist massively in giving your work that
professional finish. Along with the hyphens
property there are many things you can do with
paragraphs of text in CSS - you’ll find all of
these in my source code.

Tips

Like I previously mentioned, try adding some of


these to your CSS reset. I like to reset
paragraphs to line-height: 1.375 (137.5%),

this height always seems to look nice to me.


user-select
Prevent accidental selection

Add cursor: default too


for that professional look

This alert text has no reason to be selected by the user


line-height
Apply clean spacing to text

line-height: 1 .line-height

decimal fraction
that can exceed 1
letter-spacing
Styling capitalized text

MORE INFO MORE INFO

letter-spacing: normal Looks cleaner

Negative lengths are allowed too


pointer-events
Click through elements

You can
still click
the button
through
.ribbon

Do NOT use this to make


elements disabled
white-space
Force text formatting

Let’s
Let’s Go!
Go!

Prevent text from wrapping

Useful when default wrapping isn’t needed


vertical-align
Align table cell content

My only use case for it nowadays is aligning text or table cell


content. This is mainly due to the introduction of flexbox
hyphens
Format text in small spaces

Counterprogramm Counterprogramm- Hyphen

ing is the ing is the


scheduling of scheduling of
programs by programs by

Useful in paragraphs when dealing with horrible long words


display: block
Convert inline elements to block

span.badge

Empty span tags will not appear unless


converted from inline to block
Single Use
Properties

Knowledge Gained

Single use properties will add professional

finishing touches to your work

We apply clean and consistent spacing to

text blocks by setting line-height

Do not use pointer-events to make

elements disabled

We can force text to display always on

one line using the white-space property

Align table cell content with vertical-align

You might also like