chap12

css - the complete guide/12. working_with_text_and_font.md

@@ -1 +1,129 @@
-# Working With Text And Fonts
+# Working With Text And Fonts
+
+How we can make our information look beautiful.
+
+## Comparing Generic Families And Font Families
+
+We have generic families which represent a family of fonts that share similar characteristics and contain many font families:
+
+| Generic | Font |
+| --- | --- |
+| `serif` | Times New Roman, Georgia |
+| `sans-serif` | Helvetica, Verdana |
+| `cursive` | Brush Script | Mistral |
+| `monospace` | Courier New | Lucida Bright |
+| `fantasy` | ... |
+
+
+## Understanding The Browser Settings
+
+In chrome, we can go to browser settings, and customize fonts, and see the available font families and generic families.
+
+There are several options for setting the font family: 
+1. By default the font families are applied by the browser. 
+2. We can change this behavior by defining a generic family in our css file, and the browser will then select the font family in the browser settings under that generic family. 
+3. And the third option would be to specify a font family in our css, which won't be influenced by the browser settings.
+
+The third option can be further divided into:
+1. User's computer       (Not recommended)
+2. Web fonts             (Google fonts etc)
+3. Retrieved from server (self hosted fonts)
+
+
+## Using The Default Font Families
+
+We have overwritten the default browser's font using a web font from Google Fonts, which we have linked in our HTML, and applied to the `body` selector, so any text element inside body will have this font by default, or we can use the `font: inherit;` property on an element which is overwritten by browser:
+
+```css
+body {
+    font-family: "Montserrat", sans-serif;
+}
+```
+
+
+## Understanding The `font-family` Syntax
+
+The `font-family` property can have multiple font families defined, the browser will fallback to the next font family from left to right if it doesn't find it, and in the end we will always define a generic family if none of the font familied specified are found by the browser.
+
+In the following example, the browser will use the default font family under `sans-serif` in the browser settings:
+
+```css
+body {
+    font-family: "Unknown", "Also Unknown", sans-serif;
+}
+```
+
+
+## Working With Google Fonts
+
+We can add the web font using `<link>` in our html file, but a better approach is to add them to our shared css file using `@import` annotation. 
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400');
+```
+
+
+## Understanding `font-weight` And `font-style`
+
+`font-weight` allows you to set the weight or thickness of the font, we can assign different values to it, e.g. `font-weight: 400;` or `font-weight: normal;` which both are equivalent. Similarly `700` and `bold` are equivalent as well.
+
+We have to import each font face we want to use from a web font.
+
+`font-style` is used to change the style of the font to `italic` etc.
+
+
+## Diving Into Font Properties
+
+`font-size` for changing the size of font. e.g. `font-size: 20px;`.
+`font-variant` for changing the font style, e.g. `font-variant: small-caps` will display all letters as uppercase but maintaining lowercase height.
+`font-stretch` change the stretch level of our font, but the font availability for this property is not best.
+
+`letter-spacing` increase the space between each letter. e.g. `letter-spacing: 5px;`
+`white-space` impacts the way white space is treated inside out elements. e.g. assigning `no-wrap` to this property would display the text in single line. Additional values that we can use are `pre`, `pre-wrap`, `pre-line` etc.
+
+`line-height` is used to increase or decrease the space between text and the content box or between lines. e.g. `line-height: 2;` will increase the spacing between content box or other lines 2 times of its `font-size`. We can also use `px` or `%` with `line-height` but not recommended.
+
+
+## Applying `text-decoration` And `text-shadow`
+
+We can use `text-decoration` with values like `underline`, `overline` or `line-through`, followed by `dotted` or `wavy`, and finally a color.
+
+```css
+text-decoration: underline dotted red;
+```
+
+We also use `text-decoration: none;` to remove browser's default text decoratoin from links.
+
+We can use `text-shadow` to add a shadow to our text, the values assigned are x and y offsets followed by blurr radius and a color:
+
+```css
+text-shadow: 2px 2px 7px rgb(185, 180, 180);
+```
+
+## Understanding The `font` Shorthand
+
+With `font` shorthand, we must define a font size and font family as last values, and additional values are optional, but keep in mind the order maters as with any other shorthand property.
+
+```css
+font: 1.2rem "AnonymousPro", sans-serif;
+...
+font: 700 1.2rem "AnonymousPro", sans-serif;
+...
+font: small-caps 700 1.2rem "AnonymousPro", sans-serif;
+...
+font: italic small-caps 700 1.2rem "AnonymousPro", sans-serif;
+...
+font: italic small-caps 700 1.2rem/2 "AnonymousPro", sans-serif;
+```
+
+The line height in the shorthand is defined in combination with font size separated by a `/`.
+
+We can also use the `font` shorthand to refer to system fonts, or fonts of the operating system. e.g. `font: menu;` applies a font used by the OS for menu options.
+
+
+## Loading Performance And `font-display`
+
+`font-display` is used to configure **block-period** or **swap-period** of our font. Fonts on our website are not loaded directly and a fallback font might be applied by the browser during that time which is called **block-period**. And **swap-period** as you can imagine is when browser sets our custom font.
+
+You can view the available values for the `font-display` property at [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display).
+

css - the complete guide/13. adding_flexbox_to_our_project.md

@@ -0,0 +1 @@
+# Adding Flexbox To Our Website