css_ref_table_project.github.io/index.html at main · ccadarn/css_ref_table_project.github.io · GitHub

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./Resources/styles.css">
    <title>Cheatsheets by ccadarn</title>
</head>
<body>
    <header><h1>Cheatsheats</h1></header>

    <main> <!--CSS Cheatsheet table-->
        <header>
          <h2 class="cssCheat">Common CSS properties</h2>
        </header>

        <section><p><strong>CSS (Cascading Style Sheets)</strong> provides a wide range of properties that you can use to style and format HTML elements.
                    Here are some common CSS properties and their descriptions:</p>
        </section>

        <section>
            <table>
                <tr>
                    <th>Name</th>
                    <th>Description</th>
                </tr>
                <tr>
                    <td><strong>Color</strong></td>
                    <td>Sets the text color of an element</td>
                </tr>
                <tr>
                    <td><strong>background-color</strong></td>
                    <td>Sets the background color of an element</td>
                </tr>
                <tr>
                    <td><strong>font-size</strong></td>
                    <td>Specifies the size of the text</td>
                </tr>
                <tr>
                    <td><strong>font-family</strong></td>
                    <td>Defines the font used for text</td>
                </tr>
                <tr>
                    <td><strong>font-weight</strong></td>
                    <td>Sets the boldness of the text</td>
                </tr>
                <tr>
                    <td><strong>text-align</strong></td>
                    <td>Aligns the text within an element (left, right, center, or justify)</td>
                </tr>
                <tr>
                    <td><strong>text-decoration</strong></td>
                    <td>Adds decorations to the text (underline, overline, line-through, etc.)</td>
                </tr>
                <tr>
                    <td><strong>padding</strong></td>
                    <td>Sets the space between the content and the border of an element</td>
                </tr>
                <tr>
                    <td><strong>margin</strong></td>
                    <td>Defines the space outside an element</td>
                </tr>
                <tr>
                    <td><strong>border</strong></td>
                    <td>Sets the border properties (width, style, color) of an element</td>
                </tr>
                <tr>
                    <td><strong>width</strong></td>
                    <td>Specifies the width of an element</td>
                </tr>
                <tr>
                    <td><strong>height</strong></td>
                    <td>Specifies the height of an element</td>
                </tr>
                <tr>
                    <td><strong>display</strong></td>
                    <td>Determines how an element is displayed (block, inline, inline-block, etc.)</td>
                </tr>
                <tr>
                    <td><strong>position</strong></td>
                    <td>Sets the positioning method for an element (static, relative, absolute, fixed)</td>
                </tr>
                <tr>
                    <td><strong>float</strong></td>
                    <td>Positions an element to the left or right of its container.</td>
                </tr>
                <tr>
                    <td><strong>clear</strong></td>
                    <td>Specifies whether an element should be moved below floating elements</td>
                </tr>
                <tr>
                    <td><strong>opacity</strong></td>
                    <td>Sets the transparency of an element</td>
                </tr>
                <tr>
                    <td><strong>transition</strong></td>
                    <td>Specifies the transition effects for an element (property, duration, timing function)</td>
                </tr>
                <tr>
                    <td><strong>box-shadow</strong></td>
                    <td>Adds a shadow effect to an element</td>
                </tr>
                <tr>
                    <td><strong>border-radius</strong></td>
                    <td>Rounds the corners of an element</td>
                </tr>
            </table>
        </section>

        <section>
            <p>
                These are just a few examples of common CSS properties.
                CSS provides a vast array of properties that allow for precise control over the appearance and layout of web pages.
                It's important to note that different properties apply to different types of elements, so it's helpful to consult
                CSS documentation or references for a comprehensive list and usage details of CSS properties.
            </p>
        </section>

    </main>

    <foother></foother>

</body>
</html>