Let’s start with the following code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    It was boiling. Flabby shorks<br>
    Pecked at the hay,<br>
    And grunted like pigs,<br>
    Like mumsies in a movie.<br>
    
</body>
</html>

From now on, I will only write what is in the body.

So, modern HTML code consists of about 95% combinations of the div tag, which we have not mentioned yet for some reason.

Unlike the tags we looked at in the previous task, this tag does not affect the layout in any way, which is why it is an ideal candidate as a kind of shell for content.

Let’s try wrapping the code in a div tag

<div>
    It was boiling. Flabby shorks<br>
	They scratched at the roof,<br>
    And the pigs grunted,<br>
    Like mumsies in a movie.<br>
</div>

Everything looks exactly the same

Why do we need it? To specify styles for each block.

Styles

For example, I want the text to be centred. How do I do that?

This is where the so-called attributes come in handy. Let’s add an attribute to specify the style

and write in it the style that will indicate that we want to align the text in the centre (text-align style)

Imgur

Let’s check

We can specify several styles. For example, I can specify that all text should be bold (font-weight style):

Imgur

In general, any style has the following form:

name: value;

Accordingly, if there are several styles, we write

name1: value1; name2: value2; ...

In essence, the div tag is a generalised tag that allows for more precise customisation of text display.

I can use as many div tags as I want

<div style="text-align: centre; font-weight: bold;">
    It was boiling. Flabby shorks
</div>

<div style="text-align: right; text-decoration: underline;">
    They were peering through the canopy,
</div>

<div style="text-align: left; text-decoration: line-through;">
    And the pigs grunted,
</div>

<div  style="text-align: centre; font-style: italic;">
    Like mumsies in mov.
</div>

plus there is no need to use a line break tag, since div by default occupies the entire line and does not allow other divs to be on the same line.

Border

In general, you need to understand the behaviour of the div block.

It occupies the entire distance from the left to the right edge and expands in height depending on the content.

Let’s add a border to our block. To do this, we use the border style

<div style="text-align: centre; border: 1px solid black;">
    It was boiling. Flabby shorks
</div>

The result will be as follows

The format of the border style is as follows:

  • border: <line thickness> <line type> <line colour>

And if you cram in more text, it will start to expand the area vertically

<div style="text-align: centre; border: 1px solid black;">
    One spring day, at the hour of an unusually hot sunset, in Moscow, 
    at the Patriarch's Ponds, two citizens appeared. 
    The first of them, dressed in a grey summer suit, 
    was short, well-fed, bald, carrying his respectable hat 
    in his hand like a pie, and on his clean-shaven face sat 
    supernatural-sized glasses in black horn-rimmed frames. 
    The second was a broad-shouldered, reddish-haired, curly-haired young man in
     a checked cap tilted back on his head, wearing a cowboy hat, 
     chewed white trousers and black slippers.
</div>

<div style="text-align: right; text-decoration: underline;">
    They peered through the canopy,
</div>

<div style="text-align: left; text-decoration: line-through;">
    And the pigs grunted,
</div>

<div  style="text-align: centre; font-style: italic;">
    Like mumsies in a mov.
</div>

By the way, another interesting point is that despite hyphenation in the text, it is ignored in HTML, but nevertheless, the browser automatically hyphenates the text and expands the area so that the text fits on the page.

Padding inside the frame

Another very important style that is often used is padding. Roughly speaking, this is the distance from the text to the border of the block. It can be set in three different ways:

  • padding: <padding from each edge> (for example, padding: 8px)
  • padding <padding at the top and bottom> <padding on the left and right> (e.g. padding: 8px 16px)
  • padding <padding at the top> <padding on the right> <padding at the bottom> <padding on the left> (e.g. padding: 8px 16px 8px 16px)
<div style="text-align: centre; padding: 8px 16px; border: 1px solid black;">
    One spring day, at the hour of an unusually hot sunset, two citizens appeared in Moscow, 
    at the Patriarch's Ponds. 
    The first of them, dressed in a grey summer suit, 
    was short, well-fed, bald, carrying his respectable hat 
    in his hand like a pie, and on his clean-shaven face sat 
    supernatural-sized glasses in black horn-rimmed frames. 
    The second was a broad-shouldered, reddish-haired, curly-haired young man in
     a checked cap tilted back on his head, wearing a cowboy hat, 
     chewed white trousers and black slippers.
</div>

Margin outside the frame

This is also used regularly. Let me add frames to all divs:

<div style="text-align: centre; padding: 8px 16px; border: 1px solid black;">
    <!-- this is a comment, no need to copy it, I put it here so as not to copy the entire text ...  -->
</div>

<div style="text-align: right; border: 1px solid black; text-decoration: underline;">
    They peered through the canopy,
</div>

<div style="text-align: left; border: 1px solid black; text-decoration: line-through;">
    And the pigs grunted,
</div>

<div  style="text-align: centre; border: 1px solid black; font-style: italic;">
    Like mumsies in mov.
</div>

It all looks stuck together:

So, outer borders allow you to remove this stickiness. The format is the same as for padding

  • margin: <indentation from each edge> (for example, margin: 8px)
  • margin <indentation at the top and bottom> <indentation on the left and right> (for example, margin: 8px 16px)
  • margin <indentation at the top> <indentation on the right> <indentation at the bottom> <indentation on the left> (for example, margin: 8px 16px 8px 16px)

add:

<div style="margin: 8px 0; text-align: centre; padding: 8px 16px; border: 1px solid black;">
    <!-- ...  -->
</div>

<div style="margin: 8px 0; text-align: right; border: 1px solid black; text-decoration: underline;">
    They peered through the canopy,
</div>

<div style="margin: 8px 0; text-align: left; border: 1px solid black; text-decoration: line-through;">
    And the pigs grunted,
</div>

<div  style="margin: 8px 0; text-align: centre; border: 1px solid black; font-style: italic;">
    Like mumsies in a movie.
</div>

Now that’s beautiful:

Block background

Often you want to highlight or colour a block. To do this, use the background style. It has many different forms, but we will look at two: for filling with a single colour or for filling with a gradient

  • background: <colour in hex format> (for example: background: #a6ff00)
  • background: linear-gradient(<gradient angle><colour in hex format>, <colour in hex format>); (for example, inear-gradient(90deg, #00aeff, #ffa6f3)
<div style="background: #a6ff00; text-align: centre; margin: 8px 0; padding: 8px 16px; border: 1px solid black;">
    <!-- ...  -->
</div>

To adjust the colour, simply hover your mouse over the colour and wait a moment:

Imgur

The result will look something like this:

The gradient is created like this

<div style="background: linear-gradient(90deg, #00aeff, #ffa6f3); text-align: right; margin: 8px 0; border: 1px solid black; text-decoration: underline;">
    They were peering through the canopy,
</div>

and it looks like this:

Block width

Sometimes you really want to limit the size of a block. This is where the width property comes in handy. The format is simple:

  • width: <width> (for example: width: 300px)
<div style="width: 300px; background: #a6ff00; text-align: centre; margin: 8px 0; padding: 8px 16px; border: 1px solid black;">
    <!-- ...  -->
</div>

It is not necessary to specify the size in px; you can specify it in percentages, for example, 50%:

<div style="width: 50%; background: #a6ff00; text-align: centre; margin: 8px 0; padding: 8px 16px; border: 1px solid black;">
    <!-- ...  -->
</div>

However, it will still not take up 50 per cent. In reality, only the text itself will occupy 50%, and there will also be padding, margin, and even border width

To correct this behaviour, you need to add the property box-sizing: border-box;, like this:

<div style="box-sizing: border-box; width: 50%; background: #a6ff00 ; text-align: centre; margin: 8px 0; padding: 8px 16px; border: 1px solid black;">
    <!-- ...  -->
</div>

Then everything will be clear.

Don’t be alarmed that we are writing so much in this unfortunate style attribute. In the next task, we will learn how to create classes, and writing will become much more comfortable.

Highlighting individual words or sentences (span)

In addition to controlling the appearance of the blocks themselves, you can also control the appearance of individual parts of the text.

The span tag is used for this. It is also used as a text wrapper.

The main difference from div is that it does not add line breaks.

This means that I can select a single word and, for example, change the background colour of the text:

<div style="...">
    One spring day, at the hour of an unusually hot sunset, in <span style="background: red;">Moscow</span>, 
    at the Patriarch's Ponds, two citizens appeared. 
    The first of them, dressed in a grey summer suit, 
    was short, well-fed, bald, carrying his respectable hat 
    in his hand like a pie, and on his clean-shaven face sat 
    supernatural-sized glasses in black horn-rimmed frames. 
    The second was a broad-shouldered, reddish-haired, curly-haired young man in
     a checked cap tilted back on his head, wearing a cowboy hat, 
     chewed white trousers and black slippers.
</div>

It will look like this:

I can add padding:

<div style="width: 50%; box-sizing: border-box; background: #a6ff00 ; text-align: centre; margin: 8px 0; padding: 8px 16px; border: 1px solid black;">
    Once upon a time in spring, at the hour of an unusually hot sunset, in <span style="padding: 8px; background: red;">Moscow</span>, 
    <!-- ...  -->
</div>

It looks strange, doesn’t it?

The thing is, span tries not to mess with line spacing and the standard logic of how text behaves.

But often you want to really highlight a word. To do this, you add a special style display: inline-block;, like this:

<div style="width: 50%; box-sizing: border-box; background: #a6ff00 ; text-align: centre; margin: 8px 0; padding: 8px 16px; border: 1px solid black;">
    Once upon a time in spring, at an unusually hot sunset, in <span style="display: inline-block; padding: 8px; background: red;">Moscow</span>, 
    <!-- ...  -->
</div>

then it looks normal

that’s how it is =)

Well, I think that’s enough for now, now I can do my homework

Task

Find a text with three paragraphs. And format it as follows.

  • The first paragraph should be centred.
  • The second paragraph should be right-aligned and 500px wide.
  • The third paragraph should be left-aligned and have a width of 50%.
  • All paragraphs should be framed (each with its own frame colour) and have padding of 8px 16px and margin of 8px.
  • Each paragraph should have its own background colour, and at least one paragraph should use a gradient as its background.
  • Highlight all adjectives with some colour
  • Highlight all proper names so that they stand out with padding; you can even use gradients as backgrounds and frames.

Something like this (basically, the trashier, the better =)