Lesson 05 — Divs, Spans & Styles

In this lesson we will learn about the div and span tags and how to apply stylings to these tags.

Div Tags

The <div> tag defines a division or a section in an HTML document. The <div> tag is used as a container for other HTML elements, which we can then apply styles. Any sort of content can be put inside the <div>.

Lets open our project and enter something similar to following code.

<div class="box1" style="border: 1px solid blue; border-radius: 10px; margin: 10px 10px 10px 10px; padding: 10px 10px 10px 10px; width: 300px;">
  <h1>Small box</h1>
  <p>Lorem ipsum...</p>
</div>

Your project should look something like this.

A styled div container

The interesting parts of the code here are all in the style attribute.

style="border: 1px solid blue; border-radius: 10px; margin: 10px 10px 10px 10px; padding: 10px 10px 10px 10px; width: 300px;"

But we’ll explain that in a moment.

Span Tags

The HTML <span> element is similar to div tag but instead of grouping many tags on a page it is used to group section of a line on your page, which we can then apply styles. At this stage we will only be placing text inside the <span>.

Let’s adjust our code to the following

<div class="box1" style="border: 1px solid blue; border-radius: 10px; margin: 10px 10px 10px 10px; padding: 10px 10px 10px 10px; width: 300px;">
  <h1>Small box</h1>
  <p>
    Fortnite is an online video game developed by Epic Games
    and released in 2017. It is available in
    <span style="color: red; font-size: 24px;">
      three distinct game
    </span>
    mode versions that otherwise share the same general gameplay
    and game engine.
  </p>
</div>

Your project should now look like this

A styled div container and span group

So now we’re able to group many tags into a section and many words into a special group.

Style Attribute

You’ve already seen the style attribute in play. It’s fun and powerful. This is where you get to shape your website to a look and feel that’s unique to you.

We used the following six style properties in the code above:

1. Border: https://www.w3schools.com/css/css_border_shorthand.asp
2. Border Radius: https://www.w3schools.com/css/css_border_rounded.asp
3. Margin: https://www.w3schools.com/css/css_margin.asp
4. Padding: https://www.w3schools.com/css/css_padding.asp
5. Width: https://www.w3schools.com/css/css_dimension.asp
6. Color: https://www.w3schools.com/css/css_colors.asp

Read through the w3schools examples above and see if you can come up with your own examples.

Margins & Paddings

Borders, width and color (sorry for the US spelling but that’s what is used when coding) are pretty self explanatory as to their function but it is probably worth explaining margins and padding a little more…

The margin properties are used to create space around elements, outside of any defined borders.

The padding properties are used to generate space around an element’s content, inside of any defined borders.

Margin, Border and Padding Layout

When setting out margin and padding pixel dimensions it is important to note that they start from the top and work around in a clockwise direction.

padding: 20px 15px 10px 5px; 

So the code above has the following:

1. padding-top is equal to 20 pixels
2. padding-right is equal to 15 pixels
3. padding-bottom is equal to 10 pixels
4. padding-left is equal to 5 pixels

Tips & Tricks

1. Centering

To center you div all you need to do is set a width to your desired pixels and add the value of ‘auto’ to your left and right margin property.

style="margin: 10px auto 10px auto; width: 300px;">

Don’t forget that trick… it’s a good one.

2. Colours

You may remember that the first time you saw a div tag was back in our very first session, Lesson 01 — Django Webserver. There we also made use of colours with the following style properties.

<div style="backgroud: blue; color: white;">
  Enter message here...
</div>

There are named colours that you can use as per this link; else you can try entering the hex code. Google ‘hex color picker’ and Google should provide you with this great tool.

Google’s Colour Picker

Now all you have to do is move the circle around and then copy the 6 alpha-numeric code (including the #) and place it as the value for your style properties.

<div style="backgroud: #32a852; color: #d9d63f;">
  Enter message here...
</div>

Play around with the colours and try using them in the border property you have just learned about.