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.
✓ Gradient Backgrounds Codes in CSS✓ Color Codes in Illustrator
Other People's Work:
Here are examples inspired by this tutorial.
Step #1: Open the body tag ~
✓ Double-Click on the body tag …
Step #2: Text size ~
✓ … set the text size to 100% …
✓ … and press OK.
Step #3: CSS Style Sheet ~
✓ Click on New CSS Rule …
✓ … and create a Class called large-text
Step #4: Set the Class tag Attributes
✓ Header text should be BIG so set text to as large as possible …
✓ … 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.
✓ 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 …
✓ … 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 …
✓ … 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 …
✓ … look for the tag you created …
✓ … 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