0. Today’s featured website:
1. Today we will learn:
– How to use Google fonts
– How to add a shadow to text
– How to style images by adding borders and hover effects
2. A better way to do fonts
You are going to learn today how to grab free code from Google to use for a font for your webpage.
Steps:
a. Go to http://www.google.com/fonts
b. Choose a font. Click the arrow next to All Categories at the top- do you want serif or sans-serif?
c. Once you choose a font, click the middle box with the arrow pointing to the right (quick use)
d. Choose the style and character set you want (the default will already be checked)
e. Copy and paste the link ref code into your <head> section. This will link the font you want to your webpage.
f. Finally, copy and paste the font family into the appropriate places on your style sheet (body, paragraph, headline)
What are some of the advantages of using Google Fonts?
3. Let’s make our text even more interesting by adding a shadow!
We can do this using CSS; no images needed. The following code is courtesy css-tricks.com:
p { text-shadow: 1px 1px 1px #000000; }
Try changing the color of your font and the color of your shadow
4. Styling images by adding borders
img { border-color: #7d6b72; border-style: solid; border-width: 5px; }
Try changing the border style to solid, dotted, dashed, double, groove, ridge, inset or outset.
You can also try changing the color of your border.
Remember, to see this in action you will have to add an image to your HTML if you don’t already have one.
Transparent images and hover effects:
Let’s make this image a bit more interesting:
Add the following to img under border-width:
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
Whole thing should look like this:
img
{
border-color: #7d6b72;
border-style: dotted;
border-width: 5px;
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
Then, below img, add the following:
img:hover
{
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
Whole thing should look like this:
img
{
border-color: #7d6b72;
border-style: dotted;
border-width: 5px;
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}