Large Text!


Summary:

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: http://www.google.com/webfonts#HomePlace:home 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.

text


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 -

case


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.

center


Step #10: Block Elements ~

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

text-align


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: http://www.w3.org/Style/Examples/007/text-shadow.en.html


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: http://www.w3.org/Style/Examples/007/text-shadow.en.html