HTML and CSS are a coded language that web designers use to build and customize webpages from scratch, allowing them complete control over every detail. HTML, or HyperText Markup Language, describes the structure and content of a webpage. It also tells the browser how to display that content. On the other hand, CSS, or Cascading Style Sheets, describes how the HTML elements are to be displayed. Fonts, color, layout, background, and so on. Each has its own syntax, which must be applied carefully to achieve the correct effects within a design.
We are going to be looking at CSS today, which can be overwhelming the first, second, or even third time you attempt it. My sister, an accomplished user-centered designer, researcher, product designer, and design mentor in Chicago, refers to CSS as the dark arts. It bears mentioning that she is my YOUNGER sister and does occasionally enjoy playing up the complexities of digital design (that she has easily mastered) in order to enjoy her superiority as she watches her older sister sweat a bit.
Trust me, she’s more than earned it.
Anyway…
The CSS property I want to focus on is color. CSS properties range from rudimentary to complex, and color is considered to be more of the latter. That being said, color is a potent tool in design, and knowing how to manipulate it in a Cascading Style Sheet can transform even the most basic of webpages in a number of ways, communicating a particular mood, aesthetic, or hierarchy without a great deal of intricate coding. The chosen color can be expressed in several different ways, including RGB, HEX,
HSL, RGBA, or through predefined color values supported by CSS/HTML. In this tutorial, we will be using HEX codes, which consist of a pound sign followed by a six-digit combination of letters and numbers determined by its mix of red, green, and blue.
Manipulating Text Color
For clarity’s sake, we are going to work with the same simple piece of HTML code for three different manipulations of color. Our first task will be to change the color of the text reading “Applying background color to text.” Simple yet vital to web design.
In the HTML on the left, we can see that the text we want to manipulate is a header wrapped in <h2> tags. So, in the CSS sheet, we locate the h2 tag, and within the braces, or curly brackets, we insert the command
color: #F3E8D9;
I chose a pale blush, HEX #F3E8D9, but you can choose whatever color you like. Placing this piece of code within the h2 braces targets only the text wrapped in <h2> tags, allowing you to specify different colors for different sections of text within your design.
Note:
Do not forget the semi-colon. This might be the only time in your life that you can confidently use that specific punctuation, so enjoy it. Also, if you forget it, your color command will not work.
Manipulating the Background Color of Text
Fortunately, once you have mastered changing the color of text, learning to apply a background color to a line of text will feel like a breeze. Again, we are targeting the line of text that reads, “Applying background color to text” that should now be a pale blush color. As we determined, that text is wrapped in <h2> tags, so we want to write our code in the corresponding h2 section on the CSS sheet. In the line beneath the code we just wrote for the text color, we want to add:
background-color: BF644D;
I chose a rusty terra cotta color with a HEX code of # BF644D. That should significantly increase the readability of the actual text, which is essential in web design. Again, do not forget the semi-colon. The first thing I look for when something isn’t working out in my Stylesheet is missing punctuation.
Manipulating the Background Color of a Container
Take a look at the HTML code on the left. Lines one and four each contain the tag <body>, which creates a container that holds everything written between those two lines. In this case, the text wrapped in <h1> tags, and the text wrapped in <h2> tags. How do we change the background color of that entire space?
On the CSS sheet, beneath the style code for h2, where we were working earlier, there is a section labeled “body,” followed by braces. Within those braces, insert the code:
background-color: #103542;
I chose a deep teal color with the HEX code #103542. That piece of code should fill the entire background of the body with that deep teal color. However, feel free to use whichever colors you like.
The use of color is so ubiquitous in web design that we rarely notice it while surfing the web. Here is a screenshot from PSU’s World Campus landing page. As you can see, color plays a huge role in the design, increasing readability, drawing focus to important information, creating a hierarchy within the layout, and inspiring feelings of loyalty and fondness through the application of official school colors.
After right-clicking empty space on the page, and selecting ” View Page Source” from the menu, we can look at the highly complex HTML and CSS code that was used to create this webpage.
This is a bit more than we were working with, right? But as you look down towards the lower right corners, you see that those very same color commands are still used extensively in complex designs.
As you can see, even in our very simple design, these seemingly small changes in color impacted the overall appearance in a substantial way. In The Old Man and the Sea, Ernest Hemmingway famously wrote, “Now is no time to think of what you do not have. Think of what you can do with that there is” This was my motto as I began my journey with HTML and CSS coding, and I highly encourage you to adopt a similar mantra if you are new to HTML and CSS. Building a strong foundation of basic commands will take you far, and allow you to master more complex commands quickly. In design, small, but meaningful choices, such as the changing of color, can be just as impactful as more intricate changes.
Leave a Reply