Using the <P> tag! | Google Webfonts! |
The This tag wraps around your text like the bread on a sandwich. It's a two-part tag, meaning the first part of the tag goes at the beginning of each paragraph, and the ending tag goes after each paragraph. This tag replaces the need for line-breaks or Here's all you have to do:
Each line of text within a tag will become it's own paragraph. Easy! The
A custom styled paragraph will still inherit any elements from the parent (div, table, body, whatever) unless you specify otherwise. Here's a more advanced preview: See the Pen VYZMQm by Dante (@absenceofstars) on CodePen. And here's where I learned about this tag! That's it! I hope you understand and can use this tag with confidence! |
Google Webfonts is a great resource. Google makes it extremely easy to pick out and use webfonts. I've used several other methods, like hosting my own webfonts, but Google's is easily the most accessable! Here's a quick walkthrough! (for the sake of this tutorial, I'm using my favorite serif font, Jacques Francois.) After choosing your fonts, you're presented with a copy-paste HTML/CSS code. The code links to an automatically generated external stylesheet which contains the fonts you've chosen (it's a lot of technical mumbo-jumbo). To use the fonts, you must paste this code somewhere before or after your table code -- NOT INSIDE IT! Next, you need to instruct the webpage to use your new fonts. Voila! Your paragraph is now using your fonts. Now, a few tips for editing the code to include other fonts/remove fonts. The format the code uses makes it extremely easy to edit it without copying a new one. To add fonts to a table with a preexisting code, select a font from their site. Copy down the name of it. We'll be using "Great Vibes" to our preexisting "Jacques Francois" code. Here's the code:
If you look, it's easy to locate the font name already in use.
There it is! You can now use your edited code to insert "Great Vibes" into your page. Removing fonts works the same way, but in reverse. Remove the name of the font as well as any uneccesary |
Hover Translation! | |
A tutorial for using hover translation code can be found here! |