div and span


There are two HTML elements I haven't told you about, because they wouldn't make sense until now.

These elements are div and span. They wouldn't make sense because they don't do anything on their own - they're just boxes you can put around things to group them together.

With combined with CSS, though, you can do some pretty interesting things.

span

In the following examples, I'll be using this HTML:

I can't get enough <span>tacos</span>. 

span is usually used for a piece of text inside of something. You can make it pretend to be a <b>:

span{ 
  font-weight: bold; 
} 

I can't get enough tacos.

or an <i>:

span{ 
  font-style: italic; 
} 

I can't get enough tacos.

or both:

span{ 
  font-style: italic; 
  font-weight: bold; 
} 

I can't get enough tacos.

It doesn't have any default style, so you can make it whatever you want it to be.


div

In the following examples, I'll be using this HTML:

<div>I can't get enough tacos.</div> 

divs are just like spans, but for putting boxes around other things.

You can make the box red:

div{ 
  background-color: red; 
} 
I can't get enough tacos.

Or anything you could do with a span:

div{ 
  font-weight: 100;
} 
I can't get enough tacos.

Challenge

Make this HTML:

<div>I <span>love</span> cake and <span>ice-cream</span></div>

look like this:

Screen Shot 2016-07-25 at 7.12.32 PM

without editing the HTML.


Solutions

Try this challenge on your own first, then come back here to see other people's solutions.

Try this challenge on your own first, then come back here to see other people's solutions.