Table of Contents
Working with Colors in CSS
CSS offers multiple ways to define colors, each with its own advantages for different use cases.
Color Formats
Named Colors
color: red;
color: blue;
color: forestgreen;Hexadecimal
color: #ff0000; /* Red */
color: #00ff00; /* Green */
color: #0000ff; /* Blue */
color: #333; /* Short form for #333333 */RGB and RGBA
color: rgb(255, 0, 0); /* Red */
color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */HSL and HSLA
color: hsl(0, 100%, 50%); /* Red */
color: hsla(0, 100%, 50%, 0.5); /* Semi-transparent red */Typography Properties
Font Family
/* Web-safe fonts */
font-family: Arial, sans-serif;
font-family: "Times New Roman", serif;
font-family: "Courier New", monospace;
/* Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap");
font-family: "Roboto", sans-serif;Font Properties
font-size: 16px; /* Absolute size */
font-size: 1.2em; /* Relative to parent */
font-size: 1.2rem; /* Relative to root */
font-weight: normal; /* 400 */
font-weight: bold; /* 700 */
font-weight: 300; /* Light */
font-style: normal;
font-style: italic;
font-style: oblique;Text Properties
text-align: left;
text-align: center;
text-align: right;
text-align: justify;
text-decoration: none;
text-decoration: underline;
text-decoration: line-through;
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
line-height: 1.5; /* 1.5 times font size */
letter-spacing: 2px;
word-spacing: 4px;Practical Typography Example
<style>
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap");
body {
font-family: "Inter", sans-serif;
font-size: 16px;
line-height: 1.6;
color: #333;
}
h1 {
font-size: 2.5rem;
font-weight: 700;
color: #2c3e50;
text-align: center;
margin-bottom: 1rem;
}
.highlight {
background-color: #fff3cd;
color: #856404;
padding: 0.25rem 0.5rem;
border-radius: 4px;
}
.quote {
font-style: italic;
font-size: 1.1rem;
color: #6c757d;
border-left: 4px solid #007bff;
padding-left: 1rem;
margin: 1.5rem 0;
}
</style>