-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathcss.html
More file actions
175 lines (168 loc) · 9.57 KB
/
css.html
File metadata and controls
175 lines (168 loc) · 9.57 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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>OpenCode Web Development Fundamentals - CSS Styles</title>
<link href="styles.css" rel="stylesheet">
<script src="script.js"></script>
</head>
<body>
<header>
<h1>LaGuardia Community College - OpenCode</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="reference.html">HTML Reference</a></li>
<li><a href="css.html">Styling Reference</a></li>
</ul>
</nav>
</header>
<main class="css_style">
<section class="css_color_text">
<h1>Color and Text with CSS</h1>
<article>
<pre>
<h1>Excepteur sint occaecat</h1>
<h2>Sint occaecat</h2>
<p>Lorem ipsum dolor sit amet, <a href="#" target="_blank">consectetur adipisicing</a> elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.</p>
<p class="center_text">Lorem ipsum dolor <span>sit amet</span>, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.</p>
</pre>
<div class="example">
<h1>Excepteur sint occaecat</h1>
<h2>Sint occaecat</h2>
<p>Lorem ipsum dolor sit amet, <a href="" target="_blank">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p class="center_text">Lorem ipsum dolor <span>it amet</span>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<h3>CSS</h3>
<pre>
/* h1 text color is blue */
h1 { color: blue; }
h2 {
text-align: center;
border: 1px dashed green;
background-color: orange;
font-family: Arial, sans-serif;
}
/* snippet to center a block element */
p.center_text {
margin-left: auto;
margin-right: auto;
width: 80%;
margin-top: 2em;
padding: 1em;
}
a {
text-decoration: line-through;
}
p span {
font-weight: bold;
font-style: italic;
}
</pre>
<h4>Common CSS</h4>
<dl>
<dt>color <span> h1 { color: blue; }</span></dt>
<dd>Text color</dd>
<dt>background-color <span> p { background-color: blue; }</span></dt>
<dd>Background color</dd>
<dt>font-family - <span> body { font-family: Arial, sans-serif; }</span></dt>
<dd>Font family such as Arial, serif, sans-serif</dd>
<dt>font-size - <span> p { font-size: 2em; } </span></dt>
<dd>Size of the font in px, em, percentage or text values(xx-small, x-small, small, medium, large, x-large, xx-large).</dd>
<dt>margin - <span> div { margin: 1em 1em 2em 2em; }</span></dt>
<dd>Margin surrounding an element. Alternate: margin-left, margin-right, margin-top, margin-bottom. px, em, percentage</dd>
<dt>padding - <span> div { padding: 2em; }</span></dt>
<dt>padding-left, padding-right, padding-top, padding-bottom - <span> h3 { padding-bottom: 2em; }</span></dt>
<dd>Blank space between the element and its border</dd>
<dt>text-align - <span> div { text-align: center; }</span></dt>
<dd>Text alignment: center, justify, left or right</dd>
<dt>width - <span> p { width: 80%; }</span></dt>
<dd>Width of a content element</dd>
<dt>text-decoration - <span> a { text-decoration: none; }</span></dt>
<dd>Determines if text is underlined. none on an anchor will mean that it is not underlined</dd>
<dt>border - <span> h1 { border: 1px dashed blue; }</span></dt>
<dt>border-bottom, border-top, border-left, border-right - <span> h2 { border-bottom: 1px solid black; }</span></dt>
<dd>Shorthand to configure a border around an element. Width, border-style, and border color</dd>
<dt>border-radius - <span> p { border-radius: 15px; }</span></dt>
<dd>Configure rounded corners</dd>
<dt>list-style-type - <span> ul { list-style-type: none; }</span></dt>
<dd>Style of a list marker</dd>
<dt>display - <span> li { display: inline;}</span></dt>
<dt>float - <span> div { float: left;} </span></dt>
<dd>Float an element on the left or the right side of the browser window or an element. Other elements flow around the element</dd>
<dd>Clear the float by putting clear on the block element following - <span> main { clear: both; }</span></dd>
</dl>
<h4>Common CSS snippets</h4>
<dl>
<dt>Center a block element</dt>
<dd>
<pre>
p.center_text {
margin-left: auto;
margin-right: auto;
width: 80%;
}
</pre>
</dd>
<dt>2 Column page layout</dt>
<dd>
<pre>
<nav> </nav>
<div class="rightcol">
<main></main>
<footer></footer>
</div>
</pre>
<h5>CSS</h5>
<pre>
body {
width: 90%;
margin-left: auto;
margin-right: auto;
}
nav {
float: left;
width: 5em;
}
.rightcol {
margin-left: 10em;
background-color: #fff;
}
</pre>
</dd>
<dt>Header Text Image Replacement</dt>
<dd>Replace a header with an image while making the text available to screen readers</dd>
<dd>
<pre>
header {
height: 2em;
background-image: url('customimage.jpg');
background-repeat: no-repeat;
}
header h1 {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
</pre>
</dd>
</dl>
</article>
</section>
</main>
<footer>
<p><a href="http://www.laguardia.edu/opencode/" target="_blank">LaGuardia Community College OpenCode Program</a></p>
</footer>
</body>
</html>