Learning Web Design: CSS Part IIWeb Design & Development
I’ve been back in my Treehouse account this week, and I picked up with a few more lessons on CSS. If this is your first time reading my little blog series or if CSS is something entirely new to you, you can check out my previous posts here and here. My most recent lessons covered some more of the key concepts related to CSS: hexadecimal values and classes. By learning these concepts, I’ve been able to customize the color of elements on my website and even change how certain elements display based on user interactions with the browser.
Let me fill you in on what I’ve been up to!
Hexidecimal values (or hex values) are the way colors are written in CSS. It’s a 16-digit system where numerals are used for 0-9 and the letters a, b, c, d, e, and f are used to represent the numbers 10-15. The first two digits represent your red value, the second two are green, and the last two are blue. It looks a little like this (thanks to Treehouse for the image):
Here are a couple of important notes on hex values:
- The always begin with a hash/pound sign
- The higher your red, green, or blue value is, the more of that color will be mixed in
- A hex value of #000 is pure black, and a hex value of #fff is pure white
- You can use hexadecimal shorthand; if all six digits will be the same, you can write the value with only three digits
My first exercise using hexadecimal values was changing the color of my site’s links from blue to green. To do that, I went into my CSS and used the anchor selector with the color property, then entered a hex value of #6ab47b.
Tah-dah! Nice, green links.
Next, I changed the color of the header from white to green. I did this by creating two new declarations, one using the background property and one using the border-color property. I used a second hex value of #599a68 for the border color. This gave my header the same nice green color as my links with a subtle, slightly darker green border.
Then, I changed my headlines from green to white. I learned that you can write two selectors on the same line by separating them with a comma. When you do this, they will be treated as separate selectors, but the same style declaration will apply to each. This saves you a little time.
Finally, I moved on to the navigation links. I gave the navigation a darker green background using the same hex value of #599a68. Then, it was on to the links themselves. I made these white by using the navigation anchor selector and setting the color to white. I took it a step further by using a pseudo-class to make the links stay white, even after a user has clicked on them. A pseudo-class isn’t a normal class, but it’s a state that an element can be put into. So here, I used the pseudo-class of visited. A user can click on an element, changing its state. Make sense? The code looks a little something like this:
After this step was completed, it was time to learn about adding even more styling through classes. I started with the navigation links again. This time, I wanted to highlight the selected navigation link so it’s easier for users to know which page they’re on. To do this, I had to hop back into the HTML and added a class. A class is an attribute that’s like an ID, but you can have multiples of the same class on a given page. IDs, on the other hand, can only be used once per page.
I wanted to change the appearance of my Portfolio link, so I added the class there, like this:
Next, I needed to add styling to match the class in my CSS, so I moved back over there. I made a new rule using the navigation anchor selector and applied the class by adding “.selected” to the selector. Then, I added the color #32673f, a dark green. Next, I applied the same dark green color to the hover state on my navigation links. Just like my headlines, I separated the selectors using a comma. I used the navigation anchor selector again and applied the pseudo-class of hover. Here’s the code:
Finally, I added some additional style to the body by making the background color white and the text color gray.
Here’s a screen capture of my site so far. As you can see, the portfolio link is dark green because that’s the selected page. The About and Contact links also turn dark green on hover, I promise!
The last little bit of my lesson for this week was on comments. There are notes in the code that aren’t rendered by the browser. Visitors won’t see them unless they view the source of your webpage. These come in handy for keeping your code organized and keeping track of where you are as you work. I won’t go into too much detail here because it’s pretty straightforward, but here’s a quick snapshot of them. They’re the bits in italics and light gray.
Experimenting with Color
During the lesson on color, the instructor, Nick Pettit, said we should do some color exploration and come up with our own palette for more experience with hex values. He recommended we look around in Photoshop, but I actually don’t have that on my computer, so I talked to our art director, Ashley. She sent me to a really cool site, Coolors. This basically lets you develop your own color palette and even save and export it. So, yay! I don’t need Photoshop after all. I plan to look around and customize my little Treehouse site with some colors that are more “me.” I might even change the pictures out, too. Next time I update this series, my site will probably look completely different!
Until next time, I’ll keep learning. Talk to you then!