HTML N CSS

INTRODUCTION HTML
Why learn HTML?

Every webpage you look at is written in a language called HTML. You can think of
HTML as the skeleton that gives every webpage structure. In this course, we'll
use HTML to add paragraphs, headings, images and links to a webpage.
In the editor to the right, there's a tab calledtest.html. This is the fle we'll type our
HTML into. See the code with the <>s? That's HTML! Like any language, it has
its own special syntax (rules for communicating).
When we press Save & Submit Code, the results tab will act like an
Internet browser(e.g. Chrome, Firefox, Internet Explorer). A browser's job is to
transform the code intest.html into a recognizable webpage! It knows how to lay
out the page by following the HTML syntax.
Instructions
1. To the right, we have a test.html fle.
2. Change the text on line 2 (the bit between <strong> and </strong>) to
anything you like!
3. Hit Save & Submit Code, and you'll see how the test.html fle would look in
a browser. Did you see that? The <strong></strong> tags made our text bold!
?
Hint
If you're not sure what to change the text on line 2 to, why not change Feel free
to change this text. to I'm about to learn HTML?
Don't change or remove the <strong> bit or the </strong> bit! We'll explain what
those do soon.
HTML and CSS
HTML stands for HyperText Markup Language. Hypertext means "text with
links in it." Any time you click on a word that brings you to a new webpage, you've
clicked on hypertext!
A markup language is a programming language used to make text do more than
just sit on a page: it can turn text into images, links, tables, lists, and much more.
HTML is the markup language we'll be learning.
What makes webpages pretty? That's CSSCascading Style Sheets. Think of
it like skin and makeup that covers the bones of HTML. We'll learn HTML frst,
then worry about CSS in later courses.
The frst thing we should do is set up the skeleton of the page.
a. Always put <!DOCTYPE html> on the frst line. This tells the browser what
language it's reading (in this case, HTML).
b. Always put <html> on the next line. This starts the HTML document.
c. Always put </html> on the last line. This ends the HTML document.
Instructions
1. Go ahead and put the three lines mentioned above into test.html, which is
now blank.
2. In between the second and last line (between the <html> and
the </html>), feel free to write whatever message you like.
?
Hint
In HTML, the order you put things in matters! But formatting (i.e. empty space)
doesn't matter from a technical point of view.
You will notice there's a pattern in how we indent each line of HTML, though. This
is to aid readability and help us catch mistakes. We'll talk more about indentation
later!
Basic terminology
To learn more HTML, we should learn how to talk about HTML. Already you have
seen we use <>s a lot.
1. Things inside <>s are called tags.
2. Tags nearly always come in pairs: an opening tag and a closing tag.
3. Example of opening tag: <html>
4. Example of closing tag: </html>
You can think of tags as being like parentheses: whenever you open one, you
should close it. Tags also nest, so you should close them in the right order: the
most recently opened tag should be the frst one closed, like in the example
below.
<frst tag><second tag>Some text!</second tag></frst tag>
The last exercise taught us how to set up our HTML fle. Everything we do now
will go between <html> and </html>.
Practice makes perfect! One more time:
Instructions
1. Put in the <!DOCTYPE HTM> tag.
2. Put in the <html> opening and closing tags.
3. Between the <html> tags, write whatever you like.
4. Press Save & Submit Code to see what you've written appear on the page!
?
Hint
Feel free to peek back at earlier exercises if you forget exactly what a tag looks
like.
Make the head
Everything in our HTML fle will go between the opening <html> and
closing </html>tags.
There are always two parts to an HTML fle: the head and the body. Let's start
with the head.
The head contains information about your HTML fle, like its title. The title is what
we see in the browser's title bar or page tab. For example the title of this page is
"HTML Basics | Codecademy".
Instructions
Let's add a head and a title to our webpage. If you get stuck at any point, click
"Stuck? Get a hint!" below for an example.
1. Add an opening <head> tag and closing</head> tag.
2. Between the <head> tags, add in an opening <t!tle> tag and
closing </t!tle>tag.
3. Between the <t!tle> tags, write in a title for your page. For example, "My
Webpage."
4. Press "Save & Submit Code" to continue
?
Hint
Your code should look something like this:
<html>
<head>
<t!tle>M" #e$%age</t!tle>
</head>
</html>
Paragraphs in the body
Great job! To review, an HTML fle has both a head and a body. The head is
where you put information about your HTML fle, like its title.
The body is where you put your content, such as text, images, and links. The
content in the body is what will be visible on the actual page.
The body goes inside the <html> tags, right after the <head> tags, like this:
<html>
<head>
</head>
<$od">
</$od">
</html>
Instructions
1. Underneath the closing </head> tag, put an opening <$od"> tag and a
closing</$od"> tag, like in the example above.
2. Inside the body, create two paragraphs. Each paragraph starts with an
opening <%>tag and ends with a closing </%> tag. We can write content in
between the tags, like this:
<$od">
<%>Hello &orld!</%>
</$od">
?
Hint
<html>
<head>
</head>
<$od">
<%>Th!s !s m" frst %aragra%h</%>
<%>Th!s !s m" second %aragra%h</%>
</$od">
</html>
Paragraphs and headings
We're defnitely making good progress! We've learned when and why we use
HTML. We've also learned how to:
a. Set up an HTML fle with tags
b. Title the webpage (in the <head>)
c. Create paragraphs (in the <$od"> with<%> tags)
The next step is to give our paragraphs headings using heading tags. Let's start
with the <h'> tag. The content between this tag will be the biggest!
Instructions
1. In the body section, create a heading. To do this, create an <h'> tag.
2. Add content.
3. Close the element with a closing tag</h'>. (Your content should now be
between <h'> and </h'>.)
4. Underneath the heading tags, create two paragraphs using <%> tags with
whatever content you like.
?
Hint
Remember: paragraphs require <%></%>tags!
More about headings!
HTML actually lets us have more than one heading size. There are six heading
sizes, where <h'> is the boss and <h(> is puny!
<h'> - The CEO
<h)> - VP
<h*> - Director
<h+> - Middle management
<h,> - Lowly assistant
<h(> - Gets cofee for everyone
Below we'll ask you to add headings of various sizes. Feel free to write whatever
you like for the headings!
Instructions
1. Your code currently has one <h'>heading and two paragraphs.
2. Add an <h*> heading before the second paragraph.
3. Add an <h,> heading after the second paragraph, and then add a third
paragraph after this heading.
Using every heading
Nice work!
Given that there are six heading sizes altogether, we should make use of all six.
Instructions
1. Add three more headings to the code, making use
of <h)>, <h+> and <h(>. Make sure to close all your tags!
2. Under each heading, add a short paragraph. Dont forget paragraphs need
opening and closing <%></%> tags!
Mid-lesson breather
You've done an awesome job! Here's a quick summary of things we've learned:
1. HTML is used to give websites structure.
2. We open HTML fles using a browser, and the browser renders (shows
us) the fle.
3. HTML fles have a <head> and a <$od">(just like you!)
4. In the head, we have the <t!tle> tags, and we use these to specify the
webpage's name.
5. How to make headings and paragraphs.
Instructions
1. Add a title between the <t!tle> tags.
2. Create a <h*> sized heading in the body. Make your heading say
anything you want! (Just don't forget to close it.)
3. Create three paragraphs using <%> tags and fll them with content
(e.g. about cars, your pet, favorite city to travelwhatever you like!)
You're going places!
What if you wanted to send the user to another part of your website, or another
website altogether? You use hyperlinks, or links for short!
<a hre-./htt%0//&&&.codecadem".com/>M" 1a2or!te S!te!</a>
1. First, there's an opening <a> tag and that tag has an attribute called hre-.
Thehre- value tells your link where you want it to go, in this
casehttp://www.codecademy.com.
2. Then you have a description of your link between your opening <a> and
your closing </a> tags. This is what you will be able to click on.
3. Finally, you have your closing </a> tag.
Instructions
1. In the body section, create a link. To do this, create an <a> tag. Point your
link to a website by setting the value of the hre-attribute
2. Add a description of your link
3. Close the element with a closing tag</a>
Adding images
You can add images to your websites to make them look fancy.
We use an image tag, like so: <!mg>. This tag is a bit diferent from the others.
Instead of putting the content between the tags, you tell the tag where to get the
picture usingsrc. It's also diferent because there is no ending tag. It has / in the
tag to close it:<!mg src./3rl/ />.
Check out the tag to the rightit adds a picture of a rubber duck to the page!
(You can see it by clicking on the Preview button.)
See the web address (or URL) after src.?
It's /htt%0//s*.ama4ona&s.com/codecadem"5$log/assets/-*a'(-$(.6%g/. That tells
the<!mg> tag where to get the picture from!
Every image on the web has its own image URL. Simply right-click on an image
and choose "Copy image URL." Paste that URL in quotes after src. to insert with
your <!mg>tag.
Instructions
Add a second image below the frst one. (Make sure it's before the
closing <$od">tag!)
If you can't think of a good picture, use this ninja:
htt%0//s3.amazonaws.com/codecademy-blog/as
Click that image
Good work! Now you know how to add links and images to your website. Why not
make that image a link? For example:
<a hre-./htt%0//&&&.codecadem".com//>
<!mg src./htt%0//s*.ama4ona&s.com/codecadem"5$log/assets/-*a'(-$(.6%g//>
</a>
1. First we open our <a> tag and point
thehre- to http://www.codecademy.com/again.
2. But this time, instead of using text inside the <a> tag, we use
an <!mg> tag.
3. Finally, we have our closing </a> tag.
Now when you click on the yellow duck, you will be taken
tohttp://www.codecademy.com!
Placing one HTML tag inside of another is called nesting.
Instructions
1. In the body section, create an <a> tag.
2. Choose a website to point your link to,
like <a hre-./htt%0//&&&.codecadem".com/>.
3. Now create your <!mg> tag between your opening <a> tag and
closing </a> tag. Don't forget the src!
4. Finally, close your </a> tag after your<!mg> tag.
?
Hint
Make sure you put in a full web address, like /htt%0//&&&.google.com/. Oh yeah
make sure to put the address in quotes!
<a hre-./789 3rl/>
<!mg src./7M:;E 3rl/ />
</a>
Try making one image link to/htt%0//codecadem".com/ and then click on it to see
the link in action. If you use another URL there is a chance that clicking on it won't
work because of security settings on the website!
Images and links
Good work! Let's make sure you really understand images and links before we
move on to the review.
Instructions
1. Between the <$od"> tags, add two images using the <!mg> tag. One
should be a link; the other should not. The link can go anywhere you want.
2. After your two images, create a link that's just a line of text. It can link
anywhere you want.
Check the Hint if you need help.
?
Hint
Images work like this:
<!mg src./%!ct3re <=/ />
Links work like this:
<a hre-./&e$s!te <=/></a>
You can put a link around an image:
<a hre-./&e$s!te <=/><!mg src./%!ct3re
Congratulations!
Well done! You now know the basics of creating a web page. If you're feeling
lucky, go ahead and tackle the Build Your Own Webpage project.
Instructions
Click Save & Submit Code to complete the course.
What you'll be making
Before we ask you to write a bunch of code, we think it's helpful for you to see
exactly what you'll be making in this project.
Check out the !ndex.html fle and the Result tab for an examplewe've made our
very own webpage.
Instructions
Hit Save & Submit Code to start building your own!
Every house needs a frame
An HTML page is sort of like a house: it needs a certain number of essential
structures in order to work.
Just like a house, an HTML page needs a frame. In this case, your frame is
made of<!DOCTYPE>, <html>, <head>, and <$od">tags.
Instructions
Your webpage is blank as the day it was born! Let's add fve things:
1. The <!DOCTYPE> tag
2. Your <html> tags
3. Your <head> tags
4. <t!tle> tags (with any title you like!) between your head tags
5. Your <$od"> tags
It's better with a header
Your webpage could use an <h'> header between the body tags to let everyone
know that the page is about you.
Instructions
Create an <h'> tag inside your body tags. Between your opening <h'> and
closing</h'> tags, type your name for all to see!
Tell us about yourself
Your page is coming along, but it's not telling us much yet.
You could use a paragraph or two telling your readers what your interests are,
what you do for a living, how much you love learning HTML, and so on.
Instructions
Insert three <%> tags after your <h'> tag (but before your closing </$od"> tag!).
Write a little bit about yourself in each of the three paragraphs. You can say
whatever you want! It's your webpage.
A picture's worth a thousand words
Nice work! Your page is still looking a bit spare, though. Better add an image or
two to spruce things up a bit.
Remember, to insert an image from the web you will need to right-click and select
"Copy image URL." Then use this URL in your<!mg> tag.
Instructions
Insert an <!mg> tag between your <$od">tags. Feel free to put it anywhere! (We
think it'd look best after your <h'> tag, but before your <%> tags.) You can make
the srcattribute point to any image you like.
?
Hint
Remember how the !mg tag works? If not, here's a refresher:
><!mg src./!mage <=/ />
Link me!
Great! There's only one problem: your webpage is like a house with no doors.
There's no way to get in or out! We'll fx that by adding a couple of links.
Once you successfully add your links and hit Run, you've fnished! Revel in the
glory of your newly created webpage.
If it still looks a little basic to you, don't worry. We'll soon teach you CSS to make
your webpages look sharp!
Instructions
Add at least two links to your webpage. You can turn an image or a bit of text into
a link; you can even turn part of the text inside your <%> tags into a link!
Check out the Hint if you've forgotten how the <a> tag works.
?
Hint
Remember how to make links? If not, here's how:
><a hre-./&e$s!te <=/>Text or !mage!</a
Introduction
Let's continue learning more HTML. You've already covered a lot: how to set
up <head>and <$od"> tags, how to make headings and paragraphs, and how to
add images and links.
In this course, we'll take it to the next level:
a. Making ordered and unordered lists
b. Changing font size, color and type
c. Changing the background color
d. Aligning the text
Instructions
1. Let's get warmed up by adding a<t!tle> in the <head>.
2. In the body, create a paragraph (using<%>). Write anything you like!
Indentation is your friend
Now is a good time to quickly mentionindentationthat is, the amount each line
is spaced in from the margin. You'll notice that when we place tags inside of other
tags, we indent them more. This really helps make your code more readable!
Check out our indentation in the editor to the right. Try to follow this indentation
style when you're writing HTML so you don't get confused.
Instructions
Hit Save & Submit Code to continue.
Ordered lists
Good! Now let's learn how to makeordered lists. An ordered list is simply a list
that is numbered, like the one below.
1. On line 8, we begin the ordered list with the opening tag <ol>.
2. On lines 9 11, we wrap (i.e. surround) each individual item
with <l!> and </l!>tags.
3. Because each listed item is only on one line, we put the entire element on
one line.
4. On line 13, we fnish the ordered list with the closing tag </ol>.
How cool is this? We can now add ordered lists to headings and paragraphs as
things we can use in our HTML body.
Instructions
1. On line 14, create an <h)> sized heading called 'List of things I fnd just
OK'.
2. Starting on line 15, create an ordered list using the <ol> tag.
3. Your ordered list should have three items, each wrapped (i.e. surrounded)
by<l!> tags.
One more ordered list
We really think that ordered lists are excellent. Who doesn't love a bit of order?
So let's do a bit more practice. If you forget what an ordered list looks like, feel
free to look back at the previous section!
Instructions
1. In the $od" tag, create an <h*> tag with the text 'Most annoying TV
celebrities'.
2. Make an ordered list with the <ol> tag of the top 3 TV celebrities you fnd
not to your taste. Remember, these go between the list item tag <l!>
3. Remember to close your ordered list with the </ol> tag
4. Under the list you made, make an <h)>tag with the text "Top three things
I can do for Mother's Day."
5. Then make another ordered list of those things too!
?
Hint
Remember, an ordered list looks like:
<ol>
<l!>=a!ndro%s on roses</l!>
<l!>#h!s?ers on ?!ttens</l!>
<l!>@r!ght co%%er ?ettles</l!>
<l!>#arm &oolen m!ttens</l!>
</ol>
Unordered lists
We just learned how to make ordered lists, but what if the order doesn't matter,
what if we just want bullet points?
<h)>Taco 7ngred!ents</h)>
<3l>
<l!>Cheese</l!>
<l!>So3r Cream</l!>
</3l>
Does this look familiar?
1. First, we open our list with an unordered list <3l> tag
2. For each item we wish to add to the list, we use a list item tag <l!> with
text in between
3. We then tell the browser we are done with our list by calling our
closing </3l> tag
Instructions
1. In your <$od"> tag, create an <h'> tag and put the text 'Some random
thoughts' inside it.
2. Under your <h'> tag, create a paragraph using the <%> tag which
describes the list you will make.
3. Finally, create an unordered list with the<3l> tag which contains a list of
four random thoughts, each of which should be placed inside of an <l!> tag
?
Hint
So an unordered list looks like:
<3l>
<l!> random th!ng ' </l!>
<l!> random th!ng ) </l!>
</3l>
Lists inside a list
So you've made ordered lists and unordered lists. Top work!
What if you have an ordered list, but each item in the ordered list also has an
unordered list nested in it? Nested simply means 'inside' the list. The editor has a
small example of this. Hit save & submit to see what the result looks like!
Remember: you've been nesting tags already. When you nest tags, the last tag
you open is the frst one you close. Here's an example:
<3l><l!>Tacos!</l!></3l>
Instructions
1. On line 21, create an unordered list.
2. Your unordered list should have two items: "Favorite Boys' Names" and
"Favorite Girls' Names."
3. Under each item of the unordered list, create an ordered list. Use the
ordered list to specify your three favorite boys' names and three favorite girls'
names. Use the sample nested lists above as examples of how to do this.
?
Hint
Try keep your formatting neat and tidy like the example. This will help you as you
type out your HTML.
a. Start of frst by creating the <3l> and</3l> tags.
b. Then you'll use the <l!> related to Favorite Boy and Girl names
c. Then under each respective <l!> item, create an ordered list using <ol>. Note:
You should not close your <l!> before you open and close your <ol>.
Here is an example:
<3l>
<l!></l!>
<ol>
<l!></l!>
</ol>
<l!></l!>
<ol>
<l!></l!>
<l!></l!>
</ol>
<l!></l!>
</3l>
Making comments
We have covered a lot about lists. Let's change gears and do some styling. If you
recall, HTML is the skeleton of the webpage, and CSS lets you give the skeleton
some skin and makeup.
But it is possible to do some inline CSS. This simply means we can do some
styling in our HTML fle without worrying about a separate CSS fle! We'll learn
this frst because it will make learning CSS a lot easier later.
Before we dive into fonts, it's important to learn about making comments. You can
include little notes in your HTML code that the browser won't display. But it will be
in the code to help you remember why you did certain things.
Instructions
1. Comments start with <!55 and end with 55> like this:

2. Make the text on line 1 into a comment. Leave the text on line 3 alone!
Font size
Recall that <%> and </%> are opening and closing tags.
We can give tags more instructions by including attributes 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 <!mg> and hre- in<a>.
Let's change the size of the text. How? We use the style attribute. We make it
equal to font-size, followed by a colon, the size you want, and end it with %x (short
for "pixels"). For example:
<% st"le./-ont5s!4e0 ')%x/>
Instructions
1. On line 7, make the text size 10px.
If you're having trouble with font sizes, reset your browser's zoom by pressing
Cmd-0 or Ctrl-0.
?
Hint
Make sure you do not nest your <%> tags incorrectly. Your code will not work if
you type something like this:
<% <% st"le./-ont5s!4e0 'A%xB/></%>
or
<%> <% st"le./-ont5s!4e0 'A%xB/></%>
Font color
What is awesome about the style attribute is that we use it a lot! And we can use
it with many diferent tags, not just <%>. 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:
<h) st"le./color0red/>
What if you want to change the color andthe size of the text? Simple! Just add a
semi-colon between each bit. For example:
<h) st"le./color0 greenB -ont5s!4e0')%x/>
A full list of available colors can be foundhere.
Note: do not type something like:
<h) <h) st"le./color0 greenB -ont5s!4e0')%x/>
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 frst paragraph to violet.
3. Change the color of the second paragraph to red and its font size to 10px.
?
Hint
It's important that the quotation marks surround all the words on the right hand
side of the equals sign.
Remember: if you have more than two style elements (like font color AND font
size), place a semi-colon between them.
If you're getting a funny number for your font size, try resetting your zoom by
typing Ctrl-0 or Cmd-0.
Font family
We've covered font colors and font sizes. But we want more power! We want to
decide what font type to use. We can do this using -ont5-am!l", like this:
<h' st"le./-ont5-am!l"0 :r!al/>T!tle</h'>
'. First we wrote <h'>@!g t!tle</h'>
). Then inside the opening <h'> tag, we added a st"le attribute, and set it
equal to/-ont5-am!l"0 :r!al/.
This styles the <h'> tag with Arial font.
We can do the same for other tags. So we could have a l!:
<l! st"le./-ont5-am!l"0 :r!al/>Hello!</l!>
Here's a list of available fonts.
Instructions
1. Change the font size of the frst listed item (<l!>) to 16px and the font to
Arial.
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 the frst letter of Arial, Verdana, and Impact as shown!
?
Hint
If your error message includes a weird font size like 16.88888px or 8.181818px,
try resetting your browser's zoom using Ctrl-0 or Cmd-0.
Remember to surround the value of thest"le attribute with quotes, like this:
st"le./-ont5-am!l"0 :r!al/
Finally, don't forget to separate two values with a semicolon, like this:
st"le./-ont5s!4e0 '(%xB -ont5-am!l"
0
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. -ont5s!4e0 '+%x
b. color0 orange
c. -ont5-am!l"0 @odon!
<% st"le . /-ont5s!4e0'+%xB color0 orangeB -ont5-am!l"0 @odon!/>
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 Arial
Background color
The previous section covered a number of nice tricks to control how the text
looks. Now we want to learn about how to change the color of the webpage's
background.
We can use the st"le attribute again, and set it equal to /$ac?gro3nd5color0
red/ (or whatever color you want).
For example, here's how to change the background color of a <%> tag to red:
<% st"le./$ac?gro3nd5color0 redB/>Hello!</%>
Instructions
1. Change the background color of the<$od"> tag to brown. To do so, add
thest"le attribute to the opening <$od"> tag, similar to the example above.
2. Change the background color of the<ol> tag to yellow.
Aligning the text
Often it is nice to be able to move the text around. To do so, we again use
the styleattribute. And then we use "text-align:left" (or right, or center) to
determine the location of the text.
<h' st"le./text5al!gn0center/>
Instructions
1. Make the <h*> heading aligned center.
2. Make the frst item in the list align left.
3. Make the second item align center.
4. Make the third item align right.
Strong words!
We can change the appearance of words. What if we want to make them bold?
Surprise! We don't have to use the style attribute. Here are the steps:
1. Identify the word or words you want tobold.
2. Surround those words with opening tag<strong> and closing
tag </strong>.
3. Celebrate how awesome you are at HTML!
Instructions
1. Bold the word 'sing' on line 7.
2. Bold the word 'too' on line 8.
?
Hint
Here's how to bold the word "Leng" using<strong> tags.
<%>HelloC m" name !s <strong>eng</strong>!</%>
By putting the closing </strong> tag before the exclamation mark, we make sure
that only the word "Leng" is bold.
Emphasize words!
Aside from bolding words, we often want toitalicize words for emphasis. (Hint,
hint.)
Like bolding, we do not need to use the style attribute. Instead:
1. Identify the word or words you want to italicize.
2. Surround the word or words with the opening tag <em> and closing
tag </em>.
3. Be humble and grateful for your newfound powers.
Instructions
1. On line 7, italicize the word 'that'.
2. On line 8, italicize the word 'so'.
Make sure you don't include the /!/between the <em></em> tags on line 7!
Summary
This has been an incredibly busy lesson, and you've covered a lot.
Congratulations! We have learned how to:
1. Make ordered and unordered lists
2. Change the color, size and type of font
3. Add comments to our HTML fle
4. Change the page's background color
5. Align text
6. Bold and italicize text
Instructions
You're done with this lessonpress Save & Submit Code to fnish. If you want to
be a real boss, test out your new skills on a project and make something to show
your pals!
Here's what you're building
You'll start to see a pattern with these HTML projects: frst we'll show you what
you'll be making, then we'll walk you through actually making it!
In this course, you'll be creating your own social networking profle. Check out our
profle for King Kong in !ndex.html and the Result tab to the right.
Instructions
Hit Save & Submit Code when you're ready to start building your own profle!
You have the power!
Have you ever seen your page on a social networking site load really slowly, then
come through with only the HTML skeleton? (If not, it looks like this. Crazy, right?)
Under its fancy skin, a social networking profle is just a list of text, images, and
links. And you know all about those!
We've set up your profle page with the basics, but the details are up to you. First
of, let's make this page about you!
Instructions
1. Put your name between the <t!tle></t!tle> tags.
2. Put a picture of yourself (or anything you like!) between
the <$od"></$od"> tags. If you can't think of a good picture, use this
ninja:http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg.
?
Hint
Remember, <!mg> tags work like this:
<!mg src./&e$s!te <=/ />
A bit about you
Great! Now we know your name and what you look like, but that's about it. Your
profle page should include a little bit about you! (After all, that's the point of a
profle in the frst place.)
Instructions
Create a paragraph below your picture that mentions your age, gender, and
hometown. Don't get too carried awaywe'll get to your interests, favorite things,
and where you've lived, worked, or gone to school in the next section!
Profle sections
Nice! It's starting to look like a profle page already.
Most profle pages are divided up into sections: your interests, favorite quotes,
where you work, where you went to school, where you live, and so on. We can do
this with an unordered list!
Below the paragraph about yourself, create an unordered list. Each list item
should be a category: for example, Interests, Jobs,Favorite Quotes, Where I've
Lived, and so on.
Instructions
Pick any topics you like! You should include at least four.
Lists within lists
Now that you have your profle sections set up, it's time to add in your favorite
things!
You can do this by creating additional lists within your unordered list's <l!> tags,
like this:
<3l>
<l!>7nterests
<ol>
<l!>earn!ng to code</l!>
<l!>#atch!ng $as?et$all</l!>
<l!>Pla"!ng m3s!c</l!>
</ol>
</l!>
</3l>
Within the <l!> tag for Interests, we created an ordered list (<ol>) with three
interests.
Instructions
Go nuts with your lists within lists! The only requirement is that you have at least
one ordered list(<ol>) and one unordered list (<3l>).
Click "Stuck? Get a hint!" for more examples.
Hint
Remember, unordered lists work like this:
<3l>
<l!>:n !tem</l!>
<l!>:nother !tem</l!>
</3l>
And ordered lists work like this:
<ol>
<l!>7tem D'</l!>
<l!>7tem D)</l!>
</ol>
A list within a list might look like this:
<3l>
<l!>7nterests
<3l>
<l!>;ol-</l!>
<l!>Slee%</l!>
<l!>asers</l!>
</3l>
</l!>
<l!>1a2or!te Teams</l!>
Fancy up your font
Perfect. Your profle's really coming along!
It still looks a bit bland, though. Thankfully, you know how to fancify your fonts
with the-ont5-am!l", -ont5s!4e, and colorproperties! Which is exactly what you're
about to do.
Instructions
Spice up your profle with diferent fonts, sizes, and colors. You can do any
combination you like, so long as you use-ont5-am!l", -ont5s!4e, and color at least
once each!
?
Hint
Remember, these are all properties of thest"le attribute. To make a red <%>,
you'd write:
<% st"le./color0red/>7Em red!</%>
old! Italic! Bold!
Great work! Just one more thing before you can call your profle complete: you've
got to add just the right number of emphasizedand strong words.
Instructions
How many you use is up to you, but you should use <em> and <strong> at least
once each! Once you do, hit Save & Submit Code to fnish the exercise and bask
in the glory of your newly created profle.
Introduction
Our HTML journey has been progressing very nicely. We've covered:
1. how to set up the skeleton of an HTML fle
2. headings, paragraphs, images and links
3. font colors, sizes, and types
4. background colors, aligning text,bolding and italic izing font
In this course, we'll cover some important structural aspects of
HTML: <ta$le>s,<d!2>s, and <s%an>s!
Instructions
To get warmed up:
1. Make the heading have the font family Arial.
2. Add an image!
3. Add a second image which is clickable and links to a site. (Check the Hint
if you don't remember how to do this.)
What are tables?
Tables are very useful. We use them to store tabular data so it is easy to read!
When you want to present information neatly in a table with rows and columns
you guessed itthe <ta$le> tag is what you need.
There are many tags associated with tables, but it all starts with the <ta$le> tag,
so let's add that frst.
Instructions
1. Add an opening and closing set of<ta$le> tags to the body of this HTML
document.
2. Go to the Result view. You'll notice that nothing visible was added. That's
because our table's not populated yet! We'll learn how to do that soon.
?
Hint
Recall that an open <ta$le> tag should be followed by a closed </ta$le> tag.
Rows of information
A table is just a bunch of information arranged in rows and columns.
We use the <tr> tag to create a table row. We'll learn how to create columns
shortly, and everything will start to come together. (You don't really create
columns in<ta$le>s: instead, you tell each row how many cells to have, and that
determines your number of columns).
Instructions
We'll get to the details of table cells in a minute. In the meantime, we've added a
set of <tr></tr> tags to the table on line 9, creating a table row.
Add two more rows to the table on line 11and line 12.
A single column
Look at the HTML now. Can you tell that there are still three rows? We've added a
little more whitespace to make it easier to deal with table columns and table
data.
We've added a single <td> ("table data") cell to the frst row, essentially creating
a single column. If you view the Result tab now, you'll see that we've drawn a
border around it. it's not that impressive, but don't worry: we're about to add more
table data cells.
We're starting to add a lot of HTML elements now. Make sure to indent your tags
as you nest them so you don't get confused!
Instructions
1. In the second row, add a table data (<td></td>) cell and
type T&o between the tags.
2. In the third row, add another cell withThree between the tags.
3. Go to the Result view. You can see that we have 1 column with 3 rows,
and each row contains exactly one cell.
Hint
In between the second and third sets of<tr> tags, you want to add a data cell like
this: <td>Cell</td>. Remember: indent to avoid confusion!
Adding a second column
It may not have seemed like much, but you just created a single-column table in
the last exercise. Nice work!
Now take a look at what we have on our page. Notice in the frst table row we now
have two table data cells.
Adding a second table data cell has the efect of adding a second table column,
although if you go to the Result view, it may look funny because only the frst row
has two cells. Let's fx that!
Instructions
'. Add a <td> tag to the second <tr> tag with the value 'FGH, like
this: <td>'FGH</td>
). Add a<td> tag to the third <tr> tag with the value of 'G*,
*. Check out the preview window. We now have a total of 2 columns and 3
rows, and each row has 2 cells.
+. Sweet! We now have a basic table. Go on to the next section to fnd out
how to add a header and a title to our table.
Head of the table
Here's the table we made earlier. It's okay, but it just looks like we have a list of
famous Hollywood people (monsters?) and their birth years. To make our table
look a little more like a table, we'll use the <thead> and<t$od"> tags. These go
within the <ta$le>tag and stand for table head and table body, respectively.
The <head> HTML tag contains information about a web page (e.g. its title) and
the<$od"> tag contains the contents of the web page. In the same way,
the <thead> tag can be thought of as containing information about a table and
the <t$od"> tag containing the actual tabular data.
Instructions
Since eerything we currently hae is !ust tabular data, put eerything we hae in our
table so far between a set of <t$od"></t$od"> tags. "e#ll add the table head ne$t%
Hint
The original <tr>s should be within<t$od"> now. <t$od"> should be
within<ta$le>.
You won't notice a visual diference between this markup and the last one.
Table Heads
We have just added a <thead> tag above the<t$od">.
It will hold the heading for each column.
You add text to a <thead> similar to a<t$od">, like this:
<thead>
<tr>
<th>
8ame
</th>
<th>
1a2or!te Color
</th>
</tr>
</thead>
1. First we have an opening <thead> tag for the table head.
2. Then we have an opening <tr> tag for the row. (to start the row)
3. After that, a <th></th> cell for the Name column heading. Notice that we
use <th></th> for the table heading cells instead of<td></td>.
4. Then another <th></th> cell for the Favorite Color column heading.
5. Finally, we close the row element with a closing </tr> tag, and close out
the table heading element with a closing </thead>tag.
Instructions
We have already created the <thead></thead> element for you!
1. Inside the table heading element, add a single row using
a <tr></tr> element.
2. Within this row, add two <th></th> cells with the values 1amo3s
Monster and @!rth Year.
Check out the example above to see what the structure should look like.
Naming your table
Our table is missing a title. We want to add a title row that goes all the way across
the top.
To do so, we need to use the colspanattribute for the <th> tag. By default, table
cells take up 1 column. If we want a table cell to take up the space of 3 columns
instead of 1, we can set the cols%anattribute to 3.
It looks like this:
<th cols%an./*/>* col3mns across!</th>
Instructions
1. Go to the Result view. We've added the title row for you, but it only spans
1 column right now.
2. Make the column span 2 columns with the cols%an attribute. Adding the
attributecols%an./)/ to a <th> tag should do the trick.
3. Return to the Result view again. Our title spans 2 columns now!
Style that head!
Your table is starting to look great, but it's still a little bland. We've gone ahead
and added some styling to the table to make it a bit easier to read. It's your job to
add the fnishing touches!
Feel free to play around with any of thest"le attributes we added; you'll learn
much more about these things later during the CSS courses.
If you want to add more than one style, you just separate your styles with a
semicolon, like so:
<th st"le./-ont5s!4e0')%xB color0red/></th>
Instructions
1. Make the "Famous Monster" and "Birth Year" labels emphasized
(i.e. make them italicized).
2. Make the "Famous Monsters by Birth Year" title red.
?
Hint
Look to the previous section on strong and emphasized text for a refresher on
how to style text.
You should add a st"le attribute to the frst th in order to change its color. It's just
like how we changed the color of a paragraph with the st"le attribute!
Recap
Woosh! We've learned quite a bit.
What can you do now?
'. Write an HTML comment
). Create a list (ordered and unordered)
*. Make text stand out using <em> and<strong>
+. Change the color, size, and alignment of text using the st"le attribute
,. Create HTML tables
Instructions
Hit Save & Submit Code to complete this section and learn about two incredibly
useful tags: <d!2> and <s%an>!
'Div'ide and conquer
One of the most versatile structure tags available to you is the <d!2></d!2> tag.
Short for "division," <d!2> allows you to divide your page into containers (that is,
diferent pieces). This will come in handy when you begin learning CSS in the
next unit: you'll be able to style diferent parts of your website individually!
Check out the Result tab. You should see three blocks: one red, one blue, and
one green. Each one is its own <d!2> container.
Instructions
Now you try! On line 10, create your own<d!2> and give it the $ac?gro3nd5color0
"ello&. Use the width and height syntax we've used for the other <d!2>s as a
guide.
Link it!
Nice work! As you can probably guess, the smart use of <d!2>s will eventually
allow you to create visual HTML objects like sidebars, menus, and more.
Just like with images, you can make <d!2>s clickable by wrapping them
in <a></a> tags.
Instructions
Go ahead and make your yellow <d!2> link to your favorite site! Check the Hint if
you need a refresher.
?
Hint
Remember, the <a></a> tags go around the thing you want to make a link, like
so:
<a hre-./&e$s!te address/><d!2></d!2></
&%'()T*+, html-
&html-
&head-
&title-.esult&/title-
&/head-
&body-
&di style01width234p$5 height234p$5 bac6ground7color2red1-&/di-
&di style01width234p$5 height234p$5 bac6ground7color2blue1-&/di-
&di style01width234p$5 height234p$5 bac6ground7color2green1-&/di-
&a href01http2//google.com1-&di style01width234p$5 height234p$5
bac6ground7color2yellow1-&/di-&/a-
&/body-
&/html-
Spantastic
While <d!2> allows you to divide your webpage up into pieces you can style
individually, <s%an> allows you to control styling for smaller parts of your page,
such as text. For example, if you always want the frst word of your paragraphs to
be red, you can wrap each frst word in <s%an></s%an>tags and make them red
using CSS!
Instructions
For now, we'll continue to use the style attribute to change colors. Wrap the
word/red/ in the editor in <s%an></s%an> tags and give
the <s%an> tag st"le./color0red/. Notice how only the word between
the<s%an></s%an> tags changes color!
&%'()T*+, html-
&html-
&head-
&title-&/title-
&/head-
&body-
&p-This te$t is blac6, e$cept for the word &span
style01color2red1-red&/span-%&/p-
&/body-
&/html-
Span is the man
Great! You're really getting the hang of this. These tags can be a little tricky,
though, so let's go through one more example.
Color is just one attribute you can selectively change with <s%an> tags; you can
also change font size, font family, and any other style attribute you can think of!
Instructions
Use <s%an> tags to style the word "Impact" with a font family of Impact. Leave
the rest of the text as-isdon't include the exclamation point in the <s%an> tag!
?
Stuck? Get a hint!
For example, here's how to style t
Recap
Great work! In addition to what you've already learned, you now know how to:
1. Divide up your webpage for easy styling with <d!2> tags
2. Select pieces of text and change their properties using <s%an> tags
In the next course, we'll see how we can take much of the styling we've been
doingsuch as controlling font family, font color, and text alignmentand put it in
its own separate fle. By doing that, we can use tags like <d!2> and <s%an> to
impart style to our pages without writing st"le./color0red/every single time!
Instructions
We've given you a taste of how <s%an> can be powered by CSS in the editor.
Check it out on the Result tab. Cool, huh?
Hit Save & Submit Code to fnish this course and move on to the wonderful world
of CSS
&%'()T*+, html-
&html-
&head-
&title-*e (lde 8ancye 9oo6e&/title-
&lin6 type01te$t/css1 rel01stylesheet1 href01stylesheet.css1/-
&/head-
&body-
&h:-*e (lde Storye&/h:-
&p-&span-;&/span- long time ago there was an intrepid young
student who wanted to learn )SS...&/p-
&/body-
&/html-
Some photos on your table
You know all about tables now. But did you know that tables are useful for much
more than formatting text?
You can use a table to create a beautifully formatted grid of photos.
You'll notice we've included an extra fle in this project: st"lesheet.css. You'll be
learning about CSS in the next lesson and project, but we thought you might like
a sneak peek here. This fle will help format your HTML to keep it looking great.
Instructions
Hit Save & Submit Code to start your photo project!
Row by row
First things frst: we need to create rows for our table.
Instructions
Create a <ta$le> (complete with body) with three table rows. Check the Hint if
you need a refresher!
?
Hint
First, put in your <ta$le></ta$le> tags, then put your <t$od"></t$od"> (table
body) tags between your table tags.
You can create table rows within your table body with <tr></tr>.
Cell by cell
Great! Now we'll need three cells per row (to get nine cells altogether).
Instructions
Add three table cells per row to get a total of nine cells.
?
Hint
You can create table cells with <td></td>tags.
&%'()T*+, html-
&html-
&head-
&lin6 type01te$t/css1 rel01stylesheet1 href01stylesheet.css1 /-
&title-My +hoto +age&/title-
&/head-
&body-
&table border01<p$1-
&tr-
&td-&/td-
&td-&/td-
&td-&/td-
&/tr-

&tr-
&td-&/td-
&td-&/td-
&td-&/td-
&/tr-

&tr-
&td-&/td-
&td-&/td-
&td-&/td-
&/tr-
&/table-
&/body-
&/html-
Remember: it's better with a header
You'll want to give your table a header so everyone will know what your photos
are of and about.
To make sure your header looks nice, remember to set its cols%an attribute to 3
(since you have three columns and you want the header to go across all of them).
Instructions
Create a table header using <thead></thead>and <th></th> tags. Feel free to
call your table whatever you'd like!
?
Hint
The table header (<thead>) contains the<th></th> tags and goes after the
opening <ta$le> tag but before the frst table row.
&%'()T*+, html-
&html-
&head-
&/head-
&body-
&table border01<p$1-
&thead- table for photos&/thead-
&th-photos&/th-
&tr-
&td-&/td-
&td-&/td-
&td-&/td-
&/tr-

&tr-
&td-&/td-
&td-&/td-
&td-&/td-
&/tr-

&tr-
&td-&/td-
&td-&/td-
&td-&/td-
&/tr-
&/table-
&/body-
&/html-
Nine pictures are worth 9,000 words
Good work! Next up: fnd nine pictures. You can use any image links you like! If
you can't think of any, try searching "stock photo" using your favorite search
engine.
Remember, <!mg> tags are one of the few tags in HTML that are self-closing.
This means that instead of
<!mg src./<=/></!mg>
you should type
<!mg src./<=/ />
This is because nothing goes between the opening <!mg> tag and the closing
one, so you can safely open and close it with a single tag.
Instructions
Insert an <!mg /> between each set of <td></td> tags. Make sure to set
each srcattribute to the image URL you want the picture to be of!
&%'()T*+, html-
&html-
&head-
&/head-
&body-
&table border01:p$1-
&th-photos&/th-
&tr-
&td-&img src01http2//www.goodlightscraps.com/content/eid7ul7fitr7
<:/eid7<=.!pg1/-&/td-
&td-&img
src01http2//www.nairaland.com/attachments/<:3>333?.amadan?,id?Mubara6?+hoto
s?<4?!pg<af:f<e:=3<d@aABA:fca34@>>@=aBeA1/-&/td-
&td-&img src01http2//C.bp.blogspot.com/7
(4?@3DM'EwI/T!ediFDDubI/;;;;;;;;,h*/d'?Bn;tDSC/s@C4/eid7
mubara6lo.gif1/-&/td-
&/tr-

&tr-
&td-&img src01https2//encrypted7tbn<.gstatic.com/imagesG
H0tbn2;Fd>Ic.6g7alf>c9IpnJD77
I(F;E;d$mbC<ewB,fnc4TomAI6h4n.fAA1/-&/td-
&td-&img
src01http2//www.eKsoftech.com/islamic/images/ramKan.!pg1/-&/td-
&td-&img src01http2//www.imagesbuddy.com/images/<@</may7the7
blessings7of7allah7be7with7u7ur7family7eid7mubara67graphic.!pg1/-&/td-
&/tr-

&tr-
&td-&img src01http2//www.funroc6er.com/blog/wp7
content/uploads/=4<=/4B/Top7347)olorful7,I'7)ards78un.oc6er.)om7
<A.!pg1/-&/td-
&td-&img src01http2//C.bp.blogspot.com/7
aDsSdM+tH=6/T?4?nCmu@I/;;;;;;;;8L;/ciydhf<*grw/s<@44/eid7mubara67
greeting7cards7=4<=7pictures7photos7image7of7eid7card7happy7eid7cards7.!pg1/-&/td-
&td-&img src01http2//www.islamicity.com/global/images/photo/I)7
;rticles/,id7;l78itr??344$:B3.M+I1/-&/td-
&/tr-
&/table-
&/body-
&/html-
Link 'em up!
Perfect! Now you just need to wrap each<!mg> tag in <a></a> tags, like this:
<a hre-./htt%0//codecadem".com/>
<!mg src./htt%0//s*.ama4ona&s.com/?%c$&e$/com%an!es/+,'/logo/gr!dI*/codecadem"5logo5
$lac?.6%g/>
</a>
Remember to give each <a> tag an hre-attribute and set it equal to the web
address you want your link to go to! (Check the Hint if you're stuck.)
Instructions
Wrap each <!mg> tag in <a></a> tags, like in the example above.
There's no need to make your <!mg> srcattributes and <a> hre- attributes point
to the same web addressin fact, we encourage you to make them diferent!
?
Hint
Do you remember how <a> tags work?
<a hre-./&e$s!te address/></a>
&%'()T*+, html-
&html-
&head-
&/head-
&body-
&table border01:p$1-
&th-photos&/th-
&tr-
&td-&a href01http2//google.com1&img
src01http2//www.goodlightscraps.com/content/eid7ul7fitr7<:/eid7<=.!pg1/-&/a-&/td-
&td-&a href01http2//fb.com1&img
src01http2//www.nairaland.com/attachments/<:3>333?.amadan?,id?Mubara6?+hoto
s?<4?!pg<af:f<e:=3<d@aABA:fca34@>>@=aBeA1/-&/a-&/td-
&td-&a href01http2//youtube.com1&img src01http2//C.bp.blogspot.com/7
(4?@3DM'EwI/T!ediFDDubI/;;;;;;;;,h*/d'?Bn;tDSC/s@C4/eid7
mubara6lo.gif1/-&/a-&/td-
&/tr-

&tr-
&td-&a href01http2//netban6.com.au1&img src01https2//encrypted7
tbn<.gstatic.com/imagesGH0tbn2;Fd>Ic.6g7alf>c9IpnJD77
I(F;E;d$mbC<ewB,fnc4TomAI6h4n.fAA1/-&/a-&/td-
&td-&a href01http2//nab.com.au1&img
src01http2//www.eKsoftech.com/islamic/images/ramKan.!pg1/-&/a-&/td-
&td-&a href01http2//commban6.com.au1&img
src01http2//www.imagesbuddy.com/images/<@</may7the7blessings7of7allah7be7with7u7
ur7family7eid7mubara67graphic.!pg1/-&/a-&/td-
&/tr-

&tr-
&td-&a href01http2//westpac.com.au1&img
src01http2//www.funroc6er.com/blog/wp7content/uploads/=4<=/4B/Top7347)olorful7
,I'7)ards78un.oc6er.)om7<A.!pg1/-&/a-&/td-
&td-&a href01http2//ielts7blog.com.au1&img
src01http2//C.bp.blogspot.com/7
aDsSdM+tH=6/T?4?nCmu@I/;;;;;;;;8L;/ciydhf<*grw/s<@44/eid7mubara67
greeting7cards7=4<=7pictures7photos7image7of7eid7card7happy7eid7
cards7.!pg1/-&/a-&/td-
&td-&a href01http2//bangladesh.com1&img
src01http2//www.islamicity.com/global/images/photo/I)7;rticles/,id7;l7
8itr??344$:B3.M+I1/-&/a-&/td-
&/tr-
&/table-
&/body-
&/html-
The sky's the limit
Beautiful! You've now got a great-looking table of clickable images to display on
your rapidly growing website.
There's no reason to stop at just nine images, though; you could create an entire
album with dozens of images laid out beautifully on a table! Feel free to
experiment with linking the small table images to larger versions of the photos,
adding additional table cells, and so on.
Instructions
When you're ready, click Save & Submit Code to fnish the course!
INTRODUCTION CSS
Seeing is believing
Take a look at the HTML fle in !ndex.html. Pretty standard, right? You know all
this stuf: headers, paragraphs, images, lists, and tables. Look in the preview
pane: no surprises there. (In fact, it's pretty ugly if you ask us.)
The st"lesheet.css tab (which we'll teach you how to use in this course) contains
all the CSS styling information: where HTML elements should go, what color they
should be, how big they should be, and more.
We've commented out a crucial line in the!ndex.html fle. If you remove the
comment (the <!55 in line 4 before the text, and the 55> in line 6 after the text),
you'll be able to see the magic CSS imparts. Don't delete any of the
actual <l!n?> tag!
Instructions
Remove the comment from around the<l!n?> tag on line 4, then view the result in
the preview pane to see what you'll soon be able to do with CSS! You can click
Full Screen to see all the images.
What CSS is
CSS (which stands for Cascading StyleSheets) is a language used to describe
the appearance and formatting of your HTML.
A style sheet is a fle that describes how an HTML fle should look. That's it!
We say these style sheets are cascadingbecause the sheets can apply
formatting when more than one style applies. For instance, if you say all
paragraphs should have blue font, but you specifcally single out one paragraph
to have red font, CSS can do that! (We'll talk more about cascading in section
four.)
Instructions
Click on st"lesheet.css (it's that tab near the top of your screen, next
to !ndex.html). We've put in the CSS to make the paragraph's text red, but you
need to add the CSS that will make the text between<s%an></s%an> tags blue.
Fill it in and click Save & Submit Code!
&%'()T*+, html-
&html-
&head-
&title-8ancy 8onts&/title-
&/head-
&body-
&p-I#m a paragraph written in red font, but one of my words is
&span-blue&/span-%&/p-
&/body-
&/html-
p N
color2 red5
O
span N color2blue5
O
Why separate form from function?
Great work! Look at you. You're already writing CSS.
There are two main reasons for separating your form/formatting (CSS) from your
functional content/structure (HTML):
1. You can apply the same formatting to several HTML elements without
rewriting code (e.g. st"le./color0red/0) over and over
2. You can apply similar appearance and formatting to several HTML pages
from a single CSS fle
Loo6 at the HTML in !ndex.html. That#s a lot of <s%an></s%an> tags% ;ll those
words are in regular font, but we want them to be super fancy.
Instructions
Io to the st"lesheet.css tab and tell thes%an selector that you want the -ont5-am!l" to
be c3rs!2e. )hec6 the Hint if you need help%Hint
Let#s see... ma6ing something red meant we had to type
s%an J
color0 redB
K
So if we put in
-ont5-am!l"0 c3rs!2eB
that should fancify our font!
If it's in, it's out!
We previously showed you how to doinline styling with HTML, like so:
<% st"le./color0red/>=ed -ont!</%>
This is a less awesome way to style your website for the reasons we just
mentioned: you have to write the same code over and over, and if you want to
make a big stylistic change to several elements, you have to change every single
style tag. With a single CSS fle, you only have to make the change in one place!
There are two ways to put CSS in one place. This frst is to put your CSS
between <st"le></st"le> tags, right in the same fle as your HTML.
These <st"le> tags go inside the<head></head> of your webpage; check out
the example in the editor to the right.
Instructions
Make sense? Good! Hit Save & Submit Code to continue.
&%'()T*+, html-
&html-
&head-
&style-
p N
color2 purple5
O
&/style-
&/head-
&body-
&p-)hec6 it out% I#m purple%&/p-
&p-,id is coming&/p-
&/body-
&/html-
Link it up!
But there's an even better way.
You know you should write your CSS in a totally separate fle. But how do you
make sure your HTML fle can see that CSS information?
You do this by putting a <l!n?> tag (as you saw in the frst exercise of this course)
between the <head>...</head> tags of your HTML page. Your <l!n?> tag needs
three attributes:
'. A t"%e attribute that should always be equal to /text/css/
). A rel attribute that should always be equal to /st"lesheet/
*. A hre- attribute that should point to the web address of your CSS fle
In the editor to the right, you'll see two fles:!ndex.html and st"lesheet.css.
Instructions
Insert a <l!n?> to st"lesheet.css in!ndex.html. Check the Hint if you need help!
?
Hint
The full syntax should look like this:
<l!n? t"%e./text/css/ rel./st"lesheet/ hre-./st"lesheet.css//>
If you're getting a strange number for the font size (like 44.6363), try resetting
your zoom with Ctrl-0 or Cmd-0.
PSA: Self-closing tags
This brings us to a quick (but noteworthy!) concept in HTML: the self-closing
tag.
Because nothing ever goes between <l!n?></l!n?> tags, it's okay to use a single
set of<>s to be the opening and closing tags. You do that like so:
<l!n? t"%e./text/css/ rel./st"lesheet/ hre-./CSS fle address//>
You may have noticed us do something similar with the <!mg> tag:
<!mg src./&e$ address//>
Most tags are not self-closing, but we'll point out the self-closing ones to help
save you time and typing.
Instructions
All right! Hit Save & Submit Code to proceed to the next stop on our whirlwind
tour of CSS: syntax!
Syntax for the wintax
CSS syntax is diferent from the HTML you're used to, but don't worry: it's easy to
pick up! The general format looks like this:
selector J
%ro%ert"0 2al3eB
K
A selector can be any HTML element, such as <%>, <!mg>, or <ta$le>. You
just take of the <>s! To make a paragraph's text red with CSS, you'd type:
% J
color0 redB
K
A property is an aspect of a selector. For instance, you can change the -ont5
-am!l",color, and -ont5s!4e of the text on your web pages (in addition to many
more).
A value is a possible setting for a property.color can be red, blue, black, or almost
any color; -ont5-am!l" can be a whole bunch of diferent fonts; and so on.
You need to end each property-value with a semi-colon (B). That's how CSS
knows you're done with one pair and ready for the next.
Instructions
Okay! Time for you to write some CSS all on your own.
In the st"lesheet.css tab, make the fontcolor of the % selector green. (Check the
Hint if you need help.)
?
Hint
Remember the general syntax for CSS:
selector J
%ro%ert"0 2al3eB
K
One selector, many properties
Great work!
Another cool advantage of CSS is that you can set many properties for one
selector. For instance, if you want to set a paragraph's font, font color, and font
size, you can simply write:
% J
-ont5-am!l"0 :r!alB
color0 $l3eB
-ont5s!4e0 )+%xB
K
Remember: end each property-value pair with a semicolon!
Please note: If you have adjusted your browser's zoom, tests involving -ont5
s!4eand he!ght will not work correctly. To remedy this, please type Command+0 or
Ctrl+0 to reset your view.
Instructions
Underneath your color0 green property-value pair (but before the fnal K!), set
the-ont5-am!l" to ;aramond and the -ont5s!4eto )+%x.
?
Hint
Make sure to capitalize ;aramond as shown!
Many selectors, many properties
Good work! They say that practice makes perfect, so let's do a couple more.
(We'll talk even more about selectors in the next course.)
Instructions
1. Make all the h3 headings red.
2. Set all the paragraphs to the Courier-ont5-am!l". (Make sure to capitalize
"Courier" as shown!)
3. The second paragraph contains text between <s%an></s%an> tags. Set
the$ac?gro3nd5color of that <s%an> toE"ello&E. (See the Hint for help!)
?
Hint
Remember the syntax:
selector J
%ro%ert"0 2al3eB
K
&%'()T*+, html-
&html-
&head-
&title-I Pnow Pung 8u (er, )SS)&/title-
&/head-
&body-
&di-
&h:-"hat#s )SS forG&/h:-
&p-)SS is for styling HTML pages%&/p-
&h:-"hy use itG&/h:-
&p-It ma6es webpages loo6 &span-really rad&/span-.&/p-
&h:-"hat do I thin6 of itG&/h:-
&p-It#s awesome%&/p-
&/di-
&/body-
&/html-
h:N
color2red5
O
pN
font7family2)ourier5
O
spanN
bac6ground7color2yellow5
O
The importance of semicolons
As you start adding more and more property-value pairs for each CSS selector,
it's important to remember to put a semicolon (B) at the end of each line.
The semicolon tells CSS that one property-value pair is over and it's time to move
on to the next one. Without semicolons, it'll become confused and your page
won't look right.
Also, don't forget: all property-value pairs for a selector are surrounded by curly
braces (JK).
Instructions
The CSS in st"lesheet.css is broken; some of the curly braces (JK) are out of
whack and semicolons are missing. Your mission (should you choose to accept
it): fx this CSS!
&%'()T*+, html-
&html-
&head-
&/head-
&body-
&h:-.ecent +ro!ects&/h:-
&p-I#e started learning HTML and )SS. I hope to create my own
website soon%&/p-
&/body-
&/html-
h: N
font7family2 Lerdana5
color2 blue5
O
p N
font7family2 Iaramond5
font7siKe2 <@p$5
O
Color commentary
Great! You're really getting the hang of this.
While it's important to get all your syntax down correctly, it's also a good idea to
writecomments as you go along. Good comments will help remind you why you
did something a certain way (or will help someone else out if they're reading your
code without you there to explain it).
As you've seen, HTML comments look like this:

CSS comments, on the other hand, look like this:
/*I'm a comment!*/
Remember: the computer doesn't look at comments when fguring out what your
HTML and CSS should do, but writing good comments is a good habit you want
to pick up!
Instructions
See the CSS we've added for the p selector in st"lesheet.css? Comment it out!
(That is, put /L before the % in that tab and L/after the closing K.
Check yourself before you wreck yourself
You've learned a lot in just a few short lessons. We're impressed! Let's quickly
review to make sure you really know your stuf.
Instructions
1. Add a <l!n?> to st"lesheet.cssbetween your <head></head> tags.
2. Change the <h'> header's -ont5-am!l"to Merdana. (Make sure Verdana is
capitalized as shown!)
3. Change the <h*> header's -ont5-am!l"to Co3r!er. (Make sure Courier is
capitalized as shown!)
4. Make the paragraph text color %3r%le.
5. Add a /L CSS comment L/ to the CSS tab! It can say anything you like.
(Remember: HTML comments and CSS comments are written diferently.)
?
Hint
Feel free to peek back at earlier exercises if you need help remembering how to
do something!
Hexawhatnow?
You've got the main ideasnow it's time to dive into the nitty-gritty.
You've noticed that when we've asked you to set color properties using CSS,
we've been having you type things like color0red. You may have asked yourself:
what if I want maroon? Or fre engine red? Or more of a red-orange? Does CSS
know all those words?
The answer is no. It can, however, understand millions of colors in the form
ofhexadecimal values.
You're already extremely familiar withdecimal values: it's everyday counting! You
know when you see a number (e.g. 1,432) that each digit can only be the ten
values 0 through 9. Because there are only ten possibilities, we say that regular
counting isbase-10.
Hexadecimal counting is base-16. Each digit can be the numbers 0 through 9 or
the letters a through f! Crazy, right? Check it out:
Instructions
We've set the headers in the editor to diferent hexadecimal values, which you
can see on the CSS tab. Click over to the Result tab to see the wide range of
colors!
Roses are red...
There are a lot of tools available on the Internet for looking up hexadecimal (or
simply hex) color values.
Search for "hex color palette" or "hex color picker" with your favorite web browser
to fnd a bunch of options!
Hex values always start with a pound sign (D), are up to six "digits" long, and
are case-insensitive: that is, they don't care about
capitalization. D11C'), and DNc'), are the same color.
Instructions
Make the <h*> color Dcc(((( and the <h)>color DFa)$e).
Pixels and ems
Great work! We'll do more with colors as you learn more CSS.
When we've asked you to adjust font size, we've specifed that the unit you should
use is %x (for "pixels"), like so:
% J
-ont5s!4e0 'A%xB
K
A pixel is a dot on your computer screen. Specifying font sizes in pixels is great
when you want the user to see exactly on their screen what you designed on
yours, though it assumes your screens are of similar size.
What if the user is using a screen that's a very diferent size from yours, though
(like a smartphone screen)? Enter ems. (Don't confuse these with
the <em></em> tags we use for emphasis!)
The -ont5s!4e unit em is a relativemeasure: one em is equal to the default font
size on whatever screen the user is using. That makes it great for smartphone
screens, since it doesn't try to tell the smartphoneexactly how big to make a font:
it just says, "Hey, 1em is the font size that you normally use, so 2em is twice as
big and 0.5em is half that size!"
Check it out: we've set three diferent paragraphs to the -ont5s!4es 'em, A.,em,
and )em. For now, use whichever unit (%xor em) you're more comfortable with
we just wanted to show you em now so you're not surprised when you see it later.
Instructions

font of knowledge
We've also asked you to change the -ont5-am!l" of certain elements using CSS.
You've seen us use the fonts Verdana, Courier, and Garamond. But how many
fonts does CSS know?
The answer is: it depends. Most computers will understand popular fonts like
Verdana, Courier, and Garamond, but each individual computer has diferent
fonts installed on it. The good news is that CSS has some built-in defaults meant
to ensure your users see what you intend. They are:
serif: A font with little decorative bits on the ends of the strokes that make up
letters. Do a search on "serif" to see what we mean.
sans-serif: A plain-looking font, like this one. It doesn't have the little doohickies
on the ends of letters like a serif font does.
cursive: A scripty font! It looks like cursive writing.
We'll show you how to import your own fonts in a later course! This will help make
sure the person viewing your page has all the fonts you want them to have.
Instructions
Set the -ont5-am!l" of the <h'> header toser!-, the <h)> to sans5ser!-, and
the<h*> to c3rs!2e.
Backup values
You don't have to jump straight to a default value like c3rs!2e or sans5ser!-: you
can tell CSS to try several, going from one to the next if the one you want isn't
available.
For example, if you write:
% J
-ont5-am!l"0 TahomaC MerdanaC sans5ser!-B
K
CSS will frst try to apply Tahoma to your paragraphs. If the user's computer
doesn't have that font, it will try Verdana next, and if that doesn't work, it will show
a default sans-serif font.
Instructions
In the st"lesheet.css tab, add Times as an option before ser!-, Verdana as an
option before sans5ser!-, and Vivaldi as an option before c3rs!2e. Check the Hint if
you need help!
?
Hint
Here's a freebie. For the serif line, you should have something like
h' J
-ont5-am!l"0 T!mesC ser!-B
K
Review
Great work! You've learned a ton so far. Let's take a quick breather to review.
We've covered:
What CSS is
Why we separate form from function
CSS syntax, including (multiple) selectors, (multiple) property-value pairs,
and comments
Details of how colors, font sizes, and font families work
Instructions
Time for a little free play! Use the HTML and CSS fles to the right to practice
what you've learned. Hit Save & Submit Code when you're ready to move on.
Background color, height, and width
Remember our friend <d!2>, and how we used it to make those multi-colored
blocks? Time for you to build your own blocks! (Well, block. Let's not get ahead of
ourselves.)
There are three properties you'll need to set values for:
1. $ac?gro3nd5color, which you set to a color or hex value
2. he!ght, which you set to a value in pixels
3. &!dth, which is also measured in pixels
These exercises will give you a brief overview of the diferent HTML elements you
can select and what some of their property-value pairs are (like the new ones we
mention above). We'll cover HTML element selection more in the next course!
Instructions
In the st"lesheet.css tab:
1. Set the $ac?gro3nd5color to DccAAAA, like this: $ac?gro3nd5
color0 DccAAAAB
2. Set the he!ght to 'AA%x, like this:he!ght0 'AA%xB
3. Set the &!dth to 'AA%x, as well. Hint
Make sure you're using $ac?gro3nd5colorfor your <d!2>, not color!
Bordering on insanity
Many HTML elements support the $orderproperty. This can be especially useful
with tables.
The $order property in turn supports several values. For example, for a border 2
pixels thick, solid, and red, you'd type
selector J
$order0 )%x sol!d redB
K
Borders: pretty fancy.
Instructions
In the st"lesheet.css tab:
1. Set your tds (table data cells) to have ahe!ght of ,A%x so we can see them
better when we add our border.
2. Give your tds a $order of '%x dashed $l3e.
3. Give your ta$le a $order of '%x sol!d $lac?.
?
Hint
If you're getting weird values for your heights or border widths, try resetting your
zoom with Ctrl-0 or Cmd-0.
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<table>
<thead>
<th colspan="3">Nine Blocks!</th>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
tdNheight234p$5 border2<p$ dashed blue5
O
tableNborder2<p$ solid blac65
O
Links and text decoration
Links have a lot of the same properties as regular text: you can change their font,
color, size, and so on.
But links also have a property, text5decorat!on, that you can change to give your
links a little more custom fair. You're probably used to seeing links that are blue
and underlined, right? Well, that's not the way it has to be!
Instructions
In the st"lesheet.css tab, give your aselector a color of DccAAAA and a text5
decorat!on of none. Check out how the link changes in the Result tab!
aNcolor2Qcc44445 te$t7decoration2none5
O
HTML + CSS = BFFs
All right! Final section. Time for some review!
You're learning a lot, so from here on out, we'll do more frequent reviews to make
sure you've got a handle on all this new material.
Instructions
Okay, all on your lonesome: add a <l!n?>tag between the <head></head> tags
in the HTML tab to the right. The link should have an hre- attribute that points
tost"lesheet.css.
?
Hint
If you don't remember the syntax, checkhere for a refresher.
Many selectors, many properties
All right! Our HTML bone is connected to our CSS bone.
Next: let's review selectors, properties, and values. Remember, the syntax is
selector J
%ro%ert"0 2al3eB
K
Instructions
1. Add a pair of <h'></h'> tags inside the$od" of our HTML page. Your h1
header can say anything you want! Then, on the CSS tab, make its -ont5
-am!l" to Merdana and its color to D,H(DG+.
2. Add a pair of <%></%> tags below your h1 header. Put any text you like in
there, then head over to the CSS tab and set the-ont5s!4e to 'F%x and
its color toD+:+G+*.
Make sure to end each CSS declaration with a semicolon, like this:
h' J
-ont5-am!l"0 MerdanaB
color0 D,H(DG+B
K
?
Hint
Make sure to capitalize the "V" in "Verdana"!
If you're having trouble with your font-size, try resetting your zoom with Ctrl-0 or
Cmd-0.
Q&A Forum Glossary
Fall back!
As we've seen, sometimes a user's computer doesn't have the mega sweet fonts
we wish it had. For that reason, we give their browser a few fallback choices!
Instructions
1. Set the % -ont5-am!l" to Garamond.
2. Give h' a backup font of sans5ser!-and % a backup font of ser!-. Check the
Hint if you need a refresher!
?
Hint
Remember the syntax for backup values?
selector J
%ro%ert"0 $estMal3eC next@estMal3e
K
Size and borders
Excellent! Your page is a little bland, though. Let's add a picture with a border.
Instructions
1. Add an <!mg> to your HTML document. Its src attribute can point
anywhere! (Check the Hint if you're stuck or need a picture.)
2. On the CSS tab, set your image's he!ghtto 'AA%x and &!dth to *AA%x.
3. On the CSS tab, give your image a$order of '%x sol!d D+(F)$+.
?
Hint
Remember, your <!mg> tag needs a src, like so:
<!mg src./&e$s!te address//>
Can't fnd an image you like? Try this one:/htt%0//$!t.l"/8nM$xt/
If you're using Firefox, you can't skip adding a URL to src.//. If you do, you'll get
an !mg that's only 16px high!
Try resetting your zoom by pressing Ctrl+0 or Cmd-0.
h<N font7family2Lerdana,sans7serif5
color2Q3B@'>C5
O

pN font7siKe2<Ap$5
color2QC;C>C:5
font7family2Iaramond,serif5
O
imgN
height2<44p$5
border2<p$ solid QC@A=bC5
width2:44p$5
O
Links and text decoration
Great work! We're almost there.
Instructions
1. Add a link to your HTML page using <ahre-./3rl/>!n? text</a> tags
(check the Hint if you need a reminder). You can link to any webpage.
2. On the CSS tab, change your link's text5decorat!on to none and
its color toDccAAAA.
You're done! Revel in the glory of your newfound CSS knowledge for a moment,
then head on to the project.
h<N font7family2Lerdana,sans7serif5
color2Q3B@'>C5
O

pN font7siKe2<Ap$5
color2QC;C>C:5
font7family2Iaramond,serif5
O
imgN
height2<44p$5
border2<p$ solid QC@A=bC5
width2:44p$5
O
aN
te$t7decoration2none5
color2Qcc44445
O
What you'll be building
You've probably seen all kinds of nifty-looking buttons on your favorite websites
that link you to diferent webpages. In this project, we'll show you how to make
your own!
We've included sample images and text here, but feel free to substitute your own
in the next exercises.
Instructions
Check out the HTML and CSS we've used, and have a look at the button on the
Result tab. Hit Save & Submit Code when you're ready to start building your
button!
&%'()T*+, html-
&html-
&head-
&title-;bout Me&/title-
&/head-
&body-
&img src01http2//s:.amaKonaws.com/codecademy7
blog/assets/C@A:AB3B.png1/-
&p-"e#re )odecademy% "e#re here to help you learn to
code.&/p-&br/-&br/-
&di-
&a href01https2//www.faceboo6.com/codecademy1-8riend us
on &span-8aceboo6%&/span-&/a-
&/di-
&/body-
&/html-
img N
display2 bloc65
height2 <44p$5
width2 :44p$5
margin2 auto5
O
p N
te$t7align2 center5
font7family2 Iaramond, serif5
font7siKe2 <Ap$5
O
di N
border7radius2 3p$5
border2 =p$ solid Q@C>3,'5
bac6ground7color2 Q9)'=,,5
height2 34p$5
width2 <=4p$5
margin2 auto5
te$t7align2 center5
O
a N
te$t7decoration2 none5
color2 Q:'3>;95
font7family2 Lerdana, sans7serif5
O
span N
font7weight2 bold5
font7siKe2 <Ap$5
color2 Qffffff5
O
Drawing your button
Let's get started! First things frst: we'll need to create our button. We'll do this
with<d!2></d!2> tags.
Please note: If you have adjusted your browser's zoom, tests
involving he!ght and&!dth will not work correctly. To remedy this, please type
Command+0 or Ctrl+0 to reset your view.
Instructions
On the CSS tab, add a d!2 selector and add property: value pairs of:
1. height: 50px
2. width: 120px
3. border-color: #6495ED
4. background-color: #BCD2EE.
Your $order5st"le can be any type (dashed, solid, and so on) and you can use
any$order5&!dth you want. (We like 2px.)
&%'()T*+, html-
&html-
&head-
&/head-
&body-
code.&/p-&br/-&br/-
&di-
&/di-
&/body-
&/html-
img N
display2 bloc65
height2 <44p$5
width2 :44p$5
margin2 auto5
O
p N
te$t7align2 center5
font7siKe2 <Ap$5
O
diN
height234p$5
width2 <=4p$5
border7width2=p$5
border7color2Q@C>3,'5
border7style2solid5
O
Shaping your button
This involves a new property called border-radius. (We'll learn more about it in
later courses and projects.) This property modifes the corners of HTML objects;
it's how you get those cool rounded buttons!
Instructions
Set your d!2's $order5rad!3s to ,%x.
&%'()T*+, html-
&html-
&head-
&/head-
&body-
code.&/p-&br/-&br/-
&di-
&/di-
&/body-
&/html-
img N
display2 bloc65
height2 <44p$5
width2 :44p$5
margin2 auto5
O
p N
te$t7align2 center5
font7siKe2 <Ap$5
O
diN
height234p$5
width2 <=4p$5
border7width2=p$5
border7style2solid5
border7radius23p$5
O
Positioning your button
Nice work! Now we'll work on centering your button on the page.
We'll go over positioning in the next course or two, but we think it's a good idea to
give you a preview here. Here's how it works:
1. marg!n0 a3toB is the CSS you use to tell the browser: "Hey! Make sure to
set equal margins on each side of this HTML element." When the margins are
equal, the object is centered.
2. text5al!gn0 centerB is how you center text elements.
Instructions
On the CSS tab, set your d!2's marg!n toa3to and its text5al!gn property tocenter.
img N
display2 bloc65
height2 <44p$5
width2 :44p$5
margin2 auto5
O
p N
te$t7align2 center5
font7siKe2 <Ap$5
O
diN
height234p$5
width2 <=4p$5
border7width2=p$5
border7style2solid5
border7radius23p$5
margin2auto5
te$t7align2center5
O
Adding the link
Great! Now we want to add a link with text to our button.
In our example back in the frst exercise, you may have noticed that we
used <s%an></s%an> tags to create a diferent font color for /1ace$oo?!/, like so:
<a hre-./htt%s0//-ace$oo?.com/>1r!end 3s on <s%an>1ace$oo?!</s%an></a>
You can do this too, if you like, but it's not required.
Instructions
On the HTML tab:
Add a link (using <a></a> tags) between your <d!2></d!2> tags. You can set
its hre-attribute to go to any website, and you can make the link text itself say
whatever you want!
On the CSS tab:
Set your link's text5decorat!on to none. Give it whatever color or -ont5-am!l" you
like!
aN
te$t7decoration2none5
color2blue5
font7family2arial5
O
It's alive!
Great work! In just a few short steps, you've made a functioning button that will
send your website's visitors wherever you'd like them to go.
Feel free to go ahead and play with the settings on your button, such as changing
its colors, the font size, or the $order5rad!3svalue.
Instructions
Click on your button to have it take you wherever your heart desires! (Or, at least,
wherever your hre- attribute goes.) Then hit Save & Submit Code to fnish this
course move on to more CSS lessons.
All HTML elements are selectors
We've used a number of HTML elements as CSS selectors so far: we've styled
the HTML tags <h'></h'> with the CSS selector h',<%></%> with %, and so
on.
You may have guessed this, but if not, we'll say it outright: any HTML element can
be a CSS selector! You can modify <3l>s,<ta$le>s, and even the
entire <$od"> by selecting 3l, ta$le, and $od", respectively.
Instructions
Give it a whirl! Change the entire HTML body's $ac?gro3nd5color to DC(E)11.
?
Hint
You can target the <$od"> just like any other HTML element:
$od" J
/*CSS stuf!*/
K
Q&A Forum Gl
Multiple Selectors
As you've seen, it's possible to nest HTML elements inside one another, like so:
<d!2>
<d!2>
<%>7 l!?e tacos!</%>
So what if you want to grab <%>s that are inside two <d!2>s, and not all <%>s?
You select those in the CSS tab like this:
d!2 d!2 % J
/LCSS st3N!L/
K
Instructions
On the CSS tab, select only the h3 header nested inside three <d!2>s and
change itscolor to red.
&%'()T*+, html-
&html-
&head-
&/head-
&body-
&h:-I#m plain old font%&/h:-
&di-
&h:-Me, too%&/h:-
&di-
&h:-Me three%&/h:-
&di-
&h:-8orget you guys. I#m about to be red%&/h:-
&/di-
&/di-
&/di-
&/body-
&/html-
di di di h:N
color2red5
O
One selector to rule them all
There's also a very special selector you can use to apply CSS styling to every
element on the page: the L selector. For example, if you type
L J
$order0 )%x sol!d $lac?B
K
You'll create a two-pixel wide solid black border around every element on the
HTML page.
Instructions
Go ahead and use the universal selector to put a '%x dashed D*:,1CD border
around every element on the page. See how each element looks like it's in its
own box on the page? This is part of the HTML/CSS "box model," which we'll
cover in the next lesson.
?
Hint
#3A5FCD is a hexadecimal color for blue. It is often helpful to use hex colors
instead of just words when you want a very specifc color.
&%'()T*+, html-
&html-
&head-
&/head-
&body-
&h:-9o$es within bo$es%&/h:-
&di-
&p-+aragraph (ne&/p-
&/di-
&di-
&p-+aragraph Two&/p-
&/di-
&di-
&p-+aragraph Three&/p-
&/di-
&/body-
&/html-
Rock Your Selectors
Great work! Selectors can be a bit tricky, but the more you use them, the more
comfortable you'll become.
Instructions
Let's make sure you really know your stuf.
On the CSS tab:
1. Set all paragraph text to the hexadecimal color #00E5EE.
2. Set all paragraph text for paragraphs nested inside div tags to the hex
color #CC0000. (What color will they turn if they've already been told in step #1 to
be #00E5EE? See the Hint!)
3. Put a border with the hex color #3A5FCD around every HTML element. It
can be solid, dotted, dashed, 2px, 3px, whatever you like!
?
Hint
To target all paragraph text, you can use the % selector like this:
% J
/* enter your styles ere */
K
To target all paragraph text inside div tags, you can use the d!2 % selector like this:
d!2 % J
K
To target every HTML element, you can use the universal selector like this:
L J
K
Because saying "<%>s inside <d!2>s" is more specifc than "all <%>s," the
paragraphs outside divs will turn teal and those inside divs will turn deep red. This
behavior is called cascading, and we'll learn about it in the next section!
&%'()T*+, html-
&html-
&head-
&title-Strut *our Stuff%&/title-
&/head-
&body-
&p-I#m about to become a loely shade of teal.&/p-
&p-Me, too%&/p-
&p-I thin6 I#ll do the same.&/p-
&di-
&p-"e#re going to become a truly stri6ing scarlet%&/p-
&p-I was thin6ing more ermillion.&/p-
&p-Fo, crimson%&/p-
&/di-
&/body-
&/html-
pN
color2Q44,3,,5
O
di pN
color2Q))44445
O

RN
border2=p$ solid Q:;38)'5
O
Branching
You can think of an HTML document as a tree: elements "branch out" from the
main trunk (the <html></html> tags). The frst two big branches
are <head> and <$od">, and branches multiply and become fner as you get to
elements like <d!2>s, <ta$le>s, and text (headers and paragraphs).
Instructions
We've sketched a potential family tree out for you in the editor (check the Result
tab). When you think you've wrapped your mind around the HTML "tree," hit Save
& Submit Code!
&%'()T*+, html-
&html-
&head-
&title-The Ireat Tree of HTML&/title-
&/head-
&body-
&di id01p<1-+&/di-
&di id01p=1-+&/di-
&di id01p:1-+&/di-
&di class01space1-&/di-
&di id01title1-Title&/di-
&di id01di1-'i&/di-
&di id01head1-Head&/di-
&di id01body1-9ody&/di-
&di id01html1-HTML&/di-
&/body-
&/html-
di N
border7radius2 3p$5
border2 =p$ solid Q@C>3,'5
height2 <Ap$5
te$t7align2 center5
O
Qp< N
display2 inline5
position2 relatie5
margin7left2 <:Ap$5
O
Qp= N
display2 inline5
position2 relatie5
margin7left2 <4p$5
O
Qp: N
display2 inline5
position2 relatie5
margin7left2 <4p$5
O
Qdi N
display2 inline5
position2 relatie5
margin7left2 B4p$5
margin7top2 <4p$5
O
Qtitle N
display2 inline5
position2 relatie5
margin7left2 34p$5
O
Qbody N
display2 inline5
position2 relatie5
margin7left2 =3p$5
O
Qhead N
display2 inline5
position2 relatie5
margin7left2 @3p$5
O
Qhtml N
width2 34p$5
position2 relatie5
margin7left2 >:p$5
O
.space N
opacity2 45
O
Parents, children, and siblings
If you think of the <html> tag as the trunk of the tree, you can think of its
immediate branches<head> and <$od">as itschildren. Both tags are
children of <html>, and <html> is their parent element. Because they are both
immediate children of <html> (that is, they are both only one element away), they
are siblings.
Just like a real family, elements have children, grandchildren, great-grandchildren,
and so on (though we don't make this distinction with HTMLa child of an
element, and all that child's children, are children of the frst parent).
Instructions
For those of you who think more visually, there's a little diagram in
the !ndex.html tab to the right.
Remember: an element is a child of EVERY element wrapped around it, even if
that element is several "branches" away!
When you're ready, hit Save & Submit Code to continue.
<!DOCTYPE html>
<html> 
<head> 
<title></title> 
</head>
<body> 
<p></p> 
</body>
</html>
Swinging from branch to branch
All right! Now that you have an idea of how HTML documents are structured, it's
time to see how good you are at navigating from branch to branch.
Instructions
We've added some links in the editor to the right. On the CSS tab, target ONLY
the <a>s that are children of <l!>s and
'. Set their text5decorat!on to none
). Set their -ont5-am!l" to c3rs!2e
Don't change the link that's not part of the unordered list!
?
Hint
To target only the <a>s that are children of <l!>s, you can use:
l! a J
/* your css declarat!ons ere */
K
If you need a refresher on how to only select elements that are the children of
other elements, feel free to peek back tothis exercise.
MJE.,*
See It to Believe It
So far, we've built web pages using HTML and styled them using CSS. Our pages
look great, but they're not interactive we can't drag elements around the page,
open and close sliding panels, animate HTML elements, or add new elements to
our HTML pages simply by clicking a button.
All that's about to change, though. In this track, you're going to learn jQuery,
which will allow you to do all these things and more.
Instructions
Check out the results! Hover over each box to see what happens, then click on
each one. Click Save & Submit Code when you're ready to start learning jQuery!
&%'()T*+, html-
&html-
&head-
&lin6 rel01stylesheet1 type01te$t/css1 href01stylesheet.css1/-
&script type01te$t/!aascript1 src01script.!s1-&/script-
&/head-
&body-
&di id01red1-&/di-
&di id01blue1-&/di-
&di id01yellow1-&/di-
&di id01green1-&/di-
&/body-
&/html-
di N
height2<44p$5
width2<44p$5
display2 inline7bloc65
O
Qred N
bac6ground7color2Q8844445
O
Qblue N
bac6ground7color2Q4444885
O
Qyellow N
bac6ground7color2Q,=9,==5
O
Qgreen N
bac6ground7color2Q44AA445
O
$(document).ready(function() {
$('div').mouseenter(function() {
$(this).animate({
height: '+=10!'
")#
")#
$('div').mouse$eave(function() {
$(this).animate({
height: '%=10!'
")#
")#
$('div').c$ic&(function() {
$(this).togg$e(1000)#
")#
")#
The Document Object Model
To get the most out of jQuery, we should review how an HTML page is put
together.
An HTML document is structured according to the Document Object Model,
or DOM. It's by interacting with the DOM that jQuery is able to access and modify
HTML.
The DOM consists of every element on the page, laid out in a hierarchical way
that refects the way the HTML document is ordered. Remember how we
could think of the HTML document as a tree? You can think of the DOM the same
way. Just as with an HTML document, elements in the DOM can have parents,
children, and siblings.
If you're a little hazy on what an HTML element is, what a CSS selector is, or
what IDs and classes are, feel free to review these in the HTML and CSS track.
Instructions
Check out the code in script.js. We'll explain the code more soon, but for now the
main idea is that when the HTML document loads, the code will select an HTML
element and make it disappear.
We'll want to target the d!2 element here, so on line 2 inside the OP Q, add /d!2/.
?
Hint
Inside the empty OPQ, you'll want to enter the name of the HTML element you want
to fade away when clicked. For instance, if it were a paragraph, we'd type
OPE%EQ.-adeO3tP'AAAQB
In this case, though, we want to make our d!2 disappear.
'()*+,-.E htm$/
'htm$/
'head/
'tit$e/'0tit$e/
'$in& re$=1sty$esheet1 tye=1te!t0css1 href=1sty$esheet.css10/
'scrit tye=1te!t02avascrit1 src=1scrit.2s1/'0scrit/
'0head/
'3ody/
'div/'0div/
'03ody/
'0htm$/
div {
height:100!#
4idth:100!#
3ac&ground%co$or:5660000#
3order%radius:7!#
"
$('div').fade*ut(1000)#
")#
Changing Targets
Don't be intimidated by the amount of code you're seeingwe'll go through it
piece by piece to make sure you understand it thoroughly.
Just like the CSS d!2 refers to the HTML element <d!2>, the jQuery Ed!2E refers to
the same HTML element <d!2>. You can think of the element name passed to
jQuery as identical to the CSS element, only wrapped in quotes. So, for instance,
you could target anything of class $3tton with
OPE.$3ttonEQ.some:ct!on
As you'll remember, .$3tton in your CSS fle is how you'd target anything
ofclass./$3tton/ in your HTML fle.
Instructions
Put a selector (remember CSS selectors?) inside OPQ so instead it points to the
IDDgreen.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div></div>
<div id="green"></div>
</body>
</html>
div {
height:100px;
width:100px;
background-color:#FF0000;
border-radius:5px;
margin-bottom:5px;
}
#green {
background-color:#008800;
}
$('#green').fadeOut(1000);
});
What is jQuery?
jQuery is a library, or set of helpful add-ons, to the JavaScript programming
language. It may seem counterintuitive to learn how to use a library before
learning the actual language, but there are a few good reasons for this.
1. It takes a while to become comfortable with JavaScript, and it's trickier to
manipulate HTML elements directly with JavaScript than with jQuery. In order to
help you build awesome websites faster, we're starting you of with jQuery.
2. jQuery provides a simple interface for the underlying JavaScript. It's easier
for many users to learn jQuery frst, then dive into the nitty-gritty JavaScript
details later.
3. jQuery is much better at giving you immediate, visual results than regular
JavaScript. By the end of this lesson, you'll have built your own interactive button!
Instructions
On the scr!%t.6s tab, add the missing pieces on line 2 so that your jQuery code
calls -adeO3t on the d!2 with the IDDnotread".
?
Hint
The OPQ should contain the element you want to afect; the -adeO3t keyword
should be between OPQ. and P'AAAQB.

HTML N CSS

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML N CSS

Caricato da

Copyright:

Formati disponibili

INTRODUCTION HTML

Why learn HTML?

Potrebbero piacerti anche