Styling Lists

In HTML, there are two main types of lists:

• unordered lists (<ul>) - the list items are marked with bullets
• ordered lists (<ol>) - the list items are marked with numbers or letters

The CSS list properties allow you to:

• Set different list item markers for ordered lists
• Set different list item markers for unordered lists
• Set an image as the list item marker
• Add background colors to lists and list items

The list-style-type property specifies the type of list item marker:

ul { 
    list-style-type: square;
}

ol { 
    list-style-type: upper-roman; 
}

The list-style-image property specifies an image as the list item marker.

ul {
  list-style-image: url('sqpurple.gif');
}

The list-style-position property specifies the position of the list-item markers (bullet points).

list-style-position: outside; means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically. This is default.

list-style-position: inside; means that the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start.

ul.list1 {
  list-style-position: outside;
}

ul.list2 {
  list-style-position: inside;
}

Styling Tables

CSS Table Properties

1. Border

The border property is used to specify borders for table elements.

 /* border: table_width table_color; */
 
   th,td {
        /* Styling the border. */
        border: 1px solid black;
    }

2. Border Collapse

The border-collapse property is used to control the appearance of the adjacent borders that touch each other.

/* border-collapse: collapse/separate; */

 table {
      
        /* Styling border collapse */
        border-collapse: collapse;
    }

3. Border Spacing

Border Spacing property specifies the space between the borders of the adjacent cells.

/* border-spacing: value; */ 

 table {
        /* Styling the border-spacing between adjacent cells. */
        border-spacing: 10px;
    }

4. Caption Side

Caption Side property is used for controlling the placement of caption in the table. By default, captions are placed above the table.

/* caption-side: top/bottom; */ 

table {
        /* Controlling the placement of caption. */
        caption-side: top;
    }

5. Empty cells

Empty cells property specifies whether or not to display borders and background on empty cells in a table.

/* empty-cells:show/hide; */ 

table {
        /* Hiding empty cells border */
        empty-cells: hide;
    }

6. Zebra-striped table

To create a zebra-striped table, use the nth-child() selector and add a background-color to all even (or odd) table rows or columns.

/* striped rows */ 

tr:nth-child(even) {
  background-color: #f2f2f2;
}


/* striped columns */

col:nth-child(even) {
  background-color: #f2f2f2;
}

7. Table layout

The Table layout property is used to set up the layout algorithm used for the table.

/* table-layout:auto/fixed; */

table {
        /* Layout of table is auto. */
        table-layout: auto;
    }

Styling Forms

Styling Input Fields:

CSS can be used to style input fields (e.g., text fields, checkboxes, radio buttons, dropdown menus) to match the design of the website. Properties like border, background-color, padding, font-size, and border-radius can be applied to input elements to customize their appearance.

/* Example of Input styling properties */
input[type="text"] {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 16px;
  background-color: #f8f8f8;
  transition: border-color 0.3s ease;
}

Customizing Labels:

Labels associated with form elements can be styled using CSS to improve readability and alignment. Properties like color, font-weight, text-transform, and margin can be used to customize label appearance and position relative to input fields.

/* Example of Label styling properties */ 

label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  color: #333;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.5px;
}

Layout and Alignment:

CSS can control the layout and alignment of form elements within the form container. Techniques like flexbox or grid layout can be used to create responsive and visually pleasing form layouts, ensuring consistency across different devices and screen sizes.

/* Example of layout properties */

.form-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

Pseudo-classes for Interaction:

CSS pseudo-classes can be applied to form elements to style them based on user interaction. For example, :hover can be used to change the appearance of buttons or input fields when hovered over, while :focus can be used to style elements that have keyboard focus.

/* Example of interaction properties */

.btn:hover {
  background-color: #0056b3;
}

.btn:active {
  background-color: #004085;
}