Chapter 14: Lists, tables, and forms

So I’ve decided to take my notes in a different way.  Instead of typing up my notes on Notepad++ and taking screenshots of them, I’ll post links to codepen with projects I make using whatever I learn in each chapter; thereby reinforcing the newly learnt information in my brain (where it will hopefully be retained) and making it easier to review my code.

However, I will continue to post notes on each chapter, mainly so I can have a place to reference/review key info. I will just post them into little blog posts, such as this one, which will have a link to codepen projects/practice code.

Chapter 14 practice: 

On the bright side, I have styling tables and forms down pat. However,  making forms work seems to be a little more difficult than I thought it would be. I wanted to make a form that would email me submitted information, but after much googling have found out that one) that would require some knowledge of php (which I would like to learn but is a little more in depth than I really want to go on this right now) and two) codepen doesn’t support php code (so even if I did manage to learn enough php to send emails I’d have to find another online code editor that supported the code).

Chapter 14 notes: 

The list-style-type property styles bullet points of lists. Unordered lists can take the following values:

  • none:  eliminates a bullet.
  • disc: makes a black circle bullet.
  • circle: makes a circle with a black outline.
  • square: makes a black square.

Ordered lists can take the following values:

  • decimal: 123
  • upper-alpha: ABC

The list-style-image property allows you to use an image for a bullet. The css would look like this:

li {list-style-image: url(“”);}

The life-style-position property specifies whether the bullet point is on the inside (value of inside) of the text box or the outside (value of outside ).

The list-style property is a shorthand way to style lists. You can style the style, image, and position (in any order). It would look like this:

li {list-style: inside square;}

Table properties:

  • width: for width of whole table.
  • padding: for cell and header space.
  • text-transform:  can make header uppercase (to aid readability)
  • border-top/border-bottom: to set borders for table headers.
  • text-align: to align text in table cells.
  • background-color: to change colors of table cells.
  • :hover: to highlight a table row when a mouse is over it.

The border-space and border-collapse property specifies the distance between cells. The latter removes the distance between cells and creates one border between them.

Text inputs on forms:

Font-size, color, background-color, border, border-radius (to round the edges of the input), :focus (pseudoclass which will make the background-color of the text-input change when being used), :hover (changes color when hovered over), and background-image (adds an image to the background of an input box).

Submit buttons:

Can style submit buttons with the color, text-shadow (gives it a 3D look), border-bottom (also gives it a 3D look), background-color,  and hover properties.


Fieldsets can be styled with the width, color, background-color, border, border-radius, and padding properties.

You can also change the appearance of a cursor by using the cursor property with a value of crosshair, pointer, help etc but this is not done too frequently.


Leave a Reply

Your email address will not be published. Required fields are marked *