Scribd
Upload
56 views

HTML Basico

The document discusses HTML basics and introduces lists. It explains how to create ordered lists using <ol> and <li> tags, as well as unordered lists using <ul> and <li> tags. Instructions are provided to have the user practice adding lists to headings and paragraphs. Ordered and unordered lists can be nested, with one list type inside the other.

Uploaded by

Johana Retamozo Vergara
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
56 views

HTML Basico

The document discusses HTML basics and introduces lists. It explains how to create ordered lists using <ol> and <li> tags, as well as unordered lists using <ul> and <li> tags. Instructions are provided to have the user practice adding lists to headings and paragraphs. Ordered and unordered lists can be nested, with one list type inside the other.

Uploaded by

Johana Retamozo Vergara
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 38

HTML Basics

Paragraphs and headings


We're definitely making good progress! We've learned when and why we use HTML.
We've also learned how to:

a. Set up an HTML file with tags


b. Title the webpage (in the <head>)
c. Create paragraphs (in the <body>with <p> tags)

The next step is to give our paragraphs headings using heading tags. Let's start with
the <h1> tag. The content between this tag will be the biggest!

Instructions

1. In the body section, create a heading. To do this, create an <h1>tag.


2. Add content.
3. Close the element with a closing tag </h1>. (Your content should now be
between <h1> and </h1>.)
4. Underneath the heading tags, create two paragraphs using <p> tags with whatever
content you like.

_______________________________________
More about headings!
HTML actually lets us have more than one heading size. There are six heading sizes,
where <h1> is the boss and <h6> is puny!

 <h1> - The CEO

 <h2> - VP

 <h3> - Director

 <h4> - Middle management

 <h5> - Lowly assistant

 <h6> - Gets coffee 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 <h1>heading and two paragraphs.


2. Add an <h3> heading before the second paragraph.
3. Add an <h5> 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 <h2>, <h4> and<h6>. Make sure to
close all your tags!
2. Under each heading, add a short paragraph. Dont forget paragraphs need opening
and closing <p></p>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 files using a browser, and the browser renders(shows us) the file.
3. HTML files have a <head> and a<body> (just like you!)
4. In the head, we have the <title>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 <title>tags.


2. Create a <h3> sized heading in the body. Make your heading say anything you want!
(Just don't forget to close it.)
3. Create three paragraphs using <p>tags and fill them with content (e.g.about cars, your
pet, favorite city to travel—whatever 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 href="http://www.codecademy.com">My Favorite Site!</a>

1. First, there's an opening <a> tag and that tag has an attribute calledhref.
The href 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 href 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: <img>. This tag is a bit different from the others. Instead
of putting the content between the tags, you tell the tag where to get the picture
using src. It's also different because there is no ending tag. It has / in the tag to close
it: <img src="url" />.

Check out the tag to the right—it 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) aftersrc=? It's"https://s3.amazonaws.com/codecademy-


blog/assets/f3a16fb6.jpg". That tells the <img> 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 <img> tag.

Instructions
Add a second image below the first one. (Make sure it's before the closing<body> tag!)

If you can't think of a good picture, use this ninja:

https://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg

______________________________________________________________________________
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 href="http://www.codecademy.com/">
<img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg"/>
</a>

1. First we open our <a> tag and point the href tohttp://www.codecademy.com/ again.
2. But this time, instead of using text inside the <a> tag, we use an <img>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 <ahref="http://www.codecademy.com">.
3. Now create your <img> tag between your opening <a> tag and closing </a> tag. Don't
forget the src!
4. Finally, close your </a> tag after your <img> tag.
_____________________________________________________________

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 <body> tags, add two images using the <img> 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.

___________________________________________________________

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 index.html file and the Result tab for an example—we've made our very
own webpage.

Instructions
Hit Save & Submit Code to start building your own!

_____________________________________________________________________

HTML Basics II

Introduction
Let's continue learning more HTML. You've already covered a lot: how to set
up <head> and <body> 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<title> in the <head>.


2. In the body, create a paragraph (using <p>). Write anything you like!

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<li> and </li> tags.
3. Because each listed item is only on one line, we put the entire element on one line.
4. On line 13, we finish 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 <h2> sized heading called 'List of things I find 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 <li> tags.

_______________________________________________________________________________
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?

<h2>Taco Ingredients</h2>
<ul>
<li>Cheese</li>
<li>Sour Cream</li>
</ul>
Does this look familiar?

1. First, we open our list with an unordered list <ul> tag


2. For each item we wish to add to the list, we use a list item tag <li>with text in between
3. We then tell the browser we are done with our list by calling our closing </ul> tag

Instructions
1. In your <body> tag, create an <h1>tag and put the text 'Some random thoughts' inside it.
2. Under your <h1> tag, create a paragraph using the <p> tag which describes the list you
will make.
3. Finally, create an unordered list with the <ul> tag which contains a list of four random
thoughts, each of which should be placed inside of an<li> tag

_________________________________________
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 first one you close. Here's an example:

<ul><li>Tacos!</li></ul>

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.

_________________________________________
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 file without worrying about a separate CSS file! We'll learn this first 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 <!-- and end with --> like this:

<!-- This is an example of a comment! -->

2. Make the text on line 1 into a comment. Leave the text on line 3alone!

_________________________________________
Font size
Recall that <p> and </p> 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 <img> and href 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 px(short for "pixels").
For example:

<p style="font-size: 12px">

Instructions

1. On line 7, make the text size 10px.


2. On line 8, make the text size 20px.
3. On line 9, make the text size 40px.

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

_________________________________________
Font color
What is awesome about the styleattribute 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 colorand 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.

Note: do 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.

_________________________________________
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 font-family, like this:

<h1 style="font-family: Arial">Title</h1>

1. First we wrote <h1>Big title</h1>


2. Then inside the opening <h1> tag, we added a style attribute, and set it equal to "font-
family: Arial".

This styles the <h1> tag with Arial font.

We can do the same for other tags. So we could have a li:

<li style="font-family: Arial">Hello!</li>


Here's a list of available fonts.

Instructions

1. Change the font size of the first listed item (<li>) 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 first letter of Arial, Verdana, and Impact as shown!

________________________________________
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 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 style attribute again, and set it equal to "background-color: red" (or
whatever color you want).

For example, here's how to change the background color of a <p> tag to red:

<p style="background-color: red;">Hello!</p>

Instructions

1. Change the background color of the <body> tag to brown. To do so, add
the style attribute to the opening<body> 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 style attribute. And then we use "text-align:left" (or right, or center) to determine
the location of the text.

<h1 style="text-align:center">

Instructions

1. Make the <h3> heading aligned center.


2. Make the first 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 thembold?

Surprise! We don't have to use the style attribute. Here are the steps:

1. Identify the word or words you want to bold.


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.
__________________________________________________________

HTML Basics III

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
it—the<table> tag is what you need.
There are many tags associated with tables, but it all starts with the <table>tag, so let's
add that first.

Instructions

1. Add an opening and closing set of<table> 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.
________________________________________________________

Rows of information
3. A table is just a bunch of information arranged in rows and columns.
4. 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 <table>s: instead, you tell each row how many cells to have, and
that determines your number of columns).

5. Instructions
6. 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.
7. Add two more rows to the table online 11 and 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 first 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 Two between the tags.
2. In the third row, add another cell with Three 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.

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 first table row we now
have two table data cells.

Adding a second table data cell has the effect of adding a second table column,
although if you go to the Result view, it may look funny because only the first row has
two cells. Let's fix that!

Instructions

1. Add a <td> tag to the second <tr>tag with the value 1897, like this:<td>1897</td>
2. Add a<td> tag to the third <tr>tag with the value of 1935
3. Check out the preview window. We now have a total of 2 columns and 3 rows, and
each row has 2 cells.
4. Sweet! We now have a basic table. Go on to the next section to find out how to add a
header and a title to our table.
Table Heads
We have just added a <thead> tag above the <tbody>.
It will hold the heading for each column.

You add text to a <thead> similar to a<tbody>, like this:

<thead>
<tr>
<th>
Name
</th>
<th>
Favorite 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 Famous Monsterand Birth 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 colspan attribute to 3.

It looks like this:

<th colspan="3">3 columns across!</th>

_______________________________________
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
finishing touches!

Feel free to play around with any of the style 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 style="font-size:12px; color:red"></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.

'Div'ide and conquer


3. One of the most versatile structure tags available to you is the <div></div> tag.
Short for "division," <div>allows you to divide your page into containers (that is,
different pieces). This will come in handy when you begin learning CSS in the
next unit: you'll be able to style different parts of your website individually!
4. Check out the Result tab. You should see three blocks: one red, one blue, and
one green. Each one is its own<div> container.

5. Instructions
6. Now you try! On line 10, create your own <div> and give it the background-
color: yellow. Use the width and height syntax we've used for the other<div>s
as a guide.
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 <div> tags


2. Select pieces of text and change their properties using <span> tags

In the next course, we'll see how we can take much of the styling we've been doing—
such as controlling font family, font color, and text alignment—and put it in its own
separate file. By doing that, we can use tags like <div>and <span> to impart style to our
pages without writingstyle="color:red" every single time!

Instructions
We've given you a taste of how <span>can be powered by CSS in the editor. Check it
out on the Result tab. Cool, huh?

Hit Save & Submit Code to finish this course and move on to the wonderful world of
CSS.
_______________________________________________________________________________

CSS: An Overview

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 file that describes how an HTML file should look. That's it!

We say these style sheets arecascading because the sheets can apply formatting
when more than one style applies. For instance, if you say all paragraphs should have
blue font, but you specifically single out one paragraph to have red font, CSS can do
that! (We'll talk more about cascading in section four.)

Instructions
Click on stylesheet.css (it's that tab near the top of your screen, next toindex.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 <span></span> tags blue. Fill it in and click Save &
Submit Code!

_________________________________________
If it's in, it's out!
We previously showed you how to doinline styling with HTML, like so:

<p style="color:red">Red font!</p>


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 file, you only have to make the change in one place!
There are two ways to put CSS in one place. This first is to put your CSS
between <style></style> tags, right in the same file as your HTML. These<style> tags
go inside the <head></head> of your webpage; check out the example in the editor to
the right.

_________________________________________
Link it up!
But there's an even better way.

You know you should write your CSS in a totally separate file. But how do you make
sure your HTML file can see that CSS information?

You do this by putting a <link> tag (as you saw in the first exercise of this course)
between the <head>...</head>tags of your HTML page. Your <link>tag needs three
attributes:

1. A type attribute that should always be equal to "text/css"


2. A rel attribute that should always be equal to "stylesheet"
3. A href attribute that should point to the web address of your CSS file
In the editor to the right, you'll see two files: index.html and stylesheet.css.

Instructions

Insert a <link> to stylesheet.css inindex.html. Check the Hint if you need help!
The full syntax should look like this:

<link type="text/css" rel="stylesheet" href="stylesheet.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: theself-closing tag.

Because nothing ever goes between<link></link> tags, it's okay to use a single set
of <>s to be the openingand closing tags. You do that like so:

<link type="text/css" rel="stylesheet" href="CSS file address"/>


You may have noticed us do something similar with the <img> tag:

<img src="web address"/>


Most tags are not self-closing, but we'll point out the self-closing ones to help save
you time and typing.

____________________________________
Syntax for the wintax
CSS syntax is different from the HTML you're used to, but don't worry: it's easy to pick
up! The general format looks like this:
selector {
property: value;
}
A selector can be any HTML element, such as <p>, <img>, or <table>. You just take off
the <>s! To make a paragraph's text red with CSS, you'd type:

p {
color: red;
}
A property is an aspect of a selector. For instance, you can change the font-
family, color, and font-size 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; font-family can be a whole bunch of different fonts; and so on.

You need to end each property-value with a semi-colon (;). 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 stylesheet.css tab, make the font color of the p selector green. (Check the Hint
if you need help.)

__________________________________
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:
p {
font-family: Arial;
color: blue;
font-size: 24px;
}
Remember: end each property-value pair with a semicolon!

Please note: If you have adjusted your browser's zoom, tests involving font-
size and height will not work correctly. To remedy this, please type Command+0 or
Ctrl+0 to reset your view.

Instructions
Underneath your color: greenproperty-value pair (but before the final }!), set the font-
family toGaramond and the font-size to 24px.

______________________________________
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
write comments 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:

<!--I'm a comment!-->
CSS comments, on the other hand, look like this:

/*I'm a comment!*/
Remember: the computer doesn't look at comments when figuring out what your
HTML and CSS should do, but writing good comments is a good habit you want to pick
up!

________________________________________
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 specified that the unit you should use
is px (for "pixels"), like so:

p {
font-size: 10px;
}
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 different size from yours, though (like a
smartphone screen)? Enter ems. (Don't confuse these with the <em></em> tags we use
foremphasis!)

The font-size 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 different paragraphs to the font-sizes 1em,0.5em, and 2em.
For now, use whichever unit (px or em) you're more comfortable with—we just wanted
to show you em now so you're not surprised when you see it later.

________________________________________
Bordering on insanity
Many HTML elements support theborder property. This can be especially useful with
tables.

The border property in turn supports several values. For example, for a border 2 pixels
thick, solid, and red, you'd type

selector {
border: 2px solid red;
}
Borders: pretty fancy.

Instructions
In the stylesheet.css tab:

1. Set your tds (table data cells) to have a height of 50px so we can see them better
when we add our border.
2. Give your tds a border of 1px dashed blue.
3. Give your table a border of 1px solid black.
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, text-decoration, that you can change to give your links
a little more custom flair. 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 stylesheet.css tab, give your aselector a color of #cc0000 and atext-
decoration of none. Check out how the link changes in the Result tab!

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 * selector. For example, if you type

* {
border: 2px solid black;
}
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 1px dashed #3A5FCDborder 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.

Branching
You can think of an HTML document as a tree: elements "branch out" from the main
trunk (the <html></html>tags). The first two big branches are<head> and <body>, and
branches multiply and become finer as you get to elements like <div>s, <table>s, and
text (headers and paragraphs).
Can you swing it?
Good work! Let's try something a little more involved.

Remember, you can reach an element that is a child of another element like this:

div div p { /* Some CSS */ }


where in this case, we'd be grabbing any <p> that is nested somewhereinside
a <div> that is nestedsomewhere inside another <div>. If you want to grab direct
children—that is, an element that is directly nested inside another element, with no
elements in between—you can use the> symbol, like so:

div > p { /* Some CSS */ }


This only grabs <p>s that are nesteddirectly inside of <div>s; it won't grab any
paragraphs that are, say, nested inside lists that are in turn nested inside <div>s.

Instructions

1. Make all <p> tags have a font-family of Garamond. (Do NOT use the universal selector
for this! There's a better way; see the Hint for help.)
2. Make the introduction paragraph and the summary paragraph have afont-
weight of bold (this is a new property for you, but it works just like the others you've
learned).
3. Make the synopsis paragraph have the color #7AC5CD.
4. Make the paragraphs in the unordered list have the color #000000and text-
decoration underline.
_______________________________________________________________

See it to believe it
5. Excellent! You've got the hang of this, and you're starting to learn more about
cascading.
6. As we mentioned, certain selectors will "override" others if they have a
greaterspecificity value. ul li p { is more specific CSS than just p {, so
when CSS sees tags that are both <p> tagsand happen to be inside unordered
lists, it will apply the more specific styling (ul li p {) to the text inside the lists.
7. There are two selectors that are even more specific than nested selectors like
the ones above: classes and IDs. Check them out in the editor to the right.

8. Instructions
9. See how the classes and IDs alter the way the paragraph looks? (Note how
the li p { CSS overrides the p { CSS, and the class .list_item overrides
theli p { CSS.)
10. Hit Save & Submit Code to learn how to use these new selectors!
Beyond HTML elements
HTML elements can be CSS selectors, but as we saw with the universal selector *,
they're not the onlyselectors available.

There are two important selectors you can use in addition to the universal selector and
HTML elements: classesand IDs.
Keeping it classy
Classes are useful when you have a bunch of elements that should all receive the
same styling. Rather than applying the same rules to several selectors, you can simply
apply the same class to all those HTML elements, then define the styling for that class
in the CSS tab.

Classes are assigned to HTML elements with the word class and an equals sign, like
so:

<div class="square"></div>
<img class="square"/>
<td class="square"></td>
Classes are identified in CSS with a dot (.), like so:

.square {
height: 100px;
width: 100px;
}
This allows you to take elements of different types and give them the same styling.

_______________________________________
ID, please!
IDs, on the other hand, are great for when you have exactly one element that should
receive a certain kind of styling.

IDs are assigned to HTML elements with the word id and an equals sign:

<div id="first"></div>
<div id="second"></div>
<p id="intro"></p>
IDs are identified in CSS with a pound sign (#):

#first {
height: 50px;
}

#second {
height: 100px;
}

#intro {
color: #FF0000;
}
This allows you to apply style to a single instance of a selector, rather
than all instances.
Putting it all together
Well done! You're doing great.

Now it's time to put all our newfound knowledge together:

Instructions
Check out the text in the editor to the right. On the HTML tab:

1. Give the h2 header an ID of"intro".


2. Give the first h3 and first p a class of "standout". Don't do anything to the second h3
and p!

On the CSS tab:

1. Inside the #intro selector, setcolor to #B83C3A.


2. Inside the .standout selector, setcolor to #F7AC5F and font-family toVerdana.
_________________________________________
Even finer control
You've learned about class selectors. Now it's time to learn about pseudo-class
selectors.

A pseudo-class selector is a way of accessing HTML items that aren't part of the
document tree (remember the tree structure we talked about earlier?). For instance,
it's very easy to see where a link is in the tree. But where would you find information
about whether a link had been clicked on or not? It isn't there!

Pseudo-class selectors let us style these kinds of changes in our HTML document. For
example, we saw we could change a link's text-decoration property to make it
something other than blue and underlined. Using pseudo selectors, you can control the
appearance of unvisited and visited links—even links the user is hovering over but
hasn't clicked!

The CSS syntax for pseudo selectors is


selector:pseudo-class_selector {
property: value;
}
It's just that little extra colon (:).

Links
There are a number of useful pseudo-class selectors for links, including:

a:link: An unvisited link.


a:visited: A visited link.
a:hover: A link you're hovering your mouse over.

Let's try a few!


First child
Another useful pseudo-class selector is first-child. It's used to apply styling
to only the elements that are the first children of their parents. For instance:

p:first-child {
color: red;
}
Would make all paragraphs that are the first children of their parent elements red.
Nth child
Well done! You can actually select anychild of an element after the first child with the
pseudo-class selector nth-child; you just add the child's number in parentheses after
the pseudo-class selector. For example,

p:nth-child(2) {
color: red;
}
Would turn every paragraph that is thesecond child of its parent element red.

The element that is the child goes before :nth-child; its parent element is the
element that contains it.
Pseudo selectors
What you'll be building
We'll be taking advantage of CSS's powerful class and ID selectors to visually
separate different classes of HTML elements—in this case, our friends from our family
members and our mortal enemies.

Check out the code in the HTML and CSS tabs, then take a look at the Result tab to
see what the fruits of your labor will be.
https://github.com/ummahusla/Codecademy-Exercise-

Answers/tree/master/Language%20Skills/HTML%20%26%20CSS

You might also like