BLOG

Embedding CSS on Google Sites: Text in Box

March 6th, 2023

Google Sites is your gateway to ultimate customization. With the ability to apply script and CSS, as well as choose from a wide range of Google fonts, your site will be a unique masterpiece. 

And if you're looking to add some creative flair to your text, there are a few tricks up our sleeve. Use the code font for a simple, yet effective way to display text within a box with a background color. Or, if you want to take it a step further, add some CSS code to create rounded rectangles with custom fonts and background images or colors.

I'll show you how to put your text in boxes.

Code font


If you're looking to place your text within a box with a background color, the 'Code Font' is the simplest solution. You can easily select the code font and then customize it with the font of your choice.

Text box example in Google Sites

Here's how:

Text box example using code font

Embed CSS for Beautification 


Another option is to include CSS code directly on your Google Site. This can allow you to place text within rounded rectangles with custom background images or colors. You can also select from a variety of Google fonts to further personalize your site.

Rounded text box example in Google Sites

Here's how:

Rounded text box CSS code for Google Sites

<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">


<style>

p{

border-radius:20px;

padding:20px;

color:royalblue;

background-color:efefef;

font-size:14px;

font-family: 'Lato', cursive;

text-align:center;

}

</style>


<p>


Unlock your email marketing potential with our app! Send up to 2K emails daily with no restrictions* (*<a href="https://support.google.com/a/answer/166852" target="_blank">Gmail quota</a> on your plan applies).


</p>


There you have it - the tools to create a stunning website! 

Need help?


For professional pages on Google Sites or for any other issues, you can contact us directly or post your question on our websites or visit our Facebook page.

Mastering Google Sites

The 2023 Guide to Maximize Web Presence: “Mastering Google Sites” with 30 Surprising Things You Never Knew You could do with Google Sites. 

Available for purchase here.