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;
}

The text inside

p

element will be all uppercase and underlined

p {
    text-decoration: underline;
    text-transform: uppercase;
}

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

Every computer that has a browser installed has default fonts built in so that it can display the text on web pages

a { background-color: yellow; }

a

- selector

{

- declaration start

background-color

- property

:

- property/value separator

yellow

- value

;

- declaration separator

}

- declaration end

Clicking on

radio

label or

checkbox

label makes the object checked, but clicking on

input[type=text]

label makes it active (gives it focus)

<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

<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

multiple

attribute enables us to select several options at the same time.

size

attribute determines select tag height in options

colspan

- the colspan attribute defines the number of columns a cell should span.

rowspan

- the rowspan attribute specifies the number of rows a cell should span.