Posts html and css
Post
Cancel

html and css

HTML Notes

The notes for the edX course: Programming for the Web with Javascript can be found in the following links.

JavaScript Notes

The notes of a YouTube online course Learn JavaScript - Full Course for Beginners is here.

HTML

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
<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <link href=" " type="text/css" rel="stylesheet">
    </head>
    <body>
        <h1>Head 1</h1>
        <h2>Head 2</h2>
        <p>This is a paragraph.<span>a part in the paragragh.</span> Inside this paragragh, we could use <em>italics</em> and <strong>bold</strong> to emphasize words.</p>
        <a href="">a link</a>

        <!-- image -->
        <img src="" alt=""/>

        <!-- video -->
        <video src="" controls></video>

        <!-- tables -->
        <table>
            <thead>
                <th scope="col"></th>
            </thead>
            <tbody>
                <th>a</th>
                <td>1</td>
            </tbody>
            <tfoot>
                <th>total</th>
                <td>4</td>
            </tfoot>
        </table>
    </body>
</html>

CSS

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
h1 {
}
.class {
    color: blue;
    background-color: azure;
    background-image: url("https://www.example.com/image.jpg");
    /* Or use the local directory */
    background-image: url("local directory");
    font-size: 2em; /* 18px */
    font-family: Georgia;
    font-weight: bold; /* normal */
    width: 100px; /* 100% */
    height: 200px;
    text-align: center; /* left, right */
    opacity: 0.5;   /* 0-1 */
}
#id {
    width: 100px;
    height: 200px;
    /* border, padding, margin */
    
    border: 1px solid red; /* width style color*/
    border-radius: 5px;

    padding: 10px;
    padding: 2px 4px 2px 4px; /*clockwise rotation*/
    padding: 2px 4px; /* vertical: 2, horizontal: 4 */

    margin: 5px;
    margin: 2px 4px 2px 4px;
    margin: 2px 4px;
    margin: 0 auto; /*horizontally centered */
    margin-right: 3px; 
}
p.class {
    min-width: 300px;
    max-width: 400px;
    min-height: 300px;
    max-height: 400px;

    overflow: auto; /* scroll, hidden, visible */
}
.class li {
    box-sizing: content-box; /* border-box */
}
/* resetting defaults */
* {
    margin: 0;
    padding: 0;
}

Box Model Magin collapse

Google Dev Tools

Use Command + Shift + c to open Chrome Dev Tools

Updated Feb 23, 2020 2020-02-23T15:14:05-06:00
This post is licensed under CC BY 4.0