Lesson: lesson-basic

This section will show some basic CSS formatting features like bold or italic text and text in different font-sizes.

PDF files

Converter PDF Preview
PDFreactor
OK
Download
PrinceXML
OK
Download
Antennahouse
OK
Download
Vivliostyle
OK
Download

Stylesheet

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url("../styles/a5.css");

div.outer {
    font-size: 14pt;
    color: red;
    text-align: justify;
    width: 80%;
    margin-bottom: 2em;
}

img {
    width: 20%;
}

.img-left {
    float: left;
    margin-right: 0.5em;
    margin-bottom: 0.25em;
}

.img-right {
    float: right;
    margin-left: 0.5em;
    margin-bottom: 0.25em;
}


table {
    border: 1px solid black;
    width: 50%;
    border-collapse: collapse;
}

td, th {
    border: 1px solid black;
    text-align: center;
}

HTML input

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>

        <div class="outer">
            <img src="kanguru.jpg" class="img-left">
            <div>
            Pulvinar non pellentesque pellentesque nisi nascetur elementum platea
    turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus
    sagittis ac mattis. Phasellus massa cum, habitasse augue sagittis, turpis
    penatibus auctor sagittis aenean in! Aenean porta tincidunt ultricies est
    lorem, facilisis dignissim tempor auctor ut sociis pulvinar eros egestas eros
    placerat.
            </div>
        </div>

        <div style="clear: both"></div>

        <div class="outer">
            <img src="kanguru.jpg" class="img-right">
            <div>
            Pulvinar non pellentesque pellentesque nisi nascetur elementum platea
    turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus
    sagittis ac mattis. Phasellus massa cum, habitasse augue sagittis, turpis
    penatibus auctor sagittis aenean in! Aenean porta tincidunt ultricies est
    lorem, facilisis dignissim tempor auctor ut sociis pulvinar eros egestas eros
    placerat habitasse.
            </div>
        </div>
    
        <div style="clear: both"></div>
    
        <div>
            <span style="font-weight: bold">This is bold</span>
        </div>
        <div>
            <span style="font-style: italic">This is italic </span>
        </div>
        <div>
            <span style="font-weight: bold; font-style: italic">This is italic + bold</span>
        </div>

        <div>
            <span style="font-size: 1em">This is font-size 1em</span>
        </div>

        <div>
            <span style="font-size: 2em">This is font-size 2em</span>
        </div>
        <div>
            <span style="font-size: 3em">This is font-size 3em</span>
        </div>
        <div>
            <span style="font-size: 4em">This is font-size 4em</span>
        </div>

        <table>
            <thead>
                <tr>
                    <th>Header: Spalte 1</th>
                    <th>Header: Spalte 2</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Footer: Spalte 1</th>
                    <th>Footer: Spalte 2</th>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>Spalte 1</td>
                    <td>Spalte 2</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>