Using the <P> tag! Google Webfonts!

The <p> tag is one of my personal favorite tags and I often use it to achieve text indents on new paragraphs (like this one!). Here's a quick lesson in how the tag functions!

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 <br> tags in text, and allows you to apply kickass things like text indents or first letter styles.

Here's all you have to do:

<p>Your paragraph here.</p><p>Your paragraph here.</p>

Each line of text within a tag will become it's own paragraph. Easy!

The <p> tag allows you to also apply specific styles to a single paragraph without upsetting your parent text.

<p style="color:red;">Red text!</p><p>Back to default!</p>

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:

<link href='http://fonts.googleapis.com/css?family=Jacques+Francois' rel='stylesheet' type='text/css'>

If you look, it's easy to locate the font name already in use. css?family=Jacques+Francois' It's right there! You'll notice that, in place of the space between words, they've used a plus sign. Keep that in mind if your font name has two words! To edit our font in with the first one, it's quite simple. Every multi-font code uses the separator | between fonts, so we'll do the same! Here's our new code:

css?family=Great+Vibes|Jacques+Francois'

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 | symbols. If you want to remove the tag entirely, simply locate the code segment and erase it. You can have multiple copies of the code and each will function, but it's so much cleaner and easier to use one!

Hover Translation!
A tutorial for using hover translation code can be found here!

comments powered by Disqus