Tag: css
How Do You Add Color to Websites and Apps?
When the average person looks at the coding involved in a website or app, it often looks like lines and lines of gibberish. How in the world can a programmer make sense of it? But, of course, it does make sense to them. As for adding colors to websites and apps, there are standardized words that can be used for some colors. The most common way with the larger variety of colors, however, is by using Hex Codes. Another way to add colors, which is very similar to Hex Codes, is by using RGB colors.
Questions answered in this article include the following:
What colors can I make using specialized words?
In some cases, depending on the color you are searching for, you can sometimes add the name of the color directly inside the code. There are 140 standard color names that can be used when coding. Here’s an example of the standard color names.
You can visit htmlcolorcodes.com for a chart with all 140 specific color names available to use in coding.
How is Hex Code used to create different colors?
Using Hex Codes, also called Hexadecimal Colors, is the most common way of adding colors to a website or app, and it has a much larger variety of colors. Hexadecimal codes are formed from a number sign and six digits #RRGGBB (red, green, blue). Each digit then has a number or letter 0-9, A-F. The farther you go from the 0 to the F, the higher the intensity of that color. The color white is the highest intensity, represented with #FFFFFF and black being the lowest intensity, represented by #000000. All of the gray colors have the same two digits repeating such as #676767.
When using Hex Codes, it is possible to create 16,777,216 colors! If you would like to experiment with Hex Codes, this color picker shows the range of possible colors with its corresponding Hex Code. It shows the RGB codes for each color as well.
How do RGB colors work?
RGB (red, green blue) colors work the same way as Hex Code but may be a little simpler to understand. Instead of using two digits with a combination of numerical digits and letters up to F to denote the intensity of the colors, RGB colors use the numbers 0-255, with 0 being the lowest intensity and 255 being the highest. Therefore, RBG(0, 0, 255) would be green since the green has the highest intensity while the other two colors are zero. Subsequently, RBG(0, 0, 0), with all three colors being the lowest intensity, would be black and RBG(255, 255, 255) would be white, with all three colors being the highest intensity.
As with Hex Codes, there’s 16,777,216 possible colors when using RGB colors, and you can also experiment with the color picker to see the variety of colors with its corresponding code.
What does the code look like when adding colors?
If you are using CSS or HTML as the primary coding language, it’s not much different. You would add your color choice before the text. So, for example, you wanted to write “How are you?” in an H2 setting with a background Hex color of red, you would write:
<h2 style=”background-color:#ff0000;”>How are you?</h2>
W3Schools has tutorials on a number of coding languages with ways that you can try your code and see the results. You can go there to see examples of how colors are used in coding and try it out for yourself.
Matraex would like to be your go-to source for information regarding app development or anything coding or tech-related. Feel free to send us a message on our website, contact us, or leave us a question on our Google Business Profile. We look forward to answering your questions so you can be informed.
Sign up to receive answers to your questions delivered directly to your inbox!
Utility CSS Stylesheet finding duplicate selectors and declaration differences
Utility CSS Stylesheet finding duplicate selectors and declaration differences
Occasionally we run into a style sheet which has not been managed well and has duplicate style block and style definitions.
When this happens it can be difficult to evaluate which style blocks are duplicated, and which ones are still in use.
CSS Validators do not do a good enough job at identifying the duplicates and allowing me to make decisions on how to merge discrepancies.
So we came up with a utility that helps us to evaluate the duplicate selectors. The utility is here:
To use it we can simply paste in a giant style sheet block, or type in the url of the css and it will download it. Downloading it can be useful as you fix your style sheet and want to know how it looks.
The output of the utility is an ordered list of all of the selectors, in the case where there are duplicate selectors, the duplicated attributes are highlighted, if the value in the attribute is duplicated that shows red, if it is unique, it shows blue.
http://www.webuildplugins.com/css-stylesheet-evaluator/
The utility does not attempt to resolve the issues, it simply highlights the duplicates to potentially help you identify the issues.
The utility does not attempt to recognize which classes may override each other.
Future enhancements to this tool may include
- the ability to download multiple style sheets – to help identify styles that may clobber eachother.
- the ability to paste in an html block or url which then extricates the css style blocks and linked style sheets to help identify clobbering or duplicated selectors
- a utility which combines unique attributes from multiple duplicated selectors and gives a copyable text block with the combined text.
In addition to the need we have while building websites or taking over other customer sites, this too highlights our ability to build custom plugin utilities within WordPress. We also sell this WordPress plugin to customers that may need it.