<select name="cars" id="cars" multiple>
  <option value="volvo1">Volvo1</option>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

<optgroup>

is used to group several options together

<input type="checkbox" id="vehicle1" name="vehicle[]" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle[]" value="Car">
<label for="vehicle2"> I have a car</label><br>

We can have checkboxes with the same name by putting square brackets at the end of the

name

value. On server side we receive them whichever is checked as an array

a { background-color: yellow; }

a

- selector

{

- declaration start

background-color

- property

:

- property/value separator

yellow

- value

;

- declaration separator

}

- declaration end

h1 { font-family: Arial, Helvetica, sans-serif; }

The

font-family

property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems. If the browser does not support the first font, it tries the next font. Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available

We can style text using

letter-spacing

and

word-spacing

properties to have some space between letters and words

h1 {
    letter-spacing: 2px;
    word-spacing: 10px;
}

We can make CSS selector more specific using attribute's certain value

.my-form input[type="text"]{
    padding: 8px;
    width: 100%;
}

In this example, only inputs will be selected with types

text

The element is positioned relative to its first positioned (not static) ancestor element

.parent {
    position: relative;
}
.parent h1 {
    position: absolute;
    top: 10px;
}

https://youtu.be/aFtByxWjfLY?t=200

An element with position: sticky; is positioned based on the user's scroll position

div.sticky {
  background-color: yellow;
  position: sticky;
  top: 0;
}

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place like

position:fixed

.flex-container > div {
  flex:2;
}

The selector above has class name and tag name, therefore it's more specific than this selector:

.search {
  flex:4;
}

That's why the second selector has no effect in this example. With more specific selector, like this:

.flex-container .search {
  flex:4;
}

the .search item will be twice as wide as the other flex items.

The property is used to reorder flex items. The default value is

0

. Negative numbers are also accepted

.main-column {
    flex: 3;
    order: 2;
}
.sidebar-one {
    flex: 1;
    order: 1;
}