Programming-Cheatsheets/CSS-HTML-Helper.html at master · kishkaru/Programming-Cheatsheets · 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
125
126
127
128
<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" type="text/css" href="CSS-Cheatsheet.css" >
  </head>

  <body>
    <!-- basic CSS -->
    <div class="first">
      This is using a class
      <p>Class paragraph</p>
    </div>

    <div id="second">
      <span class="link spanning">
          This is using an ID, inside of a span. <br>
        <a href="https://google.com">A class inside ID</a>
      </span>
    </div>

    <!-- font -->
    <div class="module">
        <p id="size">This text is using a font size of 20 pixels.</p>
        <p id="style">This text is in italics.</p>
        <p id="weight">This text is bold.</p>
        <p id="family">Georgia, garamond, or the default serif font </p>
        <p id="font">The styles for this text has been specified with the 'font' shorthand property.</p>
    </div>

    <!-- text -->
    <div class="module">
      <p id="variant">This text is using small caps.</p>
      <p id="uppercase">This text is uppercase.</p>
      <p id="letter-spacing">This text has extra letter-spacing.</p>
      <p id="word-spacing">This text has extra word-spacing.</p>
      <p id="color">This CSS text color is olive</p>
      <p id="align">This CSS text is aligned right</p>
      <p id="indent">This text is indented by 50 pixels.</p>
      <p id="pre">This text has a line 			break.</p>
      <a id="link" href="#">This link has no decorations, and is an inline-block (with padding). It also transitions on hover.</a>
    </div>

    <div class="module">
      <!-- background -->
      <p id="background">This text has a background color applied.</p>

      <div id="background2"></div>

      <img id="image" src="img/example.jpg" alt="this is an image"></img>

      <!-- border-->
      <p id="border">
        This text has a blue, dashed top border.
      </p>
    </div>

    <div class="module">
      <!-- margin -->
      <p id="margin">
        This text has a margin of 20 pixels on all four sides, with a green, solid border.
      </p>

      <p id="margin2">
        This text has a left margin of 60 pixels, with an orange, solid border.
      </p>

      <div style="border:1px solid blue;width:150px;">
        <p id="margin3">
          This text has a different sized margin for each side (TOP RIGHT DOWN LEFT). It is nested within a div with a blue, solid border
        </p>
      </div>

      <div style="border:1px solid blue;width:150px;">
          <p id="margin4">
            This text has a different sized margin for each pair side (TOP/BOTTOM LEFT/RIGHT). It is nested within a div with a blue, solid border
          </p>
        </div>
    </div>

    <div class="module">
      <!-- padding -->
      <p id="padding">
        This text has padding of 20 pixels on all four sides, with a pink, solid border.
      </p>

      <p id="padding2">
        This orange p has height and width applied.
      </p>

      <p id="padding3">
          This yellow p has a max width applied.
        </p>
    </div>

    <div class="module">
      <!-- positioning -->
      <div id="relative-parent"> <!-- parent must be relative -->
        <p>Here is the normal flow of content.</p>
          <div id="relative"> <!-- relative from parent -->
            This div has positioning (relatively).
          </div>
      </div>

      <div id="absolute-parent"> <!-- parent must be relative -->
        <div id="absolute"> <!-- absolute from parent -->
          This div is positioned (absolutely) 50 pixels from the top and 500 pixels from the left of its containing block. Then it is translated 50% of its width back to the left.
        </div>
      </div>

      <div id="fixed"> <!-- fixed -->
        This div is using a fixed position of 100 pixels from the top and 60 pixels from the left
      </div>
    </div>

    <div class="module">
      <!-- float -->
      <div>
        <p id="left-of-float">Feel free to check out the links in the box that's floating to the right of this text.</p>
        <div id="right-of-float">
            <a href="http://www.html.am/">HTML</a><br>
            <a href="http://www.htmlcodes.me/">Codes</a><br>
        </div>
      </div>
    </div>
  </body>
</html>