chap11

css - the complete guide/11. adding_and_styling_forms.md

@@ -1,2 +1,200 @@
 # Adding And Styling Forms
 
+Styling form elements and handling user input with grace.
+
+
+## Adding The Unstyled Form
+
+```html
+ <main class="signup-page">
+        <h1 class="signup-title">Awesome! Let's dive right in!</h1>
+        <form action="index.html" class="signup-form">
+            <label for="title">Title</label>
+            <select id="title">
+                <option value="mr">Mr.</option>
+                <option value="ms">Ms.</option>
+            </select>
+            <label for="first-name">First name</label>
+            <input type="text" id="first-name">
+            <label for="last-name">Last name</label>
+            <input type="text" id="last-name">
+            <label for="email">E-Mail</label>
+            <input type="email" id="email">
+            <label for="password">Password</label>
+            <input type="password" id="password">
+            <input type="checkbox" id="agree-terms">
+            <label for="agree-terms">Agree to
+                <a href="#">Terms &amp; Conditions</a>
+            </label>
+            <button type="submit" class="button">Sign Up</button>
+        </form>
+    </main>
+```
+
+
+## Page Initialization
+
+```css
+main {
+    padding-top: 1rem;
+}
+
+.signup-title {
+    text-align: center;
+    font-size: 1.8rem;
+    color: #ff5454;
+}
+
+.signup-form label,
+.signup-form input,
+.signup-form select {
+    display: block;
+    margin-top: 1rem;
+    width: 100%;
+}
+```
+
+
+## Understanding Advanced Attribute Selectors
+
+We can select elements using attributes, e.g. `[type]`, but what we can also do is be more specific and select elements with attribute `type` of value `email`, e.g. `[type="email"]`. 
+
+Likewise we can also select elements with specific attribute value in like, e.g. `[lang~="en-us"]`, means the `lang` attribute can have a list of values, and should contain the value `en-us`.
+
+We can also select attributes with a prefix value, e.g. `[lang|="en"]` means elements with `lang` attribute starting with `en` OR `en-`.
+
+| Element with Attributes | Element with Specific Attribute Value | Element with Specific Attribute Value in List | Element with Specific Attribute Value/Value- |
+| --- | --- | --- | --- |
+| `[type] { color: red; }` | `[type="email"] { color: red; }` | `[lang~="en-us"] { color: red; }` | `[lang|="en"] { color: red; }` |
+| `<input type="text">` | `<input type="email">` | `<p lang="en-us en-gb">Hi!</p>` | `<p lang="en-us">Hi!</p>` |
+
+
+We also can select attributes with a specific value prefix, e.g. `[href^="#"]` would select all elements with `href` attribute with value starting with a `#`. 
+
+We can also select attributes with value suffix, e.g. `[href$=".de"]` would select all elements with `href` attribute with value end with `.de`. 
+
+To select an element with attribute `src` that contains atleast one value `cdn`, we can use `[src*="cdn"]`.
+
+And finally, we can use `i` to make it case insensitive, e.g. `[src*="cdn" i]`.
+
+| Element with Specific Attribute Value Prefix | Element with Specific Attribute Value Suffix | Element with At Least One Attribute Value | Check Values Case-Insensitivity |
+| --- | --- | --- | --- |
+| `[href^="#"] { color: red; }` | `[href$=".de"] { color: red; }` | `[src*="cdn"] { color: red; }` | `[src*="cdn" i] { color: red; }` |
+| `<input type="text">` | `<input type="email">` | `<p lang="en-us en-gb">Hi!</p>` | `<p lang="en-us">Hi!</p>` |
+
+
+## Working On The General Layout
+
+Selecting the `checkbox` element using our knowledge about attribute selectors, `checkbox` element is an input element which has `type="checkbox"`:
+
+```css
+.signup-form input[type="checkbox"] {
+    ...
+}
+```
+
+And for our submit button:
+
+```css
+.signup-form button[type="submit"] {
+    ...
+}
+```
+
+
+## Restyling The Form Elements
+
+```css
+.signup-form input, 
+.singup-form select {
+    border: 1px solid #ccc;
+    padding: 0.2rem 0.5rem;
+    font: inherit;
+}
+
+.signup-form input:focus,
+.singup-form select:focus {
+    outline: none;
+    background: #d8f3df;
+    border-color: #2ddf5dc;
+}
+```
+
+
+## Styling The Checkbox
+
+First of all we don't want the styles we defined previously using `.signup-form input` selector to be applied to our checkbox, to exclude checkbox we can use the `not()` sudo selector, which takes in a selector to exclude:
+
+```css
+.singup-form input:not([type="checkbox"]),
+.signup-form select {
+    ...
+}
+
+.signup-form input:not([type="checkbox"]):focus,
+.singup-form select:focus {
+    ...
+}
+```
+
+And now to style our checkbox:
+
+```css
+.signup-form input[type="checkbox"] {
+    border: 1px solid #ccc;
+    background: white;
+    width: 1rem;
+    height: 1rem;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}
+
+.signup-form input[type="checkbox"]:checked {
+    background: #2ddf5c;
+    border: #0e4f1f;
+}
+```
+
+
+## Providing Validation Feedback
+
+A manual approach would be too mark a field as invalid, we can probably add a class to the element we want to mark invalid, lets name it `invalid`. And then we can add the styles for our `invalid` class:
+
+```css
+.signup-form input.invalid,
+.signup-form select.invalid {
+    border-color: red;
+    background: #faacac;
+}
+```
+
+A more elegent approach is using the `:invalid` sudo selector, which the browser will add the input element automatically based on the `type`:
+
+```css
+.signup-form input.invalid,
+.signup-form select.invalid,
+.signup-form :invalid {
+    border-color: red !important;
+    background: #faacac;
+}
+```
+
+We can also add the `required` attribute to our HTML elements and they will appear red or invalid from the start.
+
+There's also a `:valid` sudo selector, which as you can guess is opposite of `:invalid`.
+
+Keep in mind that for a production website, we need javascript to add and remove classes for form validatoin etc, that we are not covering here.
+
+## Styling The Signup Button
+
+To style a button element with `disabled` attribute, to give the user a clear feedback that the button is not clickable:
+
+```css
+.button[disabled] {
+    cursor: not-allowed;
+    border: #a1a1a1;
+    background: #ccc;
+    color: #a1a1a1;
+}
+```

css - the complete guide/12. working_with_text_and_font.md

@@ -0,0 +1 @@
+# Working With Text And Fonts