TestForClass/index.html at master · Jess88/TestForClass · 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
<!DOCTYPE html>

<!-- Basic CSS Example -->

<html lang="en-us">
<head>
  <meta charset="UTF-8">
  <title>Basic CSS Example</title>

  <!-- Introducing the Style Tag! -->
  <!-- ========================== -->

  <!-- Now you can customize the look of your sites. Each rule in the style tag changes the appearance of elements matching the selector -->
<style>
  /*
    NOTE: Commenting is a bit different in CSS.
    They start with forward-slash + asterisk
    and end with back-slash + asterisk.
    */

  /* h1 heading tag */
  h1 {
    /* Put a 15-pixel margin at the bottom of the heading. */
    margin-bottom: 15px;
    /* Change the size of your font to 60 pixels high. */
    font-size: 60px;
    /* This will color the heading font white. */
    color: white;
    /* Align the text to the center of its enclosing element (e.g. div). */
    text-align: center;
    /* Underline the text. */
    text-decoration: underline;
    /* The background of the heading element will now be black. */
    background-color: black;
  }

  /* h2 heading tags */
  h2 {
    /* Put a 15-pixel margin at the top of all h2 headings. */
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 40px;
    text-align: center;
  }

  /* h3 heading tags */
  h3 {
    margin-top: 15px;
    font-size: 20px;
    text-align: center;
  }

  /* All img tags */
  img {
    /*
      Center a block element in the middle of its enclosing tag.
      When you use the "auto" rule on both left and right margins,
      your browser will do the math necessary to center a block element.
      */
    margin-left: auto;
    margin-right: auto;
    /* Block display (more on this later) */
    display: block;
  }

  /* All p tags */
  p {
    text-align: center;
    font-size: 20px;
    /* Bold the text. */
    font-weight: bold;
  }

  /* All unordered list tags */
  ul {
    text-align: center;
    font-size: 35px;
    /* Give an element a solid border. */
    border-style: solid;
    /* Render the border 5 pixels thick. */
    border-width: 5px;
    /* Include bullets in the content flow. */
    /* More info here: http://www.w3schools.com/cssref/pr_list-style-position.asp */
    list-style-position: inside;
  }
</style>
</head>

<body>

  <h1>Awesome Header</h1>
  <h2>Smaller Awesome Header</h2>
  <h3>Even Smaller Header</h3>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem consequatur unde aut dolores odio hic, accusamus recusandae ipsam illum enim voluptatibus obcaecati totam tempora eum quod sapiente. Corporis, quidem, culpa?</p>
  <img src="https://pbs.twimg.com/media/BsgYfMQCQAAWVKH.jpg" alt="Awesome" width="25%">

  <h3>Menu Links</h3>
  <ul>
    <li><a href="https://www.google.com">Google</a></li>
    <li><a href="https://www.facebook.com">Facebook</a></li>
    <li><a href="https://www.twitter.com">Twitter</a></li>
  </ul>

</body>

</html>