Nibras Code
AppsQR generatorRememberContactHome

Programming

CSS size and hover

Change the text size and change the color when the pointer is over it.

All lessons · CSS lessons: color, box and hover

Size

font-size is how big the text is. width is how wide the box is. Size is separate from color: one takes space, the other paints.

.title {
  font-size: 28px;
  width: 240px;
}

When the pointer is over it

:hover is the style that runs while the pointer is on the element. When the pointer leaves, the old color returns. This makes a button feel clickable.

a {
  color: #93c5fd;
  font-size: 18px;
}
a:hover {
  color: white;
}

Questions

Is :hover always visible? No. Only while the pointer is on the element.

Where does font-size go? Inside a selector: h1 { font-size: 28px; }.

Does width cut the text? It limits the box width. If the text does not fit, it can wrap to the next line.

Is there hover on a phone? It may show briefly while a finger holds. The main color should stay readable without hover.

Author: Nibras Code