1 minute CSS tricks for a minimalist website

Learn how to add CSS code to customize your blog or website beyond the theme customization tool on WordPress! If you’re on a low budget and you’re designing your own website or blog, this post is for you. With only a few lines of code, you can make some changes to achieve that clean, minimalist look on your website!

 

Learn how to add CSS code to customize your blog or website beyond the theme customization tool on WordPress! If you're on a low budget and you're designing your own website or blog, this post is for you. With only a few lines of code, you can make some changes to achieve that clean, minimalist look on your website!

 

A few weeks ago I wrote a post about how to give your blog a minimalist makeover. Those were general tips, but today I want you to take action! Design is in the details, so changing up some little things can have a big impact on the overall look of a website.

Don’t be scared by the word ‘code’. There’s really nothing to be afraid of, anyone can easily learn CSS. And even if you don’t have time to learn, or are too lazy, you can just copy and paste from this post 😉 Although I’d recommend you read some info about the CSS language if you’re a total stranger to it, before we begin.

 

You also have to know that you have two options to add custom CSS to your theme:

– Write the code directly in the Custom CSS section of the customize panel. Here‘s how to.
– Or be like the pros and use a child theme!

Now let’s dive into the fun part!

 

1 minute CSS tricks for a minimalist website

 

1. Change the line height

I briefly talked about this on my previous minimalist website post. If you increase the line height of your text, you’ll be also increasing its readability! Here’s the code to do it:

p {
    line-height: 200%;
}

Keep in mind that 120% is the default line height! You can try different percentages to see how it looks the best.

 

2. Change the letter spacing

Increasing the space between each letter of your text can result in a more modern look, giving the letters more space to breathe. And as I said previously, white space is a must when you think of minimalism!

p {
    letter-spacing: 1px;
}

You can use a value in % or em, just try and find out what works best for you!

 

3. Change the link appearance

This is one of my go-to CSS tricks! I love to play with the underline and colors of the links, using this little bit of code:

a:link {
text-decoration: underline;
}

a:hover {
text-decoration: none;
color: #fafafa;
}

a:link changes the appearance of the link on its “normal” state, while a:hover changes the appearance of the link when you go over it with the mouse. You can mix and match the properties of text-decoration and color to your taste!

 

4. Change the list appearance

I don’t like at all the standard bullet list, so this is how I changed it on this website:

ul {
padding-left: 0;
}
li {
list-style: none;
}
li:before {
content: "—";
padding-right: 8px;
}

ul refers to the list as a whole, while li are each element inside the list. In content, you can replace with whatever character you’d like for your bullet points. Don’t forget the list-style: none as this removes the original bullet points.

I set the padding of the ul to 0 because I didn’t like the indentation, but you can skip that step if you want to keep it!

 

5. Change the selection or highlight color

Last one is really fun! When you select some of the text in a website, we usually see it highlighted in white over a blue background. But you can change those colors to match your brand or website color palette. Here’s the code:

::-moz-selection {
background-color: #f2e1dc;
color: #000;
}

::selection {
background-color: #f2e1dc;
color: #000;
}

All you have to do is copy, paste, and replace with your own color codes! Remember that you’ll have to replace them twice, in -moz-selection and in selection (the first one works for Mozilla Firefox browsers and the other one for the rest).

 

Pretty easy, right? What is your favorite CSS trick? Do you know anymore? Share them in the comments below!