Intermediate Styling

Intermediate CSS covers the styling of text content — fonts, typography, links, lists, and tables — along with the display property and overflow control.

Fonts and Typography

Font Family

body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

The browser uses the first available font. Always provide fallback fonts and end with a generic family (serif, sans-serif, monospace, cursive, fantasy).

Web Fonts with @font-face

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

Or use Google Fonts via a <link> in the HTML head.

Font Properties

• font-size — size of the font. Use rem for accessibility.
• font-weight — normal (400), bold (700), or numeric values 100–900
• font-style — normal, italic, oblique
• font-variant — small-caps for小型大写字母
• line-height — space between lines (unitless value like 1.6 is best)
• font — shorthand: font: italic bold 16px/1.5 Arial, sans-serif;

Text Properties

• text-align — left, right, center, justify
• text-decoration — none, underline, overline, line-through
• text-transform — uppercase, lowercase, capitalize, none
• text-indent — indents the first line of text
• letter-spacing — space between characters (tracking)
• word-spacing — space between words
• white-space — normal, nowrap, pre, pre-wrap
• text-shadow — text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
• word-break — normal, break-all, keep-all
• overflow-wrap — normal, break-word (force long words to wrap)

Styling Links

Links have four pseudo-class states that should be styled in order (LVHA order):

a:link { color: #3498db; text-decoration: none; }      /* unvisited */
a:visited { color: #8e44ad; }                            /* visited */
a:hover { color: #e74c3c; text-decoration: underline; } /* hover */
a:active { color: #2c3e50; }                             /* while clicking */

Common link styling patterns:

.nav-link {
  color: white;
  text-decoration: none;
  padding: 10px 20px;
  display: inline-block;
  transition: background 0.3s;
}
.nav-link:hover { background: rgba(255,255,255,0.1); }

Styling Lists

Remove default bullets and create custom list styles:

ul {
  list-style: none;              /* remove bullets */
  padding-left: 0;
}
 
li {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
 
/* Custom bullet using pseudo-element */
li::before {
  content: ">";
  color: #3498db;
  margin-right: 8px;
}

For ordered lists, you can use list-style-type with values like decimal, lower-alpha, upper-roman, or use @counter-style for custom counters.

Styling Tables

Make tables look professional with minimal CSS:

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
 
th {
  background: #2c3e50;
  color: white;
  padding: 12px;
  text-align: left;
}
 
td {
  padding: 10px 12px;
  border-bottom: 1px solid #ddd;
}
 
tr:nth-child(even) { background: #f8f9fa; }
tr:hover { background: #e8f4f8; }

The display Property

The display property controls how an element is rendered in the flow:

• block — takes full width, starts on a new line
• inline — flows within text, takes only needed width
• inline-block — inline but accepts width/height and margin/padding
• none — removes the element from the page (not rendered)
• flex — creates a flex container (for Flexbox layouts)
• grid — creates a grid container (for CSS Grid layouts)

/* Make a list horizontal */
nav li { display: inline-block; margin-right: 20px; }
 
/* Hide an element */
.hidden { display: none; }
 
/* Make a link block-level for easier clicking */
.btn { display: inline-block; padding: 10px 20px; }

The overflow Property

Controls what happens when content exceeds its container:

• visible — content overflows the box (default)
• hidden — content is clipped
• scroll — scrollbars always visible
• auto — scrollbars appear only when needed

.card {
  max-height: 300px;
  overflow-y: auto;   /* scroll vertically if content exceeds 300px */
}
 
.image-container {
  width: 200px;
  height: 200px;
  overflow: hidden;   /* crop overflowing parts */
  border-radius: 50%; /* creates a circle crop */
}

Use overflow-x and overflow-y for individual axis control.

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}