-
Notifications
You must be signed in to change notification settings - Fork 0
/
CSS_SELECTORS.txt
256 lines (133 loc) · 5.79 KB
/
CSS_SELECTORS.txt
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
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
INLINE STYLES: For writing CSS code directly in an HTML document
The "style" attribute can be added directly to the opening tag.
After the attribute is added, it can be set equal to the CSS style you want to apply.
<p style="color: red;">I'm learning to code!</p>
The style attribute is set equal to color: red;
These can be added indefinitely, seperated by a semi colon ;
<p style="color: red; font-size: 20px;">I'm learning to code!</p>
THE <style> TAG: A dedicated section for CSS code.
This must be placed within the <head>
<style>
</style>
</head>
An example of changing the font of paragraphs in the HTML file:
<style>
p{
font-family: Arial;
}
</style>
THE STYLE.CSS FILE:
To keep code types separated, a .css file can be linked to from within the HTML file.
<link> : Used to link to the .css
You can use the <link> element to link HTML and CSS files together. The <link> element must be placed within the head of the HTML file. It is a self-closing tag and requires the following three attributes:
href — like the anchor element, the value of this attribute must be the address, or path, to the CSS file.
type — this attribute describes the type of document that you are linking to (in this case, a CSS file). The value of this attribute should be set to text/css.
rel — this attribute describes the relationship between the HTML file and the CSS file. Because you are linking to a stylesheet, the value should be set to stylesheet.
For Example: <link href="https://www.codecademy.com/stylesheets/style.css" type="text/css" rel="stylesheet">
If stored in the same folder, the href can link to a relative path
IE href="./style.css"
CSS SELECTORS: For selecting HTML elements to be affected.
The css selector will match the HTML tag.
<p> : Paragraphs
p {
}
HTML tags can have have attributes. For example class
<p class="brand">Sole Shoe Company</p>
CSS can select these attributes
To select "brand" we can write, in CSS
.brand {
}
the period (.) is necessary
CSS can set different styles to the same item by selecting multiple classes.
For example, in HTML <h1 class="green bold">...</h1>
...then, in CSS
.green {
color: green;
}
.bold {
font-weight: bold;
}
The different classed will be separated by a space within the opening tag.
ID NAME: For uniquely styling HTML elements (no matter what classes are applied to the element)
<h1 id="large-title"> ... </h1>
To select this in CSS, a # is used.
#large-title {
}
->Don't apply the same ID to different elements.
DIFFERENCE BETWEEN TAGS CLASSES AND IDs
Classes may be applied to many HTML elements.
IDs are applied uniquely to a single element
Classes override Tags
IDs override classes and tags
CHAINING SELECTORS
An HTML element can have two or more CSS selectors at
the same time.
This is done by combining multipe selectors.
h1.special {
}
In this code, only the h1 elements that have a class
of special would be selected.
ID is still a more specific selector.
NESTED ELEMENTS
CSS can select nested elements within a selected element.
Take this code for example:
<ul class='main-list'>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul> The <li> are nested
withing the <ul>
The nested <li> elements are selected with this CSS:
.main-list li {
}
->Note the Space in
between the selectors.
-> A chained selector, p.main and .main p would have the same specificity
!important
!important is the only selector which is more specific than an ID
The syntax looks like:
p {
color: blue !important;
}
.main p {
color: red;
}
-> Since !important is used on the p selectos'c color attribute,
all p elements will appear blue, even though there is a more
specific .main p selector that sets the color attribute
to red.
-> The !important tag is only useful if something must remaine the
same forever and throughout all possible future updates
-> It is not advisable to use this tag.
APPLYING THE SAME STYLE
TO
MULTIPLE SELECTORS
Consider this code:
h1 {
font-family: Georgia;
}
.menu {
font-family: Georgia;
}
Two different selectors are being used to apply the same effect.
This could be done more consicely, by:
h1,
.menu {
font-family: Georgia;
}
->By separating the CSS selectors with a comma,
both the h1 and the .menu elements will receive
the font-family: Georgia styling.
One common way to keep our CSS concise is via proper utilization of “inheritance”. Within CSS, the computed values of many properties get inherited from ancestor elements. We can use this fact to reduce the number of declarations we write. For example, if I want most of the text on my page to be 20px I can declare font-size: 20px on the html selector. As <html> is the root element and the font-size property
is inheritable, all text for this page will be 20px. In cases where we want to deviate from this 20px norm, we can use a selector with a higher specificty to target the element whose font-size we want to override.
LENGTHS AND PERCENTAGES
px (such as font-size: 12px;) is the unit for pixels
em (such as font-size: 2em;) is the unit for the calculated size of the font.
2em would be two times the current font size.
pt (such as font-size: 12pt;) is the unit for points. Typically for use
in printed media.
% (such as width: 80%) is the unit for percentages.
...other units include pc (picas), cm (centimeters),
mm (millimeters), and in (inches)
When a value is 0, you don't need to state a unit.
(e.g.) If you want no border, it would be (border: 0;)