Thẻ span cho các đoạn văn bản trong HTML

Bạn đã biết rằng để làm cho một đoạn văn bản nào đó, ví dụ, đậm - cần sử dụng thẻ b. Tuy nhiên, phải làm sao nếu tôi muốn tô màu một đoạn văn bản thành màu đỏ? Đối với trường hợp như vậy thì không tồn tại thẻ nào giống như thẻ b cả.

Nhưng lại tồn tại một thẻ đặc biệt span - bản thân nó hoàn toàn không làm gì cả, nhưng có thể áp dụng các kiểu CSS cho nó, cho phép chúng ta thêm hiệu ứng mong muốn vào đoạn văn bản.

Hãy xem một ví dụ. Giả sử chúng ta có một văn bản nào đó:

<p>
	This is a paragraph with text.
</p>

Giả sử chúng ta muốn làm cho từ "text" có màu đỏ. Để làm điều này, hãy bọc đoạn văn bản đó trong thẻ span và đặt cho thẻ này một class nào đó:

<p>
	This is a paragraph with <span class="red">text</span>.
</p>

Bây giờ hãy tô màu đỏ phần tử có class đó:

.red {
	color: red;
}

Cho đoạn mã sau:

<p>
	Lorem ipsum <span class="xxx">dolor sit</span> amet.
</p>
<p>
	<span class="xxx">Lorem ipsum</span> dolor sit amet.
</p>

Hãy làm cho các phần tử có class xxx có kích thước là 30px.