Large Text!


Large Text-Size in CSS

    ●  Create a New Rule for Large Text, add Drop Shadow, and use it Anywhere.

    ●  Setting the text-size to 100% in the body tag is the first step to standardize text throughout your site.

    ●  100% text-size will display your text according to the customized settings your viewers set.

Learn About:

Gradient Backgrounds Codes in CSSColor Codes in Illustrator 

•   This tutorial is part of the Art Genre, What in the World?, and Home Sweet Home Portfolio Projects.


Other People's Work:

Here are examples inspired by this tutorial.


Step #1: Open the body tag ~

Double-Click on the body tag …

body tag

Step #2: Text size ~

… set the text size to 100% …

text size

… and press OK.

Step #3: CSS Style Sheet ~

Click on New CSS Rule

… and create a Class called large-text

selector tag


Step #4: Set the Class tag Attributes

Header text should be BIG so set text to as large as possible …

xx large

… and press OK.

Step #5: Large Text ~

There are many places you can use Large Text:


    ●   Above your content as a welcome message ...


How about inserting a sub-heading at the top of your content div?



   ●   OR, your header text ...

Highlight the name of your site or page in the header div, maybe?


ANY TEXT WILL DO - any place where large text works: nav, footer, type something you can use.

Step #6: Properties ~

Where ever you put your large text, highlight it, open the Properties menu (it's probably already open but hit the keyboard shortcut: Cmd(⌘)+F3 if necessary) and attach the tag you created to the text you highlighted.

Step #7: Find a Font ~

Go to: to find a font that matches your theme. When you find one, click Quick Use at the bottom.

quick use

Then scroll down and copy the code.

Step #8: Split ~

Click Split to reveal the code …

… and look for the <head> </head> tags.

Paste your copied code just in front of last head tag.

Step #9: Add the CSS ~

Scroll a little further down on the Google page and copy the CSS code.

Step #10: Re-Open the Large-Text Tag ~

Double-click to reopen the tag …

double click

… and paste the code you copied in Font-Family.


More information on Google Fonts can be found here: 172_google_fonts_Dw.htm

Step #8: UpperCase ~

You don't have to use any of the following directions if you don't like them, but TRY THEM. Just get familiar how you modify text.

Set Case to UPPERCASE -


Step #9: Line Height ~

Adjust the Line height using em

line height

… but you only need line-height if you're using this tutorial in your header.


Step #10: Block Elements ~

Click Block and set Text-align to Center, Letter-spacing to 5 ems.


No you don't have to use these settings - Try different stuff! Experiment!

Step #10: Shadow ~

Open your style sheet again by Double-Clicking it …

styles panel

… look for the tag you created …

header text code

… and type this code:

Experiment! Try different settings! Be creative! Check this page for more drop shadow examples:

Last Step: Save and Upload your Work ~

If you have a web server, save your pages, upload them and attach the URL link to your site …

If you're ready, move on to the next tutorial => 56_gradient_text_Dw.htm

Other resources: