Add a Partial Highlight To Your Titles

By now you’ve already seen this creative trend popping up on sites across the web. Adding a partial highlight to your text adds an extra dimension and helps it pop. The coloring comes from a simple combination HTML and CSS. Don’t worry, I promise it’s easy! 

 

Plus, for all you Squarespace developers and designers out there, I’ll add in Squarespace specific instructions too!

 

Ready to get your coding on?

 

Understanding the Basics

 

nº 1

First things first, create a section of text. This can be a title, subtitle, body text, or even a link! We’re going to stick to a nice big title (aka H1): 

 

<h1> Hello There! </h1>

 

- If you’re using Squarespace: add a Markdown box to the section you want to add your text to before typing your code. 

 

 

nº 2

Now, we don’t necessarily want to target ALL title fonts, so we’re going to add in specifiers that will tell our browser to only add a highlight to THIS specific title in 2 steps:

 

1. We’re going to wrap our text in a “span”, which is essentially a mini-container that will allow us to add styles to specific sections of code (aka, our title). 

 

<h1> <span> Hello There! </span> </h1>

 

2. To target that specific “span”/mini-container, we’re going to give it a simple identifier. We call this a “class”: 

 

<h1> <span class=”highlight”> Hello There! </span> </h1>

 

nº 3

Now that we’ve identified which part of our code we want to target, we’re going to add in CSS styling. 

 

- For Squarespace: head to Design > Custom CSS

 

We’ll target our class: 

 

.highlight{

}

 

Now, we’ll add our command: 

 

. highlight{

background: linear-gradient(180deg,rgba(255,255,255,0) 50%, #ECF1EB 50%);

}

 

            

 

 

Now the fun part: 

 

to add in a different color, replace “#ECF1EB” with whatever color you like (you can use rgb/rgba codes too!)

 

Want thicker lines? Decrease the percentages. For example: 

 

background: linear-gradient(180deg,rgba(255,255,255,0) 36%, #ECF1EB 36%);

 

 

Want thinner lines? Yup! Just increase your percentages: 

 

background: linear-gradient(180deg,rgba(255,255,255,0) 76%, #ECF1EB 76%);

 

 

Now that you know how to target specific sections of code using a span and class, you can do the exact same with any/all kinds of text! For example…

 

Body Text: 

 

<p> <span class=”highlight”> I am a Body Text </span> </p>

 

 

Links: 

 

<a href=”http://www.natashaverdon.com”> <span class=”highlight> I am a Link! </span> </a>

 

 

Want to add a highlight to specific sections of your text? Not a problem! Just wrap your span around the parts of your text that you want to highlight:

 

<h1> Hey I’m a <span class=”highlight”> Title! </span> </h1>

 

                

 

Since you’re using the same class for each, the “.highlight” class in your css will automatically add highlights to each of these! 

 

Want to add different highlights to different sections of text? Simply change the class you use in your span container (and don’t forget to add it to your CSS section too): 

 

highlight

lowlight

primary-highlight

body-highlight

 

the list is literally endless

 

 

Happy coding!

 

 

 

* Questions Corner

- Curious about the “/” in our code brackets? That signals the end of that particular section and type of code: 

 

<h1> See Ya Later! </h1>

 

Literally means:

 

<h1> See Ya Later! <end h1>