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

We can convert inline

label

element to block level element using the code below. So they will take the full width of the container

.my-form label {
    display: block;
}

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