Colors and Fonts in
CSS
How to Define Colours in CSS
CSS can define colors in 3 main ways:
1. Color Names → e.g., color: red;
2. Hexadecimal Codes → e.g., color: #FF0000;
3. RGB Values → e.g., color: rgb(255, 0, 0);
2
Using Color Names
p{
color: blue;
background-color: yellow;
This is easy to remember, but only predefined names are allowed
3
Using RGB
p{
color: rgb(255, 18, 66);
rgb(red, green, blue)
Values: 0 → 255
Supports rgba() for transparency:
4
Using RGBA
RGBA values are similar to RGB, but it adds one more value, which controls the opacity (transparency) of
the colour.
Example:
p{
color: rgba(24, 88, 255, 0.5);
● Opacity is between 0 and 1
● 0 makes the element completely transparent
● 1 makes the element opaque
● Values in between controls its transparency level
5
Using Hex Codes
h1 {
color: #1E90FF; /* DodgerBlue */
● Hex code format: #RRGGBB
● RR = red value, GG = green value, BB = blue value
● Values range: 00 (0) → FF (255)
● Short form allowed: #FFF = white
6
Fonts in CSS
Ways to set fonts:
1. Font Family — type of text style
2. Font Size — how big the text appears
3. Font Weight — thickness (normal, bold)
p{
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
} 7
Fonts Fallback
● Browsers may not have the exact font available
● Use fallbacks to avoid broken text
h1 {
font-family: "Times New Roman", Times, serif;
}
● The browser tries each font in order until one works
● Always end with a generic family:
○ serif
○ sans-serif
○ monospace
○ cursive
○ fantasy 8
Importing Fonts
Custom fonts can be downloaded, imported, and used in a webpage. This is useful when the desired font is not
available as a predefined browser font.
Importing From Google Fonts
1. Go to fonts.google.com
2. Choose a font and copy the <link> tag or @import rule
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
font-family: 'Poppins', sans-serif;
In this example, “Poppins” is the custom font and sans-serif is the fallback
9
Ways to add CSS
Inline CSS — styles written inside the HTML element’s style attribute.
Internal CSS — styles inside a <style> tag in the HTML <head>.
External CSS — styles in a separate .css file linked to HTML.
10
Inline CSS Example
<p style="color: blue;">This text is blue.</p>
● Quick for small changes.
● Not good for big projects.
11
Internal CSS Example
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>This text is red.</p>
</body>
● Good for single-page styles.
12
External CSS Example
<!-- HTML file -->
<link rel="stylesheet" href="styles.css">
<!-- styles.css file -->
p {
color: green;
}
Best for larger websites with many pages.
13
CSS Syntax
selector {
property: value;
}
h1 {
color: blue;
}
Selector: h1 → what you want to style
Property: color → what you want to change
Value: blue → new setting
14
Common CSS Properties
color → text color
background-color → background color
font-size → text size
font-family → text font style
text-align → alignment (left, center, right)
15
Mini CSS Challenge
Can you style a webpage so that:
1. The heading is purple.
2. The paragraph text is 18px in size.
3. The background is light yellow.
16
