What Is CSS?
CSS is an abbreviation that stands for Cascading Style Sheets. What does that mean? Fortunately, that’s answered easily. They’re simply sheets of cascading code used to style a website. By styling a website, I’m referring to things like changing the font and positioning of text, the color of the text and background, or adding buttons and links to other websites.
Cascading Style Sheets are a large part of how people make websites look their best selves, largely because they exist for the purpose of ease of use. And the best part is, it’s pretty simple to learn. Simple enough, in fact, that you can learn some pretty simple tricks even with no coding experience at all! Neat, huh?
So, Can You Teach Me How To Code Something In CSS?
Absolutely! The best selection to start with would be something simple enough to get right the first time, visible enough to easily see in action, and with enough options to give you a ton to play with. Fortunately, I know the perfect choice.
So let’s talk about how to add color to text.
How To Add Color To Text In CSS
See the Pen
Text Example 1 by Coricus (@coricus_ssb)
on CodePen.
A bit intimidating, but I’ll try to break it down for you. You see where it says “body?” And those brackets? Don’t touch those. That’s how the CSS can tell where and what you’re trying to edit. There’s two CSS commands being given to it here, one that says color, and one that says text-align. We’re going to be ignoring text-align for this example, it just centers the text on the screen. What we’re going to be looking at is the spot that says this:
color: black;
Those two words, along with the colon and semicolon, are what tells the CSS what color you want the text to be. The colon indicates where what tool you want to use stops, and what you want to do with that tool begins. The semicolon indicates when you’re done using it. If you forget the semicolon, everything you add after that spot ends up not working right. But the only thing we’re touching here is the word “black.” That’s what tells it what color to use.
As you can see, you can just type in the name of a color, and it’ll work. As you might guess, if you change the color to Red instead, you get red text.
See the Pen
Text Example 2 by Coricus (@coricus_ssb)
on CodePen.
See? It’s easy!
Words can be imprecise, though. What if you want a color other than the handful that have normal names? Well, there’s two options. The first is Hexadecimal Colors, or Hex Colors for short. Those are colors represented by a hashtag followed by a sequence of six letters and numbers. Let’s say you wanted a shade of blue. Then you would use a Hexadecimal Color like this.
See the Pen
Text Sample 3 by Coricus (@coricus_ssb)
on CodePen.
Finally, you can also use RGBA, or Red Green Blue Alpha, colors. This is another color system of four consecutive numbers that lets you select colors on a scale of zero to 100 based on how red, green, blue, and (optionally) transparent they are respectively. So if we wanted green, it’d look like this.
See the Pen
Text Sample 4 by Coricus (@coricus_ssb)
on CodePen.
As for why you’d change the color of text like this in the first place? Easy. It looks good. Different colors of text create different moods, and light text on a dark background can actually be a lot easier on the eyes than dark text on a light background. I know a lot of people that swear by “Dark Mode” on any websites they can enable it on, and altered text color is a staple of that.
Take a look at Dark Mode on Twitter, for example. You can see this color in the CSS code for the website here. That’s the shade of grey some of the text like “What’s Happening?” uses. Awesome!
Recent Comments