CSS is a cascading style sheet, which is a language for describing the appearance of web pages. One of the main advantages of CSS is the ability to replace table layout with block layout.
It is necessary
HTML code editor
Instructions
Step 1
Create the first block. In HTML form, it will look like a div tag with id 'block01'. Here, the block01 identifier indicates that in the CSS description, all the properties of this block are specified for the # block01 selector.
Step 2
Describe the block in CSS. In the CSS styles, specify the name of the identifier (# block01) and in curly braces describe its parameters - width, positioning, offset, background color, etc. For example, it might look like this: # block01 {width: 150px; height: 150px; position: absolute; top: 0px; left: 0px; background-color: pink}. This description assumes that the box will be 150 pixels long and 150 pixels wide, it will be rigidly positioned in the upper left corner of the document, and its background will be colored pink.
Step 3
Give the block a relative positioning. If you use not absolute, but relative positioning in the CSS description, then you can place blocks not with a rigid snapping to the grid of coordinates, but relative to other already existing blocks. To do this, change the code position: absolute; top: 0px; left: 0px by position: relative; top: 200px; left: 100px.
Step 4
Give the block a rounding. In CSS, the border-radius statement is responsible for this. Add the following code to your stylesheet: border-radius: 8px. The block will now have rounded corners. If you only want to round some corners, describe the radius separately for each of them: border-radius: 8px 8px 0px 0px.
Step 5
Give the block a stroke. To highlight the outline of a block with a thin line, add the following code to its CSS description: border-top: 1px dashed black. This instruction means that the border of the block will be black and will be one pixel in thickness. In this case, the contour line itself will be displayed as a dashed line (dashed - a dotted line, dotted - dots, solid - a solid line).
Step 6
Set the remaining block properties. Specify in the CSS description what typeface should be used for the text inside the block, what should be the font size, alignment and indentation from the edges of the block. These properties are described in the definitions font-family, font-size, text-align, and padding.
Step 7
You can use the float property to customize the flow of one block over another. If you set it to “left”, then the rest of the elements will flow around the block on the left, and “right” - on the right. If you set the float value as “none”, the block alignment will not be set. The clear property in CSS prevents the block from flowing to the right, left, or both sides, and overrides the float statement.
