Introduction to CSS and Colors
Adding life and style to your webpages
Learning Objectives
- Understand what CSS is and how it enhances HTML
- Learn how to apply styles using different CSS methods
- Explore the basics of working with colors using HEX, RGB, and color names
What is CSS?
CSS (Cascading Style Sheets) is a language used to control the look and feel of a webpage. While HTML defines the content, CSS is responsible for how that content is presented—such as colors, spacing, fonts, and layout.
Watch the video below for a basic introduction to CSS created just for you:
How to Apply CSS
CSS can be applied in three main ways:
- Inline CSS – Directly inside an HTML tag
- Internal CSS – Within a
<style>block in the HTML head - External CSS – Using a separate
.cssfile linked to your HTML
The video below explains CSS basics and how to apply styles using these methods:
CSS and Colors
Colors help communicate emotion, emphasis, and branding. CSS lets you control colors in several ways:
- Color Names – Like
red,blue, orgreen - RGB Values – Like
rgb(255, 0, 0)for red - HEX Codes – Like
#FF0000for red (most common for designers)
Watch the video below for a simple yet effective explanation of CSS colors:
Deep Dive: Hexadecimal Colors
HEX codes are six-digit codes that represent colors using hexadecimal values. They're commonly used in modern web design because they're compact and widely supported.
Watch this helpful video that explains how hexadecimal color codes work in CSS:
Try It Yourself: CSS Colors
Create a simple HTML file and add CSS (inline or internal) to:
- Change the background color of the page using a HEX code
- Change the color of the heading using an RGB value
- Make the paragraph text use a named color
Save and preview your work in a browser.
Further Reading
- W3Schools. (2024). CSS Colors. Retrieved from https://www.w3schools.com/colors/
- Mozilla Developer Network. (2024). CSS Color. Retrieved from https://developer.mozilla.org/en-US/docs/Web/CSS/color
- Freeman, E., & Robson, E. (2022). Head First HTML and CSS. O’Reilly Media.
References
- W3Schools. (2024). CSS Colors. Retrieved July 2025, from https://www.w3schools.com
- Mozilla Developer Network. (2024). CSS Color. Retrieved July 2025, from https://developer.mozilla.org
- Freeman, E., & Robson, E. (2022). Head First HTML and CSS. O’Reilly Media.