├── convert.css
├── useful-real-world-examples.md
├── SNIPPETS.md
├── LICENSE
└── README.md


/convert.css:
--------------------------------------------------------------------------------
1 | .me{
2 |   position: relative;
3 | }
4 | 


--------------------------------------------------------------------------------
/useful-real-world-examples.md:
--------------------------------------------------------------------------------
1 | # Useful real world snippets and examples
2 | 
3 | * flexible grids - https://rachelandrew.co.uk/archives/2016/04/12/flexible-sized-grids-with-auto-fill-and-minmax/
4 | * fixed background scroll - https://codyhouse.co/gem/alternate-fixed-scroll-backgrounds
5 | * see node depth in css - https://dev.to/gajus/my-favorite-css-hack-32g3?utm_source=digest_mailer&utm_medium=email&utm_campaign=digest_email
6 | 


--------------------------------------------------------------------------------
/SNIPPETS.md:
--------------------------------------------------------------------------------
 1 | # Short CSS snippets
 2 | 
 3 | This file will contain pieces of code that don't belong in the cheat sheet but are useful and educational.
 4 | 
 5 | ### Center a div horizontaly
 6 | ```html
 7 | <div class="box">
 8 | </div>
 9 | ```
10 | ```css
11 | .box{
12 |   margin: 30px auto;
13 |   padding: 10px;
14 |   border: 1px solid black;
15 |   width 300px;
16 | } 
17 | ```
18 | 
19 | ### Center the content in a div
20 | ```css
21 | .box{
22 |   padding: 30px 25%; /* 30px top and bottom, 25% of element width on the left and right */
23 |   border: 1px solid black;
24 | }
25 | ```
26 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Matej
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # CSS Cheat Sheet
  2 | So it begins. My cheat sheet for CSS.
  3 | 
  4 | ### Regards & learning materials
  5 | I was inspired and finally motivated to learn CSS because of [iamshaunjp](https://github.com/iamshaunjp) aka [The Net Ninja](https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg) and his fantastic tutorials.
  6 | 
  7 | ### Useful shit
  8 | * https://github.com/sdras/cssgridgenerator
  9 | * https://github.com/vladocar/SMART-CSS-GRID
 10 | * https://css-tricks.com/
 11 | 
 12 | ### HTML elements
 13 | * block elements - always starts on a new line and takes up the whole block (div, fieldset, form, footer, h1-h6, header, li, nav, ol, p, table, ul, video)
 14 | * inline elements - do not start on a new line and only take up as much width as necessary (a, button, i, img, input, label, span, strong, textarea). Margin top and botton won't be applied to them because the box model isn't working for inline elements. If we want them to be treated as block elements, we have to give them the ```display: block``` profull width availableperty. If we want them to be treated like blocked AND inline element, we should give the m ```display: inline-block```
 15 | 
 16 | ### Terminology 
 17 | * descendants - children + grandchildren + ... of
 18 | * children - only first level
 19 | * inheritance - inherits the style from the parent element (the ```inherit``` value)
 20 | 
 21 | ### Important tips
 22 | * the browser is "reading" the CSS from top to bottom (cascade) - two identical selectors with different properties, the bottom one will win
 23 | * if some font families have 2 words, we need to put them in quote marks
 24 | 
 25 | ### Selectors
 26 | * ```#container``` - ID selector
 27 | * ```.container``` - class selector
 28 | * ```span``` - element selector
 29 | * ```span, div, p``` - multiple elements selector
 30 | * ```#container p``` - select ```p``` that is the descendant of ```#container```
 31 | * ```#container > p``` - select ```p``` that is the child od ```#container```
 32 | * ```h2 + p``` - adjacent selector, the one that comes directly after the ```h2```
 33 | * ```input[type="text"]``` - attribute selector
 34 | * ```span:hover``` - dynamic pseudo selector (behavior) - hover, presses, checked etc
 35 | * ```ul:nth-child(5)``` - structural pseudo selector (parent-child relationship) - 5th li tag, element without children etc.
 36 | * ```*``` - universal selector (mostly used to override default styles)
 37 | 
 38 | ### Selector specificity points
 39 | 
 40 | CSS Specificity is the set of the rules applied to CSS selectors in order to determine which style is applied to an element. The more specific a CSS style is, the higher point value it accrues, and the likelier it is to be present on the element's style.
 41 | 
 42 | * inline style - 1000 points
 43 | * ID - 100 points
 44 | * classes, pseudo class, attribute - 10 points
 45 | * elements - 1 point
 46 | * !important - overrides everything (try not to use this, rather write nice and clean code!)
 47 | 
 48 | ```css
 49 | body #content .data img(:hover) /* 1 + 100 + 10 + 1 + 10 = 122 */
 50 | ```
 51 | ### The box model
 52 | How (block level) elements represent themselves in terms of space.
 53 | ![The box model](https://s3.amazonaws.com/viking_education/web_development/web_app_eng/css_box_model_chrome.png)
 54 | ```css
 55 | .box {
 56 |   margin: 30px 20px 15px 5px; /* top-right-bottom-left */
 57 |   padding: 30px;
 58 |   border: 1px solid black;
 59 |   width: 400px; /* width of the blue box */ 
 60 |   height: 200px;
 61 |   /* 
 62 |     total width will be 522px = 400px + 2*margin + 2*padding + 2*border 
 63 |     that means that if we set the width to 100%, it can break through and produce unwanted behavior
 64 |     pay attention to collapsing margins - 30px + 30px =/= 60px.
 65 |   */ 
 66 | }
 67 | ```
 68 | 
 69 | # HTML variables
 70 | ```css
 71 | # definition
 72 | :root {
 73 |   --primary: blue;
 74 | }
 75 | # usage
 76 | background: var(--primary);
 77 | ```
 78 | 
 79 | # CSS properties
 80 | ### Font size
 81 | * absolute - px
 82 | * relative - em, percentages - used when making responsive design
 83 | 
 84 | ```css
 85 | .container {
 86 |   font-size: 12px;
 87 | }
 88 | article {
 89 |   font-size: 14px;
 90 | }
 91 | article h2 {
 92 |   font-size: 2em; /* inherit font size from article and miltiple it by 2 */
 93 | }
 94 | article p {
 95 |   font-size: 50%; /* inherit font size from article and take 50% of size */
 96 | }
 97 | ```
 98 | 
 99 | ### Font family
100 | Note: some families already exist on user's computer. Remember to use the font family stack for fallbacks.
101 | ```css
102 | .container {
103 |   font-family: arial, helvetica, sans-serif; /* if arial is not available, use helvetica etc. */
104 | }
105 | ```
106 | 
107 | ### Text decoration
108 | Possible values: ```inerhit|line-through|none|underline|overline|inherit```
109 | ```css
110 | .container {
111 |   text-decoration: underline;
112 | }
113 | ```
114 | 
115 | ### Font weight
116 | Possible values: ```normal|bold|bolder|lighter|number|initial|inherit```
117 | 
118 | Note: Bold is same as 700, normal is same as 400. Most font families won't have every possible number value.
119 | 
120 | Note: some font families don't have certain weights as their options!
121 | ```css
122 | .container {
123 |   font-weight: bolder;
124 | }
125 | ```
126 | 
127 | ### Text transform
128 | Changing the letter casing.
129 | 
130 | Possible values: ```none|capitalize|uppercase|lowercase|initial|inherit```
131 | ```css
132 | .container {
133 |   text-transform: uppercase;
134 | }
135 | ```
136 | 
137 | ### Text color
138 | Changing the color of the text.
139 | ```css
140 |  .container {
141 |   color: blue;
142 |   color: #FEFEFE;
143 |  }
144 | ```
145 | 
146 | ### Letter spacing and word spacing
147 | Spacing between letters: e.g. s p a c i n g
148 | 
149 | Spacing between words: e.g. space   between   words
150 | 
151 | Values mostly in pixels;
152 | ```css
153 | .container {
154 |   letter-spacing: 3px;
155 |   word-spacing: 5px;
156 |   letter-spacing: 2em; /* the case with em's is font-size times number of em's */
157 | }
158 | ```
159 | 
160 | ### Line height
161 | Vertical space between lines in a paragraph. Not the gap, just the height of the line.
162 | 
163 | The font size itself is not included, meaning,if you put ```line-height``` to be 12px and the ```font-size``` itself is 12px, nothig will happen.
164 | 
165 | Possible values: normal|number|length|initial|inherit
166 | ```css
167 | .container {
168 |   line-height: 24px;
169 |   line-height: 2em; /* the case with em's is font-size times number of em's */
170 | }
171 | ```
172 | 
173 | ### Border style
174 | Mostly used values: solid|none|hidden
175 | ```css
176 | .container {
177 |   border: 1px solid black; /* width, style, color */
178 |   border-radius: 10px; /* for rounded corners; it has 4 corners */
179 |   border-radius: 5px 10px 30px 20px; /* different corenrs */
180 | }
181 | ```
182 | 
183 | ### Width and height
184 | They Can be static (in pixels) and dynamic (in percentages).
185 | ```css
186 | .container {
187 |   height: 100px; /* static height */
188 |   width: 300px; /* static width, no matter how big the browser is */
189 |   width: 70%; /* dynamic, width is 70% of the parent element */
190 | }
191 | .container{
192 |   width: 40%;
193 |   display: inline-block; /* display inline but keep respecting the box model (block elements) */
194 | }
195 | ```
196 | 
197 | ### Background
198 | It can be colored or used an image background.
199 | ```css
200 | .container {
201 |   width: 500px;
202 |   height: 500px;
203 |   background-color: #606060;
204 |   background-image: url(https:url);
205 |   background-repeat: no-repeat; /* if the image is smaller than the container and we don't want it to repeat */
206 |   background-position: center; /* or we can specify in pixels */
207 |   background-size: 100px; /* if we have an background image, we can resize it */
208 | }
209 | ```
210 | 
211 | ### Gradient
212 | Smooth transitions between colors.
213 | Useful links:
214 | * https://uigradients.com
215 | * http://www.gradients.io/
216 | Important: add prefixes like ```-moz-``` and ```-webkit-``` for Mozilla Firefox and other supports.
217 | ```css
218 | /* syntax */
219 | background: linear-gradient(direction, color-stop1, color-stop2, ...);
220 | .container {
221 |   background: yellow; /* fallback, if gradient isn't supported in the browser */
222 |   background: linear-gradient(to bottom right, red, yellow);
223 | }
224 | ```
225 | 
226 | ### Box shadow
227 | Possible values: none|h-offset v-offset blur spread color |inset|initial|inherit
228 | 
229 | ```css
230 | .container {
231 |   width: 100px;
232 |   height: 100px;
233 |   border: 1px solid #3d56b9;
234 |   position: relative;
235 |   box-shadow: 0 0 10px #3d56b9;
236 | }
237 | ```
238 | 
239 | # CSS variables
240 | Also known as "custom properties" (same thing). They are just like regular properties, just with ```--``` before them.
241 | 
242 | E.g. ```--my-property: value;```
243 | ```css
244 | /*
245 | the easiest way to declare them and use them anywhere,
246 | because they are scoped to the element where they are defined 
247 | */
248 | :root {
249 |   --my-color: #aabbcc;
250 | }
251 | .box {
252 |   color: var(--my-color);
253 |   width: 500px;
254 |   height: 500px;
255 | }
256 | 
257 | .outro-text {
258 |   color: var(--my-color);
259 | }
260 | ```
261 | 
262 | # CSS positioning
263 | 
264 | ### Floating elements
265 | Possible values: left|right|inherit|none
266 | 
267 | Important: removes the element from the real document flow and floats it somewhere.
268 | 
269 | Example: floating columns
270 | ```css
271 | /* both are block level elements */
272 | .left, .right {
273 |   float: left;
274 |   width: 46%; /* not 50% because of padding + margin */
275 |   padding: 1%;. Often used in combination with relative positioning. 
276 |   margin 1%;
277 |   background: yellow;
278 | }
279 | 
280 | /*
281 | wrapper of .left and .right (always the parent element!)
282 | this css makes sure that anything after the .columns is cleared, meaning, it respects the normal document flow again
283 | (because float will break it)
284 | */
285 | .columns {
286 |   display: block;
287 |   content: "";
288 |   clear: both;
289 | }
290 | ```
291 | 
292 | ### Position
293 | Possible values: static|relative|absolute|fixed|inherit
294 | 
295 | * relative - the element is positioned relative to its normal position. It does NOT remove content from the normal document flow, it is still occuping it's expected position, but it's mostly just "offseted" from it's original position with top|bottom|right|left (without them nothing will happen). When relative element move, no other element on the layout are affected.
296 | * absolute - allows you to place your element precisely where you want it. Often used in combination with relative positioning. The positioning is done relative to the first relatively (or absolutely) positioned parent element. The element is removed from the normal document flow.
297 | * fixed - mostly used to fix the nav bar to the top, so when we scroll down, it stays "sticky". It also removes the element from the normal document flow.
298 | 
299 | ### Stack order and z-index
300 | Stack order - the further down in the HTML you are, the higher the stacking order is (LIFO).
301 | 
302 | E.g. for semantic rasons, the navigation should be at the top od the page, but visualy above all elements.
303 | 
304 | With it```z-index```, we are controling the stacking order.
305 | ```css
306 | .nav {
307 |   z-index: 1;
308 |   position: relative; /*when using z-index, we have to include the position value*/
309 | }
310 | ```
311 | 
312 | # Flexbox
313 | A parent element gets a ```display: flex``` property, and his direct desendants become flex items. We can control how they shrink and how they grow. Flex items stack left to right.
314 | Playground: https://codepen.io/collection/AWOkYM/
315 | ```css
316 | .container {
317 |   display: flex;
318 | }
319 | ```
320 | 
321 | ### flex-grow
322 | If there is room left in the container, items will grow and fill that space.
323 | ```css
324 | .box {
325 |   flex-grow: 1; /* grow rate. every box will have the same rate */
326 | }
327 | ```
328 | 
329 | ### flex-shrink
330 | Same as ```flex-grow```, just for shrinking items. When we start shrinking the browser window beneath the parent width, the items will shrink in the given rate.
331 | 
332 | ### flex-wrap
333 | If flex-items have a min width, when shrinking the browser, the last element will eventually exit the screen and a scrollbar will appear. If we want to move that item to the next row, we can use ```flex-wrap: wrap```. If we want that item to move above other flex items, we can use ```flex-wrap: wrap-reverse```. Check the codepen url.
334 | 
335 | ### flex-basis
336 | Similar to ```min-width``` but instead of showing the scrollbar when shrinked beneath the defined value, they will shrink as normal flex items.
337 | 
338 | ### justify-content
339 | Aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally).
340 | 
341 | In other hand, on the cross-axis, the same thing does the ```align-items``` property.
342 | 
343 | __Important!__ The elements __always__ follow the direction of the main-axis!
344 | 
345 | Possible values: flex-start|flex-end|center|space-between|space-around|initial|inherit
346 | 
347 | ### flex-flow
348 | Make the flexible items display in reverse order, or vertically.
349 | 
350 | ```css
351 | .container {
352 |   display: -webkit-flex; /* Safari */
353 |   -webkit-flex-flow: row-reverse wrap; /* Safari 6.1+ */
354 |   display: flex;
355 |   flex-flow: row-reverse wrap;
356 | }
357 | ```
358 | # Grid
359 | 
360 | When you put a ```display: grid``` on a container, you make its direct children grid items. Just putting ```display: grid``` doesn't do much because we have to "slice and dice" columns and rows, so we have to say how big they have to be.
361 | 
362 | ```css
363 | .container {
364 |   display: grid;
365 |   grid-template-columns: 100px 100px 100px; /* 3 columns */
366 |   grid-gap: 20px;
367 | }
368 | 
369 | ```
370 | ### grid-template-columns
371 | With ```grid-template-columns``` we are defining how many columns does our grid have and what width should they be.
372 | Whatever the full width of the grid is, each column is going to be 1 fraction in width.
373 | The fr unit allows you to set the size of a track as a fraction of the free space of the grid container. For example, this will set each item to one third the width of the grid container:
374 | ```css
375 | .container {
376 |   grid-template-columns: 1fr 1fr 1fr; /* shorthand: repeat(3, 1f3) */
377 | }
378 | ```
379 | 
380 | ### grid-column
381 | Check the css grid generator by [sdras](https://github.com/sdras)
382 | ```css
383 | .one {
384 |   grid-column: 1/5; /* start from line one all the way to line 5 (first 4 columns) */
385 | }
386 | .two {
387 |   grid-column: 6/9; /* start from line 6 all the way to line 9 */
388 | }
389 | .three {
390 |   grid-column: 10/12; /* start from line 12 all the way to line 12 */
391 |   grid-row: 2; /* start at 2nd row */
392 | }
393 | ```
394 | 
395 | # Responsive design and media queries
396 | 
397 | Viewport meta tags tell the browser what width the viewport of the browser should be. Example of how a webpage can look like if the viewport meta tag is not used can be found [here](https://www.w3schools.com/tags/tag_meta.asp).
398 | Media queries tell the browser how to style an element at particular viewport dimensions. They allow us to style elements differently on different widths.
399 | 
400 | ```css
401 | /* media query example */
402 | 
403 | @media screen and (max-width: 1400px) {
404 | /*
405 | on devices with screen width less than 1400 pixels, I want to apply these styles
406 | or: when it reaches this width or below, apply these styles
407 | we are adding just the styles that we want to override
408 | */
409 |   .test {
410 |     font-size: 14px;
411 |   }
412 | }
413 | @media screen and (min-width: 620px) {
414 | /*
415 | on devices with screen width at least 620 pixels, I want to apply these styles
416 | */
417 |   .test {
418 |     font-size: 14px;
419 |   }
420 | }
421 | ```
422 | 
423 | 
424 | 


--------------------------------------------------------------------------------