← Back to Tutorials Chapter 6

Navigation & UI

Navigation Bars

Vertical Navigation

nav ul {
  list-style: none;
  padding: 0;
}

nav a {
  display: block;
  padding: 10px;
  text-decoration: none;
}

Horizontal Navigation

nav li {
  display: inline-block;
}

nav a {
  padding: 10px 20px;
}

Dropdown Menus

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
}

.dropdown:hover .dropdown-content {
  display: block;
}

Image Galleries

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gallery img {
  width: 200px;
  height: 150px;
  object-fit: cover;
}

Image Sprites

A single image containing multiple icons is used as a sprite. The background-position property shifts the visible portion.

.icon-home {
  width: 32px;
  height: 32px;
  background: url("sprites.png") 0 0;
}

.icon-settings {
  background: url("sprites.png") -32px 0;
}

Form Styling

input[type="text"],
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  background: #3b82f6;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

button:hover {
  background: #2563eb;
}

CSS Counters

ol {
  counter-reset: section;
}

li::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

CSS Units

• px — absolute pixels
• em — relative to parent font-size
• rem — relative to root font-size
• % — relative to parent element
• vw — 1% of viewport width
• vh — 1% of viewport height

Specificity and !important

Specificity determines which rule wins when multiple rules target the same element. Inline styles beat IDs, IDs beat classes, classes beat elements.

p { color: black; }           /* specificity: 1 */
.text { color: blue; }        /* specificity: 10 */
#intro { color: green; }      /* specificity: 100 */
<p style="color: red;">       /* specificity: 1000 */