HTML II: Styling

From http://www.codecademy.com/ I didn”t hesitate to post because it is open sourde in that web site too. This is for my looking. (MSY)

Font size

Recall that <p> and </p> are opening and closing tags.

We can give tags more instructions by includingattributes in the opening tag. An attribute is simply a characteristic or some description for the content in the element. You saw this with src in <img>and href in <a>.

Let’s change the size of the text. How? We use thestyle attribute. We make it equal to font-size, followed by a colon, the size you want, and end it with px (short for “pixels”). For example:

<p style = “font-size: 12px”>

Note: If you’re having trouble with your font sizes, reset your browser’s zoom by pressing Cmd-0 or Ctrl-0.

Be very careful not to nest your tags incorrectly. If you type:

<p <p style=”font-size: 10px;”></p>

or

<p> <p style=”font-size: 10px;”></p>

your code will not work.

INSTRUCTIONS

 

make the text size 10px.

make the text size 20px.

make the text size 40px.

 

<!DOCTYPE html>

<html>

                        <head>

                                                <title>First font size change</title>

                        </head>

                        <body>

                                                <p style=”font-size: 10px”> tiny! </p>

                                                <p style=”font-size: 20px”> normal size! </p>

                                                <p style=”font-size: 40px”> super big! </p>

                        </body>

</html>

 

Font color

What is awesome about the style attribute is that we use it a lot! And we can use it with many different tags, not just <p>. Let’s now change the colors of our text in a heading.

To change the color of text, simply add the style attribute in the opening tag, then make the style equal to “color:blue” (or whatever color you like). For example:

<h2 style=”color:red”>

What if you want to change the color and the size of the text? Simple! Just add a semi-colon between each bit. For example:

<h2 style=”color: green; font-size:12px”>

A full list of available colors can be found here.

Notedo not type something like:

<h2 <h2 style=”color: green; font-size:12px”>

If you incorrectly nest your HTML tags like that, your code will not pass.

INSTRUCTIONS

  1. Change the heading color to green and its size to 16px.
  2. Change the color of the first paragraph to violet.
  3. Change the color of the second paragraph to red and its font size to 10px.

 

<!DOCTYPE html>

<html>

                        <head>

                                                <title>Changing the colors!</title>

                        </head>

                        <body>

                                                <h1 style=”color:green; font-size:16px”> Big Heading</h1>

                                                <p style=”color:violet”> A giant bear and a little duck were friends.</p>

                                                <p style=”color:red; font-size:10px”> But the bear got hungry and ate the duck.</p>

                        </body>

</html>

 

 

Font family

We’ve covered font colors and font sizes. But we want more power! We want to decide what font type to use. In HTML, this is called the font-family.

To change font type, simply add the style attribute in the opening tag, then make the style equal to “font-family:Helvetica” (or whatever font you like). For example:

<h2 style=”font-family:Garamond”>

See here for a list of all available fonts.

INSTRUCTIONS

  1. Change the font size of the first listed item to 16px and the font to Garamond.
  2. Change the font size of the second listed item to 12px and the font to Verdana.
  3. Change the font size of the third listed item to 10px and the font to Impact.

Make sure to capitalize Garamond, Verdana, and Impact as shown!

 

<!DOCTYPE html>

<html>

                        <head>

                                                <title>Loving the font changes</title>

                        </head>

                        <body>

                                                <h1>Big title</h1>

                                                 <ol>

                                                                        <li style=”font-size:16px; font-family:Garamond”> This item is big Garamond.</li>

                                                                        <li style=”font-size:12px; font-family:Verdana”>This item is medium Verdana.</li>

                                                                        <li style=”font-size:10px; font-family:Impact”>This item is small Impact.</li>

                                                 </ol>

                        </body>

</html>

 

Recap

Awesome job! You’ve now got control of your webpage, including the color, size and type of your font. To recap, we use the style attribute in the opening tag, like so:

a. font-size: 14px
b. color: orange
c. font-family: Bodoni

<p style = “font-size:14px; color: orange; font-family: Bodoni”>

It’s important to know that you can use the style attribute for paragraphs, headings, and even links!

INSTRUCTIONS

For the paragraph on line 7, make the font have:

a. A size of 20px
b. A color of blue
c. A font-family of Garamond

 

<!DOCTYPE html>

<html>

                        <head>

                                                <title>Putting it all together</title>

                        </head>

                        <body>

                                                <p style=”font-size:20px; color:blue; font-family:Garamond”> A truly spectacular paragraph! </p>

                        </body>

</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: