milestones-html/basic-css.html at master · JTaylor-Code/milestones-html · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>HTML MilesStones Part 5</title>
    <style>
      #cpara{color: blue;}
      #talign{text-align: center;}
      #ttransform{text-transform: uppercase;}
      #lheight{line-height: 80%;}
      #lspacing{letter-spacing: 6px;}
      #ffamily{font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;}
      #fsize{font-size:40px;}
      #fstyle{font-style: italic;}
      #fweight{font-weight: 600;}
      h2{color :red;}
      .greentext{color:green;}
      .sul{list-style-type: square;}
      #blackadder{margin: 30px;
              border: 10px solid red;
              padding: 10px; }
      #unlist .listclass{
        color:blue;
      }
      #children > p{
        color:green;
      }

    </style>
  </head>
  <body>
    <h1>
      Basic CSS Documentation
    </h1>
    <p id="cpara">
      We use the style tag with the <code>color</code> property, calling on
      the id of this paragraph to make it blue.
      Lorem Ipsum Lorem Ipsum Lorem Ipsum
      Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
    </p>
    <h2>Text Spacing</h2>
    <p id="talign">
      For this next paragraph, we are using the <code>text-align: center</code> property of css,
      which aligns the elements that it is called on to become centered, in the middle of the page.
      Lorem Ipsum Lorem Ipsum Lorem Ipsum
      Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
    </p>
    <p id="ttransform">
      This next paragraph utilizes the <code>text-transform: uppercase</code> css property, which
      will transform every letter to its corresponding uppercase letter. Lorem Ipsum Lorem Ipsum Lorem Ipsum
      Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
    </p>
    <p id="lheight">
      This current paragraph will use the <code>line-height: 80%</code> property, which smushes the lines
      closer together. The recommended value is 160%, and anything larger will make the lines farther apart;
      and anything smaller will make the lines seem closer together. Lorem Ipsum Lorem Ipsum Lorem Ipsum
      Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
    </p>
    <p id="lspacing">
      Using the <code>letter-spacing</code> property, you can choose how many pixels are between each letter, this line will have
      6 pixels between each one.
    </p>
    <h2>Fonts</h2>
    <p id="ffamily" class="greentext">
      Using the <code>font-family</code> css property, we can use the franklin gothic medium font style, or any other font style for our text.
    </p>
    <p id="fsize" class="greentext">
      Using the <code>font-size</code>, we can change the size of the fonts that we want to use, making our text larger or smaller.
    </p>
    <p id="fstyle" class="greentext">
      Using <code>font-style</code>, we can furthermore alter the style of a text, to italics or the very similar oblique, this sentence is in
      the style italics.
    </p>
    <p id="fweight" class="greentext">
      Using <code>font-weight</code>, we can make the text bolder, either by using the values of bold, or 100-900, where 400 is the normal, here it is
      in 600.
    </p>
    <h2>Background</h2>
    <div style="background-image: url(https://previews.123rf.com/images/dumrongsak/dumrongsak1811/dumrongsak181100006/115991334-blue-ripple-water-surface-background-light-blue-sea-ripple-background.jpg);">
    inside this we can write text, using the <code>background-image</code> property to change the background for the page or a section
    </div>
    <div style="background-color: lightpink;">
      This code is using the <code>background-color</code> property to change the background color to a light pink, it is similar to the <code>background-image</code> property.
    </div>
    <div id="unlist">
      Here is a new unordered list
      <ul class="sul">
        <li id="liste1" class="listclass">
          we are using the <code>list-style-type</code>
        </li>
        <li id="liste2" class="listclass">
          to change the buttons for the list
        </li>
        <li id="liste3" class="listclass">
          here we change them to squares
        </li>
      </ul>
    </div>
    <div id="imageB">
      <img src="https://upload.wikimedia.org/wikipedia/en/thumb/b/b2/Ba4.jpg/250px-Ba4.jpg" alt="blackadder photo" id="blackadder" width="500" height="300">

    </div>
    <div id="children">
      <p>1</p>
      <p>2</p>
      <section><p>3</p></section>
      <p>4</p>
    </div>

  </body>
  </html>