ReferenceCode/css.html at main · 1PrashantChawla/ReferenceCode · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- CSS  -->
    <link rel="stylesheet" href="style.css">
    <!-- FONTS  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Irish+Grover&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Potta+One&display=swap" rel="stylesheet">
    <!-- LINKING   PRISM FOR COE HIGHLIGHTING -->
    <link rel="stylesheet" href="prism.css">
    <script src="prism.js"></script>


    <!-- TITLE  -->

    <title>Css Cheatsheet</title>
</head>


<body>
    <!-- NAVBAR  -->

    <div class="navbar">
        <div class="logo"><img src="./copy.png" alt=""></div>
        <div class="dropdown">
            <button class="dropbtn">
                Language &#8595;

            </button>
            <div class="dropdown-content">
                <a href="index.html">HTML cheatsheet</a>
                <a href="js.html">JS cheatsheet</a>
                <a href="css.html">CSS cheatsheet</a>
                <a href="linux.html">Linux Commands</a>
            </div>
        </div>
        <div class="searchBox">
            <input type="text" placeholder="Search Here" id="searchInput" onkeydown="search()" on>
        </div>
    </div>


    <div class="container">
        <h1 class="category"> Css Basics</h1>

<ol>


    <li>
        <h1>Fonts</h1>
        <p class="heading-intro">There are many properties related to the font, such as the face, weight, style, etc. These properties allow you to change the style or complete look of your text.
        </p>

        <h2>Font Family</h2>

        <!-- code class="code" BOX  -->
        <pre class="language-css"><code class="code">font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;</code class="code"></pre>


        <h2>Font-Style</h2>
        <!-- code class="code" BOX  -->
        <pre class="language-css"><code class="code">font-style: italic;</code class="code"></pre>


        <h2>Font-Variant</h2>
        <!-- code class="code" BOX  -->
        <pre class="language-css"><code class="code">font-variant: small-caps;</code class="code"></pre>

        <h2>Font-Weight
        </h2>
        <!-- code class="code" BOX  -->
        <pre class="language-css"><code class="code">font-weight: bold;</code class="code"></pre>

        <h2>Font-Size</h2>
        <!-- code class="code" BOX  -->
        <pre class="language-css"><code class="code">font-size: larger;</code class="code"></pre>

        <h2>Font Shorthand properties</h2>
        <!-- code class="code" BOX  -->
        <pre class="language-css"><code class="code">font: style variant weight size family;</code class="code"></pre>
    </li>


</ol>


    </div>


    <footer>
        <p class="text-center">Copyright @2022 | Designed With Prism.js Library <a href="#">| By-Prashant Chawla</a></p>

    </footer>


    <!-- <script src="script.js" defer></script>          defer means that the script will be executed only after the whole document has been parsed -->
    <script src="script.js" ></script>
</body>

</html>