Divs

Divs allow you to divide your page in sections and add style to each portion. You can make use of this using CSS. By adding classes to your divs you can change the colour, size and more of whats in your div. To create a div you put the <div> and </div> tags around whatever you wnat to be in your div. Try to create a div around some text in the textbox below with the tags <div> and </div>. It won't do anything now but it soon will be extremely useful.

Spans

Spans are very similar to divs and have much the same purpose. One of the only major differences is that a <div> tag is a block element meaning that it always starts on a new line whereas a <span> tag is an inline element meaning that it only takes up the ampunt of space that it has to and is manipulated by other elements.

Activity 1

Now we will add the class "section1" and style to our text and surrounding area. We will use previous style tags aswell as new ones. We will use the tags: text-color and background-color in our stylesheet. Add a class to the div and then add the properties of background-color and text-color. Make the text colour red and the background-color hot pink.

©{{CodeIt}}School 2023