You Just Built Your First Webpage, But Something’s Missing
You’ve typed out your paragraphs, added your images, and even figured out how to make a list. You hit refresh in your browser, and there it is—your creation, live on the screen. But it looks… plain. The black text on a white background feels more like a typed document than the vibrant, engaging website you envisioned.
This moment is a rite of passage for every web developer. The desire to add color, personality, and visual hierarchy is what separates a basic page from a designed experience. Changing text color is one of the simplest yet most powerful ways to start that transformation.
Whether you want to make your headings pop, highlight important warnings in red, or simply match your brand’s palette, knowing how to control text color is fundamental. The good news is, it’s incredibly straightforward once you understand the tools HTML and CSS provide.
Understanding the Tools: HTML Attributes vs. CSS
In the early days of the web, color was often handled directly within HTML tags using attributes. You might stumble across old code like . This method is now obsolete and should not be used for new projects.
Modern web development separates structure (HTML) from presentation (CSS). This means your HTML file defines the content—the headings, paragraphs, and lists—while a separate CSS file (or CSS block) defines how that content looks, including its color.
This separation is a best practice for several reasons. It makes your website easier to maintain. Want to change the color of every main heading from blue to green? You change one line in your CSS file instead of hunting through hundreds of HTML files. It also makes your site load faster and perform better for search engines.
The Three Places to Put Your Color Code
CSS gives you three primary methods to apply color, each with its own use case. Think of them as different levels of specificity and organization.
First, you have external CSS. This is the most organized method. You create a separate file, usually named something like styles.css, and write all your color rules there. You then link this file to your HTML document using a tag in the
section.Second, you have internal CSS. This involves placing your CSS rules inside a