Materialien zum Unterricht

Formatting with CSS - IDs & Sections

Setting Page Width

To ensure the page looks similar on all screens, the maximum width of the content should be enforced.
If the screen is smaller, the page can automatically adjust to the width.

To create a specific section, use the div tag in HTML.
<div>

These sections can be uniquely named using IDs.
Structure: id="unique name"

Task:
Create a new section with the ID "seite" in the HTML document index.html that encompasses the entire page.
To do this, specify a section after the <body> tag:
<div id="seite">
Before the closing body tag </body>, the section must be closed:
</div>

Insert div

This section can now be styled in style.css.

ID tags can be styled by prefixing them with the symbol #:
#seite{}

The maximum width of the text area should be 65 em.
The section should appear centered on the screen.
To make the section more noticeable, it should have a different background color.

The unit em corresponds approximately to the width of the letter "M" and is calculated by the browser.
max-width specifies the width.
margin:auto; centers the section on the screen.

Format ID

Border and Padding

The page should have a border and padding.

The border requires 3 specifications:

  1. 1px: the width of the border
  2. solid: the type of border; "solid" means a continuous line
  3. #000099: the border color

See also: Selfhtml: Border

Task:
The text area should have a border.
Add the following to the entry #seite: border: 1px solid #009;

Note: There are various border styles:
dotted = gepunktet
dashed = gestrichelt
solid = durchgezogen
double = doppelt durchgezogen
groove = 3D effect
ridge = 3D effect
inset = 3D effect
outset = 3D effect

To ensure the text doesn't stick to the border, the section can be padded with padding.
The value specifies the distance between the border and the text.

Task:
Add the following CSS code to #seite: padding: 1em;
This will insert a distance of 1 em between the border and the text.