1.1 Color
CSS (Cascading Style Sheets) gives you a bunch of properties to style text. The key ones are
color, font-size, and font-weight. These let you control the text color, size, and font weight. Let's dive into each of them.
The color property sets the text color. You can use various color formats like color names, hex values, RGB, RGBA, HSL, and HSLA.
Usage Examples
1. Color names:
p {
color: red;
}
2. Hex values:
p {
color: #ff0000;
}
3. RGB and RGBA:
p {
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5); /* Transparent red */
}
4. HSL and HSLA:
p {
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5); /* Transparent red */
}
HTML Usage Example:
p {
color: #3498db; /* Blue color */
}
<body>
<p>This text will be blue.</p>
</body>
1.2 font-size Property
The font-size property sets the text size. You can specify it in different units like pixels (px), relative (em, rem, %), "derived" from pixels (mm, cm, pt, pc), vw and vh (viewport width and height), and others.
Usage Examples
1. Pixels:
p {
font-size: 16px;
}
2. Relative:
%, em, rem
p {
font-size: 150%; /* 150% of the base font size */
font-size: 1.5em; /* 1.5 times bigger than the base font size */
font-size: 1.5rem; /* relative to the <html> element's font size */
}
3. "Viewport" units:
p {
font-size: 2vw; /* 2% of the viewport width */
font-size: 2vh; /* 2% of the viewport height */
}
HTML Usage Example:
p {
font-size: 18px; /* Text size 18 pixels */
}
<body>
<p>This text will be 18 pixels.</p>
</body>
1.3 font-weight Property
The font-weight property sets the text weight. You can use keywords (normal, bold, bolder, lighter) or numerical values from 100 to 900, where 400 is equivalent to normal, and 700 is equivalent to bold.
Usage Examples
1. Keywords:
p {
font-weight: bold;
}
2. Numerical values:
p {
font-weight: 300; /* Light text */
font-weight: 700; /* Equivalent to bold */
}
HTML Usage Example:
p {
font-weight: 700; /* Bold text */
}
<body>
<p>This text will be bold.</p>
</body>
GO TO FULL VERSION