CSS color, font, and size examples with their corresponding outputs. These examples will demonstrate how to apply various colors, fonts, and text sizes to elements using internal CSS.
Example 1: Using Color Properties
HTML File (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Colors Example</title>
<style>
body {
background-color: #f0f8ff; /* Light blue background */
color: #333; /* Dark gray text */
font-family: Arial, sans-serif;
}
h1 {
color: #ff6347; /* Tomato red */
}
p {
color: rgb(70, 130, 180); /* Steel blue */
}
.highlight {
background-color: #ffeb3b; /* Yellow background */
color: #8b0000; /* Dark red text */
padding: 5px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Welcome to CSS Color Example</h1>
<p>This is an example of text using different colors. Some of the text is <span class="highlight">highlighted</span> with a different background and text color.</p>
</body>
</html>
Output:
- Light blue background (
#f0f8ff). h1(Heading) with tomato red color (#ff6347).p(Paragraph) text in steel blue color (rgb(70, 130, 180)).- The word “highlighted” has a yellow background (
#ffeb3b) with dark red text (#8b0000).
Example 2: Font Family Usage
HTML File (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Fonts Example</title>
<style>
body {
font-family: 'Verdana', sans-serif;
background-color: #fafafa;
}
h1 {
font-family: 'Georgia', serif;
font-size: 36px;
}
p {
font-family: 'Courier New', monospace;
font-size: 18px;
}
.custom-font {
font-family: 'Brush Script MT', cursive;
font-size: 22px;
color: #006400;
}
</style>
</head>
<body>
<h1>CSS Font Family Example</h1>
<p>This paragraph is using the <code>Courier New</code> font, which is a monospace font.</p>
<p class="custom-font">This text is using a custom cursive font, <code>Brush Script MT</code>.</p>
</body>
</html>
Output:
- The
h1element uses Georgia font (serif) with a font size of 36px. - The
pelement uses Courier New font (monospace) with a font size of 18px. - The class
.custom-fontapplies Brush Script MT font (cursive) with a font size of 22px and dark green text (#006400).
Example 3: Text Sizes and Weight
HTML File (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Text Sizes and Weight Example</title>
<style>
body {
font-family: 'Arial', sans-serif;
}
h1 {
font-size: 48px;
font-weight: bold;
}
h2 {
font-size: 32px;
font-weight: normal;
}
p {
font-size: 18px;
font-weight: lighter;
}
.highlight-text {
font-size: 24px;
font-weight: bolder;
color: #ff4500;
}
</style>
</head>
<body>
<h1>This is a Large Bold Heading</h1>
<h2>This is a Smaller Heading</h2>
<p>This is a normal paragraph with a standard font weight.</p>
<p class="highlight-text">This paragraph uses a larger font size and bolded text for emphasis.</p>
</body>
</html>
Output:
h1has a large font size of 48px and is bold.h2is 32px with normal font weight.phas a standard 18px font size and lighter font weight.- The
.highlight-texthas 24px font size with bolder text, and the color is orange red (#ff4500).
Example 4: Using CSS line-height and letter-spacing
HTML File (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Line Height and Letter Spacing Example</title>
<style>
body {
font-family: 'Helvetica', sans-serif;
background-color: #f9f9f9;
}
h1 {
font-size: 40px;
line-height: 1.5;
letter-spacing: 2px;
text-align: center;
}
p {
font-size: 20px;
line-height: 1.8;
letter-spacing: 1px;
max-width: 600px;
margin: 20px auto;
}
.highlight {
font-size: 22px;
letter-spacing: 3px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Welcome to the CSS Spacing Example</h1>
<p>This paragraph has increased line height and letter spacing. Notice how the text is more readable due to better line spacing and slight letter spacing.</p>
<p class="highlight">This is highlighted text with more spacing between letters.</p>
</body>
</html>
Output:
h1has a line-height of 1.5 and letter-spacing of 2px, making it spaced out a bit more than normal.phas a line-height of 1.8, giving it more space between lines, and a letter-spacing of 1px.- The
.highlightclass applies 3px letter spacing and bold font weight for emphasis.
Example 5: Using RGBA and HSL Colors
HTML File (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS RGBA and HSL Colors Example</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #e8e8e8;
color: #333;
}
h1 {
color: rgba(255, 0, 0, 0.8); /* Semi-transparent red */
}
p {
color: hsl(200, 100%, 50%); /* A bright blue color */
}
.highlight {
color: rgba(0, 255, 0, 0.6); /* Semi-transparent green */
font-weight: bold;
}
</style>
</head>
<body>
<h1>This is a Semi-Transparent Red Heading</h1>
<p>This paragraph uses a bright blue color from HSL.</p>
<p class="highlight">This text is highlighted with semi-transparent green color.</p>
</body>
</html>
Output:
h1uses RGBA (rgba(255, 0, 0, 0.8)) for a semi-transparent red color.pis colored in HSL (hsl(200, 100%, 50%)), giving a bright blue shade.- The
.highlightclass uses a semi-transparent green color (rgba(0, 255, 0, 0.6)).
Summary:
- Colors: You can use different color formats in CSS like HEX (
#ff6347), RGB (rgb(70, 130, 180)), RGBA (rgba(255, 0, 0, 0.8)), and HSL (hsl(200, 100%, 50%)). - Fonts: Fonts can be customized using the
font-familyproperty. Common choices include serif, sans-serif, monospace, and cursive fonts. - Text Size & Weight: You can control the font-size and font-weight properties to adjust text appearance. Use
line-heightfor better readability andletter-spacingfor text spacing.