This repository was archived by the owner on Nov 21, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcss-cheatsheet.html
More file actions
120 lines (109 loc) · 4.08 KB
/
css-cheatsheet.html
File metadata and controls
120 lines (109 loc) · 4.08 KB
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
<!DOCTYPE html>
<html>
<head>
<title>
CSS Cheatsheet
</title>
<link text="css/text" rel="stylesheet" href="css/css-cheatsheet.css">
<link text="css/text" rel="stylesheet" href="css/global.css">
<link text="css/text" rel="stylesheet" href="css/code-options.css">
</head>
<body>
<h1 class="title">
CSS Cheatsheet
</h1>
<div class="main">
<p>
<span class="lantext">Cascading Stylesheets</span> or <span class="bold">css</span> is a programming language developted
in 1994. CSS is commonly used to style an <span class="lantext">HTML</span> document. Files written in css use the
<span class="codetext">.css</span> file indicator.
<br>
<br>
As stated in the
<a href="html-cheatsheet.html">html
cheatsheet</a>, the way you connect a <span class="lantext">css</span> file to an
<span class="lantext">html</span> file is by doing
<br><span class="commandtext"><span class="codetext"><link</span> type="text/css
rel="stylesheet" href="style.css"></span>, with
<span class="commandtext">style.css</span> being the placeholder for your
<span class="lantext">css</span> file.
<br>
<br>
<span class="bold">All tags in html can contain any attribute listed</span>.
</p>
</div>
<div class="sidenav">
<br> <!--Makes the logo look a bit nicer on webpage, moves it down one line-->
<!--Start Logo-->
<!--!!!DO NOT REMOVE LOGO!!!-->
<h1>
<a href="homepage.html"><span id="c">Coding</span><span id="s">Sheets</span></a><!--Span CSS code is found in 'global.css'-->
</h1>
<!--End Logo-->
<!--Start Cheatsheet Dropdown-->
<div class="dropdown">
<!--The Button's color is done in the css file linked to this one, in this file it is called 'template.css'-->
<button class="dropbtn">Cheatsheets</button> <!--Cheatsheet dropdown button-->
<!--Start Dropdown content-->
<div class="dropdown-content"> <!--Breaks if called anything other than 'dropdown-content'-->
<a href="html-cheatsheet.html">HTML</a>
<a href="js-cheatsheet.html">JS</a>
<a href="md-cheatsheet.html">Markdown</a>
<a href="python-cheatsheet.html">Python</a>
</div>
<!--End Dropdown Conent-->
</div>
<!--End Cheatsheet Dropdown-->
<h2>
Sections
</h2>
<ul>
<li>
</li>
</ul>
</div>
<div class="main">
<h4 id="text_change">
Text Change Tags
</h4>
<p>
Using CSS, it can allow you to change various aspects of the text. The list below
will show you tags that affect the text. These changes are often down by
using the tag indicator (the character(s) be tweeen the < > in the
<span class="lantext">html</span> document.
<br>
These tags can be done by using <span class="commandtext">span</span> or
<span class="commandtext">div</span>. This, again, is talked about in the
<a href="html-cheatsheet.html">html cheatsheet</a>
</p>
<div class="tables">
<ul>
<li>
<span class="commandtext">Color</span> is used to change the
color of the text.
<br>
Can use common color name or its hexcode <!-- add a citation to what
hexcode is -->
. (I recommend
using the hexcode over the common name)
</li>
<li>
<span class="commandtext">font-family</span> is used to change what
font your text is in. (Like having it be in <span class="bold">arial</span>)
</li>
<li>
<span class="commandtext">font-size</span> is used to change the size
of the text.
<br>
<span class="bold">This does require it to be listed
as <span class="commandtext">font-size: #px;</span> in the style
portion of the page/in the css file.
</li>
<!-- Add in bold, italic, superscript and subscript -->
</ul>
</div>
</div>
<footer>
</footer>
</body>
</html>