CSS - Keep it simple! 3 core concepts for a professional look
Tags: css, webdev, tutorial, beginners
Published: 2019-11-11 15:35:15

---
title: CSS - Keep it simple! 3 core concepts for a professional look
published: true
description: CSS - Keep it simple stupid! 3 core concepts for a professional look
tags: css, webdev, tutorial, beginners
---

You don't need much to create a professional, clean looking web application. Just follow these three principles and basic techniques in each category and you'll be well on your way to making professional looking user interfaces. Today, we will be looking at the following core concepts:

1. Spacing
2. Contrast
3. Subtlety

##Spacing
Spacing covers things like <code>padding</code>, <code>margin</code>, <code>line-height</code>, and <code>letter-spacing</code>. Giving your elements breathing room and space increases readability and cleanliness.

####Padding
The amount of padding works hand-in-hand with your chosen font size and line spacing. In this example, I am using <code>padding: 30px;</code>, but as you can see, each line of text seems a bit crowded.
{% codepen https://codepen.io/eddieherm/pen/jOOpZjV %}

####Line Height
The next example includes <code>line-height: 1.5em</code>. Notice how much more readable it is? If I used a smaller font size, then I would probably also reduce the line height, and possibly the padding.
{% codepen https://codepen.io/eddieherm/pen/NWWBYrb %}

##Contrast
Contrast is important for legibility and accessibility. It covers things like difference in color between text and background. It also covers differences in font weight: bold, semi-bold, thin.

####Color Contrast
Let's see what happens if we reduce the contrast between the text and background color.
{% codepen https://codepen.io/eddieherm/pen/XWWBEpY %}

Now let's meet in the middle between black (#000) and medium gray (#999). Below, I am using <code>color: #333;</code>, which reduces the contrast just slightly enough to help reduce eye strain.
 {% codepen https://codepen.io/eddieherm/pen/yLLqKMP %}

####Font weight contrast
The headline <code>h2</code> element provides a contrast between itself and the text below using font weighting.
{% codepen https://codepen.io/eddieherm/pen/LYYBdjo %}
Notice that there is extra space above the <code>h2</code>? It is there because by default, <code>h2</code> adds additional margins above and below it. Since we have <code>padding: 30px;</code> all around out box, the extra margin above the <code>h2</code> is no longer necessary. Let's follow our spacing concept and remove that.
{% codepen https://codepen.io/eddieherm/pen/XWWBEVx %}

##Subtlety
Any complementary styles should be subtle. Let's use border as an example.

#### Subtle borders
Below, we added a black border, but the contrast between the border and the box's background color seems a bit too strong. We want the focus to be on the content and the black border is taking some of the focus away.
{% codepen https://codepen.io/eddieherm/pen/bGGjvvW %}
Let's go for a lighter color for the border.
{% codepen https://codepen.io/eddieherm/pen/xxxJWje %}

####Smoothness
In some cases, you may want your user inteface to be a bit smoother. Let's smooth out the corners of our box a bit using <code>border-radius</code>.
{% codepen https://codepen.io/eddieherm/pen/BaaPrPW %}

####Add subtle interactions
Let's say that we want to indicate to the user that the box is clickable. Let's change the mouse cursor and add a shadow effect to our box when a user hovers the mouse over it, but make sure we are subtle about it!
{% codepen https://codepen.io/eddieherm/pen/zYYLWme %}

...and let's add some smoothness to it by adding a transition time between states. We will add <code>transition: 0.3s;</code> to our container style.
{% codepen https://codepen.io/eddieherm/pen/GRRBxPj %}

##Universal Applicability
The three concepts are universal. Here's a dark version.
{% codepen https://codepen.io/eddieherm/pen/LYYBdwE %}

...and here's an alternative light version.
{% codepen https://codepen.io/eddieherm/pen/NWWBMKy %}

##Summary
See? It doesn't take much to completely change the look and feel of our user interface. Subtle changes can make all the difference. We didn't use any crazy filters or styles. We kept it simple and applied three core concepts - Spacing, Contrast, and Subtlety.

_I'm on Twitter [@eddieaich](https://twitter.com/eddieaich)_