HTML, CSS, WEBSITE DEVELOPMENT AND DESIGN (2015)
Chapter 15: Colors and CSS comments
Primary colors
We are gonna discuss the color value a little deeper in this chapter. There are three ways to add color to our elements. The first way is by using one of the sixteen primary colors and calling it by name. This is the way we've added color so far throughout this book. A list of the sixteen primary colors that you could use follows in alphabetical order:
1.aqua
2.black
3.blue
4.fuchsia
5.gray
6.green
7.lime
8.maroon
9.navy
10.olive
11.purple
12.red
13.silver
14.teal
15.white
16.yellow
RGB colors
The second way to add color to your elements is by using an RGB value. The RGB stands for red, green, and blue. And it is a mix between these three values that gives you access to millions of colors. You can do a search for rgb values. But a simple way to get them is by using ms paint or any other program like paint. Let's use ms paint for example. If you open it up and click on the edit colors menu in the top right you'll get a color palette screen. Now if you move the slider up and down and move the cross hair cursor inside of the color box you can see that it is possible to get a huge amount of color combinations. And when you get a color that you like the red, green, and blue values will be displayed in the bottom right of the color palette screen. Now remember these values or write them down because we're gonna use them to change the background color of our web page. So we need to go to our body rule in our CSS internal style sheet and replace the background-color: yellow; with this code: You can add your values or use the ones that I have here. And you add in order the red,green,blue values in between the parenthesis.background-color: rgb(65,77,103); If you used the rgb values that I entered when you run your page you will get a kind of grayish blue background color.
Hex Code Colors
And the last way to add color is by using a hex code. This is similar to rgb values as you have access to millions of colors. You can search for popular hex code values or if you have a color that you like with the rgb values you can do a search for a rgb to hex converter. And that will pop up a bunch of site's that you can enter you values in to get the hex code. Many coders prefer to use the hex code because it's easier to enter into their CSS. So if you replace the background-color property again with this code. background-color: #008080; you will get a teal background. And as you can see the value is just a hatch tag and a number. This can also be a number/letter value. As you start designing web pages you will probably use a mix of primary colors and rgb or hex codes inside of your CSS. That is perfectly fine and is very common.
Adding Comments To CSS
What most coders do often, is when they have a bunch of hex codes or rgb values that they like, they create a folder on their desktop with a document inside that has a list of the codes and usually a small image of the color next to them. You could also add a comment area in your CSS with the values that you plan on using throughout your website. The way to add a comment in your CSS code is a little different from how you would to your HTML. As you know you add a comment to HTML like this, <!-- comment --> . But to add a comment in CSS you would enter it in this way:
¨ /*CSS comments are also ignored by the browser. */
¨ /*You could also enter your comment on
multiple lines like this. As long as you surround the text
with the forward slashes and the * asterisk symbols*/
When you start to have a lot of code in your CSS you might want to add comments to section parts of your code out in a way that will make it easier for you to navigate and find things in your code. You can choose how to organize your code any way you want but an example of how a coder might put their code into sections using CSS comments is:
/*====================HEX CODES=======================*/
/*In here they might have a list of their favorite hex codes.
#000 = black
#388f00 = green
#c34c1d = burnt orange*/
/*====================HEADINGS========================*/
Then in here they would have all of their CSS rules for their headings. h1, h2, and so on.
/*==================MAIN CONTENT======================*/
This is where they would put their main content rules like p elements, etc.
You will find a system that works for you with experience. That's it for this chapter. Go ahead and experiment with different color combinations and test out the three ways of adding color to your web page.
Quiz Chapter 15
1.What are the three ways of adding color to you website?
2.How many primary colors are available to you for your code?
3.What symbol do you start a hex code with?
4.How do you enter a CSS comment compared to an HTML comment?