There are two types of site layout: tabular and block. And while the former is more convenient for creating simple html pages, the latter is ideal if you need to add individual elements in the form of blocks.
Instructions
Step 1
There are two techniques that will allow you to independently develop a block design: by embedding cascading style sheets into a document, or by connecting them from an external resource. Both give the same result, so there is no fundamental difference between them. In the first case, paste the following code anywhere in the style.css file:
.block1 {
}
Block1 - the name of the block, you can write any other. Between the curly braces, specify the parameters in the following format: attribute name> colon> value> semicolon (including placed before the curly brace). The following elements are commonly used:
- width - width (500px, 100%, etc.);
- height - height (200px, 25%, etc.);
- background - background color (Yellow, Red, # 000000);
- padding - padding around the content inside the block (0px, 20%);
- margin - external margins from the block (15px, 40%);
- border - frame (border: solid 0px black;);
- float - alignment (left, right);
- border-radius - rounding of corners (border-radius: 10px;).
Step 2
In the second use of CSS, add the styling between the and tags:
.block1 {
}
And add the parameters you want.
Step 3
Insert the block at the desired place on the site using the command:
Block 1
Save and refresh the page, it should appear. Keep in mind that the height alignment may vary depending on how full the content is. For example, if you set 300px, but you wrote only one line of text, it will not be displayed in full. This can be corrected, for example, using a table with the necessary parameters, which should be placed inside the block, i.e. between tags and. And so that the borders are not visible, insert the attribute
